@charset "UTF-8";
:root {
  --color-common: #000000;
  --color-bg01: #F5F6F3;
}

.js-fade-Vr {
  -webkit-transition-duration: .8s;
          transition-duration: .8s;
  opacity: 0;
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
}

.js-fade-Vr.active {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.js-fade-Hr {
  -webkit-transition-duration: 2s;
          transition-duration: 2s;
  opacity: 0;
  -webkit-transform: translateX(-5rem);
          transform: translateX(-5rem);
}

.js-fade-Hr.active {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/*===================== ▼ typing animation ▼ == */
.js-texttyping {
  opacity: 0;
}

.js-texttyping.onView,
.js-border::before.onView {
  opacity: 1;
}

.js-texttyping span,
.js-border::before {
  opacity: 0;
}

.js-texttyping span.js-typing_on {
  -webkit-animation: text_anime_on 1s ease-out forwards;
          animation: text_anime_on 1s ease-out forwards;
}

@-webkit-keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*===================== ▲ typing animation ▲ == */
/*===================== ▼ border animation ▼ == */
@-webkit-keyframes border_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes border_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.js-border::before.onView {
  -webkit-animation: border_anime_on 1s ease-out forwards;
          animation: border_anime_on 1s ease-out forwards;
}

/*===================== ▲ border animation ▲ == */
/*===================== ▼ text animation ▼ == */
.js-trigger {
  position: relative;
  overflow: hidden;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.js-trigger__inner {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.js-trigger.active {
  -webkit-animation-name: slide-forward;
          animation-name: slide-forward;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.js-trigger.active .js-trigger__inner {
  -webkit-animation-name: slide-revert;
          animation-name: slide-revert;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes slide-revert {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-revert {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes slide-forward {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-forward {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

/*===================== ▲ text animation ▲ == */
html {
  font-size: 62.5%;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  html {
    font-size: calc(10* (100vw / 1200));
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(10* (100vw / 750));
  }
}

body {
  width: 100%;
}

#Header,
#header,
.footer,
.main-area {
  background-color: var(--color-bg01);
}

@media screen and (min-width: 768px) {
  .main-area .main-inner {
    max-width: inherit;
    width: inherit;
  }
  .bredlist.lp {
    margin: 0 auto;
    padding: 20px 0;
  }
}

@media screen and (max-width: 1200px) {
  .footer .footer-inner {
    max-width: calc(1100* (100vw / 1200));
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .main-area .main-inner {
    margin: 0 auto;
    width: 100%;
  }
  .main-area {
    overflow-x: visible;
  }
  .page-top.static {
    position: relative;
    right: 0;
  }
}

.main-container__landing-page img,
.main-container__landing-page video,
.main-container__landing-page svg {
  width: 100%;
  height: auto;
}

.main-container__landing-page * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main-container__landing-page a,
.main-container__landing-page picture {
  display: block;
}

@media screen and (min-width: 768px) {
  .main-container__landing-page .hidden_desktop {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .main-container__landing-page .hidden_mobile {
    display: none;
  }
}

/*//////////////////////////////////////////////////

Title : _main.css
For   : LILY BROWN Lingerie

Created       : 2022-03-21
Last Modified : 2022-03-21


==========================================

Content

    main

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                            common
============================================================================================== */
.main-container__landing-page {
  width: 100%;
  margin: 0 auto;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
  font-family: baskerville-display-pt, serif;
  line-height: 1;
  color: var(--color-common);
  background-color: var(--color-bg01);
}

/* ==============================================================================================
                                            for desktop
============================================================================================== */
@media screen and (min-width: 768px) {
  .main-container__landing-page {
    padding: 25px 0 170px;
    font-size: 21px;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                          for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page {
    padding: 3.33333vw 0 32vw;
    font-size: 2.8vw;
  }
}

/*//////////////////////////////////////////////////

Title : _content.css
For   : LILY BROWN Lingerie

Created       : 2022-03-21
Last Modified : 2022-03-22


==========================================

Content

    content

//////////////////////////////////////////////////*/
/* ==============================================================================================
									common
============================================================================================== */
.main-container__landing-page .content__wrapper {
  position: relative;
  background-color: var(--color-bg01);
  z-index: 10;
  -webkit-transform: translate3d(0, 0, 0);
}

.main-container__landing-page .content__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.main-container__landing-page .content__inner--sec06-1 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.main-container__landing-page .content__image {
  background-color: #fff;
}

.main-container__landing-page .content__block {
  position: relative;
}

.main-container__landing-page .content__block--sec04 {
  position: -webkit-sticky;
  position: sticky;
}

.main-container__landing-page .content__unit {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.main-container__landing-page .content__unit--sec01-2, .main-container__landing-page .content__unit--sec05-3, .main-container__landing-page .content__unit--sec05-4 {
  background-color: #000;
}

.main-container__landing-page .content__unit--sec02-3::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-color: #000;
}

.main-container__landing-page .content__unit--sec02-3 .content__image {
  position: relative;
  z-index: 2;
}

.main-container__landing-page .content__unit--sec05-2 {
  z-index: 2;
}

/* ==============================================================================================
									for desktop
============================================================================================== */
@media screen and (min-width: 768px) {
  .main-container__landing-page .content__wrapper {
    padding-top: 220px;
  }
  .main-container__landing-page .content__block--sec02 {
    margin-top: 150px;
  }
  .main-container__landing-page .content__block--sec03 {
    margin-top: 220px;
  }
  .main-container__landing-page .content__block--sec04 {
    margin: 0 auto;
    margin-top: 220px;
    max-width: 1200px;
    top: 0;
  }
  .main-container__landing-page .content__block--sec06 {
    margin-top: 220px;
  }
  .main-container__landing-page .content__inner--sec01-1 {
    padding-left: 45px;
  }
  .main-container__landing-page .content__inner--sec02-1 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .main-container__landing-page .content__inner--sec02-1 .swiper-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-right: 5rem;
  }
  .main-container__landing-page .content__inner--sec02-2 {
    margin-top: 220px;
  }
  .main-container__landing-page .content__inner--sec04-1 {
    margin-right: 44rem;
  }
  .main-container__landing-page .content__inner--sec04-2 {
    margin-top: 10px;
    margin-left: 44rem;
  }
  .main-container__landing-page .content__inner--sec05-1 {
    padding-left: 2.5rem;
  }
  .main-container__landing-page .content__inner--sec05-2 {
    margin-top: -13rem;
    padding-left: 28.5rem;
  }
  .main-container__landing-page .content__unit {
    position: relative;
    height: 100%;
  }
  .main-container__landing-page .content__unit--sec01-1 {
    margin-top: 245px;
    max-width: 570px;
    width: 47.5vw;
    z-index: 10;
  }
  .main-container__landing-page .content__unit--sec01-2 {
    margin-left: 27px;
    max-width: 400px;
    width: 33.33333vw;
    z-index: 10;
  }
  .main-container__landing-page .content__unit--sec01-3 {
    margin-top: 150px;
  }
  .main-container__landing-page .content__unit--sec02-1, .main-container__landing-page .content__unit--sec02-2, .main-container__landing-page .content__unit--sec06-1, .main-container__landing-page .content__unit--sec06-2 {
    max-width: 600px;
    width: 50vw;
  }
  .main-container__landing-page .content__unit--sec02-3 {
    max-width: 455px;
    width: 37.91667vw;
    padding-top: 15px;
    padding-left: 15px;
  }
  .main-container__landing-page .content__unit--sec02-3::before {
    width: 40.5rem;
    height: 55rem;
  }
  .main-container__landing-page .content__unit--sec02-4 {
    margin-top: 26.5rem;
    margin-left: 6rem;
  }
  .main-container__landing-page .content__unit--sec03-1 {
    max-width: 1200px;
  }
  .main-container__landing-page .content__unit--sec04-1, .main-container__landing-page .content__unit--sec04-2, .main-container__landing-page .content__unit--sec04-3, .main-container__landing-page .content__unit--sec04-4 {
    width: 38rem;
  }
  .main-container__landing-page .content__unit--sec05-1 {
    max-width: 600px;
    width: 50vw;
    background-color: #000;
  }
  .main-container__landing-page .content__unit--sec05-2 {
    max-width: 365px;
    width: 30.41667vw;
    margin-top: 6rem;
    margin-left: -4rem;
  }
  .main-container__landing-page .content__unit--sec05-3 {
    max-width: 325px;
    width: 27.08333vw;
    margin-top: 18.5rem;
  }
  .main-container__landing-page .content__unit--sec05-4 {
    max-width: 310px;
    width: 25.83333vw;
    margin-left: 5rem;
  }
  .main-container__landing-page .content__unit--sec01-2, .main-container__landing-page .content__unit--sec05-1, .main-container__landing-page .content__unit--sec05-3, .main-container__landing-page .content__unit--sec05-4 {
    padding: 10px;
  }
  .main-container__landing-page .content__text--01 {
    margin: 0 auto;
    max-width: 510px;
    width: 42.5vw;
    position: relative;
    z-index: 10;
  }
  .main-container__landing-page .content__text--02 {
    margin: 0 auto;
    margin-top: 45px;
    max-width: 460px;
    width: 38.33333vw;
    overflow: visible;
  }
  .main-container__landing-page .content__text--02::before {
    content: "";
    display: block;
    width: 234.5rem;
    height: 221.5rem;
    position: absolute;
    top: -80.5rem;
    right: -18.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/background_pc-01.png);
  }
  .main-container__landing-page .content__text--02 img {
    position: relative;
  }
  .main-container__landing-page .content__text--03 {
    max-width: 330px;
    width: 27.5vw;
  }
  .main-container__landing-page .content__text--04 {
    max-width: 365px;
    width: 30vw;
  }
  .main-container__landing-page .content__text--05 {
    width: 1.5rem;
    position: absolute;
    top: 6.5rem;
    left: -5rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .content__wrapper {
    padding-top: 21.33333vw;
  }
  .main-container__landing-page .content__block--sec01::before {
    content: "";
    display: block;
    width: 100vw;
    height: 161.6vw;
    position: absolute;
    top: 213.33333vw;
    left: 0;
    background-image: url(../img/background_sp-01.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
  .main-container__landing-page .content__block--sec02 {
    margin-top: 16.66667vw;
  }
  .main-container__landing-page .content__block--sec03 {
    margin-top: 18.66667vw;
  }
  .main-container__landing-page .content__block--sec04 {
    margin: 0 auto;
    margin-top: 21.33333vw;
    top: 35.33333vw;
    top: 0;
  }
  .main-container__landing-page .content__block--sec05 {
    padding-bottom: 8.66667vw;
  }
  .main-container__landing-page .content__block--sec06 {
    margin-top: 26.66667vw;
  }
  .main-container__landing-page .content__inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .main-container__landing-page .content__inner--sec01-1 {
    padding: 0 3.33333vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .main-container__landing-page .content__inner--sec02-1 {
    padding: 0 3.33333vw;
  }
  .main-container__landing-page .content__inner--sec02-2 {
    margin-top: 21.33333vw;
  }
  .main-container__landing-page .content__inner--sec04-1, .main-container__landing-page .content__inner--sec04-2 {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow: hidden;
  }
  .main-container__landing-page .content__inner--sec04-2 {
    margin-top: 1.33333vw;
  }
  .main-container__landing-page .content__inner--sec05-2 {
    margin-top: 26.66667vw;
  }
  .main-container__landing-page .content__unit--sec01-1 {
    margin-top: 13.33333vw;
  }
  .main-container__landing-page .content__unit--sec01-2 {
    width: 61.33333vw;
    margin: 0 auto;
  }
  .main-container__landing-page .content__unit--sec01-3 {
    margin-top: 16.66667vw;
  }
  .main-container__landing-page .content__unit--sec02-3 {
    width: 69.33333vw;
    padding-top: 2.66667vw;
    padding-left: 2.66667vw;
  }
  .main-container__landing-page .content__unit--sec02-3::before {
    width: 61.33333vw;
    height: 83.33333vw;
  }
  .main-container__landing-page .content__unit--sec02-4 {
    margin-top: 14.66667vw;
    padding-left: 1.73333vw;
  }
  .main-container__landing-page .content__unit--sec03-1 {
    padding: 0 3.33333vw;
  }
  .main-container__landing-page .content__unit--sec04-1, .main-container__landing-page .content__unit--sec04-2, .main-container__landing-page .content__unit--sec04-3, .main-container__landing-page .content__unit--sec04-4 {
    width: 60vw;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .main-container__landing-page .content__unit--sec04-1 {
    margin-left: 21.33333vw;
  }
  .main-container__landing-page .content__unit--sec04-3 {
    margin-left: 43.33333vw;
  }
  .main-container__landing-page .content__unit--sec04-2, .main-container__landing-page .content__unit--sec04-4 {
    margin-left: 1.33333vw;
  }
  .main-container__landing-page .content__unit--sec05-1 {
    padding: 4.66667vw 0;
  }
  .main-container__landing-page .content__unit--sec05-1::before {
    display: block;
    width: 55.33333vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background-color: #000;
  }
  .main-container__landing-page .content__unit--sec05-1 .content__image {
    position: relative;
    z-index: 10;
  }
  .main-container__landing-page .content__unit--sec05-3, .main-container__landing-page .content__unit--sec05-4 {
    width: 61.33333vw;
    margin: 0 auto;
  }
  .main-container__landing-page .content__unit--sec06-1, .main-container__landing-page .content__unit--sec06-2 {
    padding: 0 5.6vw 0 1.06667vw;
  }
  .main-container__landing-page .content__unit--sec01-2, .main-container__landing-page .content__unit--sec05-3, .main-container__landing-page .content__unit--sec05-4 {
    padding: 2vw;
  }
  .main-container__landing-page .content__text--01 {
    margin: 0 auto;
    width: 68vw;
    height: 12.66667vw;
  }
  .main-container__landing-page .content__text--02 {
    margin: 0 auto;
    margin-top: 6vw;
    width: 61.33333vw;
  }
  .main-container__landing-page .content__text--03 {
    width: 44.26667vw;
  }
  .main-container__landing-page .content__text--04 {
    width: 44.66667vw;
    position: absolute;
    bottom: 10.66667vw;
    right: 6vw;
  }
  .main-container__landing-page .content__text--05 {
    width: 42.66667vw;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}

/*//////////////////////////////////////////////////

Title : _firstview.css
For   : LILY BROWN Lingerie

Created       : 2022-03-21
Last Modified : 2022-03-21

==========================================

Content

    firstview

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                    common
============================================================================================== */
.main-container__landing-page .firstview {
  margin: 0 auto;
}

.main-container__landing-page .firstview__title--upper, .main-container__landing-page .firstview__title--lower {
  margin: 0 auto;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for dektop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page .firstview {
    max-width: 1200px;
    margin-bottom: 135px;
  }
  .main-container__landing-page .firstview__title {
    margin-top: 100px;
  }
  .main-container__landing-page .firstview__title--upper {
    max-width: 535px;
    width: 44.58333vw;
  }
  .main-container__landing-page .firstview__title--lower {
    margin-top: 22rem;
    max-width: 805px;
    width: 67.08333vw;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .firstview {
    margin-bottom: 16.66667vw;
  }
  .main-container__landing-page .firstview__image {
    padding: 0 3.33333vw;
  }
  .main-container__landing-page .firstview__title {
    margin-top: 21.33333vw;
  }
  .main-container__landing-page .firstview__title--upper {
    width: 71.33333vw;
  }
  .main-container__landing-page .firstview__title--lower {
    margin-top: 16.66667vw;
    width: 54vw;
  }
}

/*//////////////////////////////////////////////////

Title : _foot.css
For   : LILY BROWN Lingerie

Created       : 2022-03-21
Last Modified : 2022-03-21

==========================================

Content

    foot

//////////////////////////////////////////////////*/
/* ==============================================================================================
										common
============================================================================================== */
.main-container__landing-page .foot {
  text-align: center;
}

.main-container__landing-page .foot::before {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}

.main-container__landing-page .foot__button {
  margin: 0 auto;
}

.main-container__landing-page .foot__image {
  margin: 0 auto;
  position: relative;
}

.main-container__landing-page .foot__text {
  margin: 0 auto;
}

.main-container__landing-page .staff-credit__title, .main-container__landing-page .staff-credit__name {
  margin: 0 auto;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for dexktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page .foot {
    margin-top: 225px;
  }
  .main-container__landing-page .foot::before {
    width: 100%;
    height: 76.5rem;
    bottom: -27.5rem;
    left: 0;
    background-image: url(../img/background_pc-02.png);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: top center;
  }
  .main-container__landing-page .foot__button {
    margin-top: 47px;
    width: 225px;
  }
  .main-container__landing-page .foot__text--01 {
    max-width: 470px;
    width: 39.16667vw;
  }
  .main-container__landing-page .foot__text--02 {
    margin-top: 55px;
    max-width: 290px;
    width: 24.16667vw;
  }
  .main-container__landing-page .foot__image {
    max-width: 485px;
    width: 40.41667vw;
    margin-top: 30px;
  }
  .main-container__landing-page .staff-credit {
    margin-top: 200px;
    position: relative;
    z-index: 10;
  }
  .main-container__landing-page .staff-credit__title {
    max-width: 105px;
    width: 8.75vw;
  }
  .main-container__landing-page .staff-credit__name {
    margin-top: 90px;
    max-width: 330px;
    width: 27.5vw;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for tablet
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .main-container__landing-page .foot::before {
    bottom: -36.5rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .foot {
    height: 100%;
    margin-top: 21.33333vw;
  }
  .main-container__landing-page .foot::before {
    width: 100vw;
    height: 104.8vw;
    bottom: -55.33333vw;
    left: 0;
    background-image: url(../img/background_sp-02.png);
  }
  .main-container__landing-page .foot__button {
    margin-top: 6.4vw;
    margin-left: 35.6vw;
    width: 30vw;
  }
  .main-container__landing-page .foot__text--01 {
    margin-top: 9.33333vw;
    width: 62.66667vw;
  }
  .main-container__landing-page .foot__text--02 {
    margin-top: 2vw;
    margin-left: 31.33333vw;
    width: 38.66667vw;
  }
  .main-container__landing-page .foot__image {
    width: 64.66667vw;
  }
  .main-container__landing-page .staff-credit {
    margin-top: 32vw;
  }
  .main-container__landing-page .staff-credit__title {
    width: 14.66667vw;
  }
  .main-container__landing-page .staff-credit__name {
    margin-top: 8vw;
    margin-left: 29.06667vw;
    width: 44vw;
  }
}
/*# sourceMappingURL=layout.css.map */