@charset "UTF-8";
:root {
  --color-common: #000000;
  --color-attention: #D10019;
  --color-mainbg: #F2F0E9;
  --font-main: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  --font-primary: freight-neo-pro, sans-serif;
  --font-credit: roboto, sans-serif;
}

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

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

.js-fade {
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  opacity: 0;
}

.js-fade.active {
  opacity: 1;
}

.decolation__image.js-fade-Vr {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.content__credit.js-fade-Vr {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.decolation__image--03-2.js-fade-Vr {
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
}

/*===================== ▼ 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% {
    display: none;
  }
  100% {
    display: block;
  }
}
@keyframes border_anime_on {
  0% {
    display: none;
  }
  100% {
    display: block;
  }
}

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

/*===================== ▲ border animation ▲ == */
/*===================== ▼ rotate animation ▼ == */
@-webkit-keyframes text_rotate_left {
  0% {
    -webkit-transform: rotateX(0deg) rotate(-325deg);
  }
  100% {
    -webkit-transform: rotateX(0deg) rotate(-360deg);
  }
}
@keyframes text_rotate_left {
  0% {
    -webkit-transform: rotateX(0deg) rotate(-325deg);
  }
  100% {
    -webkit-transform: rotateX(0deg) rotate(-360deg);
  }
}

.js-text_rotate_left.active {
  -webkit-animation: text_rotate_left 3s ease-out forwards;
          animation: text_rotate_left 3s ease-out forwards;
}

@-webkit-keyframes text_rotate_right {
  0% {
    -webkit-transform: rotateX(0deg) rotate(325deg);
  }
  100% {
    -webkit-transform: rotateX(0deg) rotate(360deg);
  }
}

@keyframes text_rotate_right {
  0% {
    -webkit-transform: rotateX(0deg) rotate(325deg);
  }
  100% {
    -webkit-transform: rotateX(0deg) rotate(360deg);
  }
}

.js-text_rotate_right.active {
  -webkit-animation: text_rotate_right 3s ease-out forwards;
          animation: text_rotate_right 3s ease-out forwards;
}

/*===================== ▲ rotate animation ▲ == */
/*===================== ▼ typing animation ▼ == */
.js-typing {
  visibility: hidden;
}

.js-typing.onView {
  visibility: visible;
}

.js-typing span {
  visibility: hidden;
}

.js-typing span.js-typing_on {
  -webkit-animation: text_anime_on .8s forwards;
          animation: text_anime_on .8s forwards;
}

@keyframes text_anime_on {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

/*===================== ▲ typing animation ▲ == */
.js-border.is-active {
  -webkit-animation: border-animation 1s;
          animation: border-animation 1s;
}

@-webkit-keyframes border-animation {
  0% {
    width: 0;
  }
  50% {
    width: 50;
  }
  100% {
    width: 100;
  }
}

@keyframes border-animation {
  0% {
    width: 0;
  }
  50% {
    width: 50;
  }
  100% {
    width: 100;
  }
}

html {
  font-size: 62.5%;
}

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

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

.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;
}

/*=======================================================
  for Desktop
=======================================================*/
@media screen and (min-width: 768px) {
  .main-container__landing-page .hidden_desktop {
    display: none;
  }
  .bredlist.lp {
    width: 95%;
    line-height: 1.5;
  }
}

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

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

Title : _main.css
For   : LILY BROWN lingerie LIFE STYLE SNAP お気に入りのランジェリーで過ごす1日

Created       : 2022-07-26
Last Modified : 2022-07-26

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

Content

    main

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                            main
============================================================================================== */
.main-container__landing-page {
  width: 100%;
  margin: 0 auto;
  line-height: 1;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  text-align: center;
  font-family: var(--font-main);
  color: var(--color-common);
  background: var(--color-mainbg);
  -webkit-margin-after: var(--lp-mbe, 20rem);
          margin-block-end: var(--lp-mbe, 20rem);
  -webkit-padding-before: var(--lp-pbs, 9rem);
          padding-block-start: var(--lp-pbs, 9rem);
  -webkit-padding-after: var(--lp-pbe, 20rem);
          padding-block-end: var(--lp-pbe, 20rem);
}

/* ==============================================================================================
                                          for desktop
============================================================================================== */
@media screen and (min-width: 768px) {
  .main-container__landing-page {
    --lp-mbe: 140px;
    --lp-pbs: 55px;
    --lp-pbe: 140px;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                          for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-area .main-inner {
    width: 100%;
  }
}

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

Title : _text.css
For   : LILY BROWN lingerie LIFE STYLE SNAP お気に入りのランジェリーで過ごす1日

Created       : 2022-07-26
Last Modified : 2022-07-26

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

Compornent

    text

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                    text
============================================================================================== */
.main-container__landing-page .c-time {
  display: inline-block;
  -webkit-margin-after: var(--time-mbe, 7.5rem);
          margin-block-end: var(--time-mbe, 7.5rem);
  position: relative;
  font-size: var(--time-fz, 7.7rem);
  font-family: var(--font-primary);
  text-align: right;
}

.main-container__landing-page .c-time span {
  font-weight: 200;
}

.main-container__landing-page .c-border {
  height: 1px;
  background-color: var(--color-common);
}

.main-container__landing-page .c-border.is-active {
  display: block;
  width: 100vw;
}

.main-container__landing-page .c-rec {
  font-size: var(--rec-fz, 2.5rem);
}

.main-container__landing-page .c-prodName {
  -webkit-margin-before: var(--prodName-mbs, 10rem);
          margin-block-start: var(--prodName-mbs, 10rem);
  font-size: var(--prodName-fz, 3.6rem);
}

.main-container__landing-page .c-prodType {
  -webkit-margin-before: var(--prodType-mbs, 3rem);
          margin-block-start: var(--prodType-mbs, 3rem);
}

.main-container__landing-page .c-prodType .name {
  font-size: var(--prodType-fz, 2.7rem);
}

.main-container__landing-page .c-prodType .credit {
  -webkit-padding-start: var(--prodType-pis, 2rem);
          padding-inline-start: var(--prodType-pis, 2rem);
  font-size: var(--prodType-fz, 3rem);
  font-family: var(--font-credit);
}

.main-container__landing-page .c-prodType + .c-prodType {
  -webkit-margin-before: var(--prodType-mbs, 1rem);
          margin-block-start: var(--prodType-mbs, 1rem);
}

.main-container__landing-page .c-desc {
  -webkit-margin-before: var(--desc-mbs, 6rem);
          margin-block-start: var(--desc-mbs, 6rem);
  font-size: var(--desc-fz, 2.4rem);
  letter-spacing: .05em;
}

.main-container__landing-page .c-credit {
  -webkit-margin-before: var(--credit-mbs, 2.5rem);
          margin-block-start: var(--credit-mbs, 2.5rem);
  font-size: var(--credit-fz, 3rem);
  font-family: var(--font-credit);
}

.main-container__landing-page .c-before {
  font-size: var(--before-fz, 2.6rem);
  text-decoration: line-through;
}

.main-container__landing-page .c-arrow {
  margin-inline: var(--arrow-mi, 2rem);
  font-size: var(--arrow-fz, 3rem);
  font-family: var(--font-main);
  color: var(--color-attention);
}

.main-container__landing-page .c-rate {
  -webkit-margin-start: var(--rate-mis, 0.5rem);
          margin-inline-start: var(--rate-mis, 0.5rem);
  font-size: var(--rate-fz, 2.6rem);
  color: var(--color-attention);
}

.main-container__landing-page .c-disc {
  font-size: var(--disc-fz, 3rem);
  color: var(--color-attention);
}

.main-container__landing-page .c-allBtn {
  width: var(--allBtn-w, 67.5rem);
  height: var(--allBtn-h, 15rem);
  margin: auto;
  -webkit-margin-before: var(--allBtn-mbs, 15rem);
          margin-block-start: var(--allBtn-mbs, 15rem);
  font-size: var(--allBtn-fz, 4.1rem);
  font-family: var(--font-primary);
}

.main-container__landing-page .c-allBtn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}

.main-container__landing-page .c-topBtn {
  width: var(--topBtn-w, 67.5rem);
  height: var(--topBtn-h, 15rem);
  margin: auto;
  -webkit-margin-before: var(--topBtn-mbs, 3rem);
          margin-block-start: var(--topBtn-mbs, 3rem);
}

.main-container__landing-page .c-topBtn img {
  width: var(--topBtn-w, 24.5rem);
}

.main-container__landing-page .c-topBtn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-padding-before: var(--topBtn-pbs, 2rem);
          padding-block-start: var(--topBtn-pbs, 2rem);
  border: 1px solid #000;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page .c-time {
    --time-mbe: 60px;
    --time-fz: 48px;
    right: calc(915*(100vw/1400));
  }
  .main-container__landing-page .c-prodName {
    --prodName-mbs: 55px;
    --prodName-fz: 19px;
    line-height: 1.5789473684;
  }
  .main-container__landing-page .c-prodType {
    --prodType-mbs: 15px;
  }
  .main-container__landing-page .c-prodType .name {
    --prodType-fz: 15px;
  }
  .main-container__landing-page .c-prodType .credit {
    --prodType-pis: 15px;
    --prodType-fz: 17px;
  }
  .main-container__landing-page .c-prodType + .c-prodType {
    --prodType-mbs: 5px;
  }
  .main-container__landing-page .c-desc {
    --desc-mbs: 35px;
    --desc-fz: 13px;
    line-height: 1.9230769231;
  }
  .main-container__landing-page .c-credit {
    --credit-mbs: 15px;
    --credit-fz: 17px;
  }
  .main-container__landing-page .c-before {
    --before-fz: 14px;
  }
  .main-container__landing-page .c-arrow {
    --arrow-mi: 10px;
    --arrow-fz: 17px;
  }
  .main-container__landing-page .c-rate {
    --rate-mis: 5px;
    --rate-fz: 14px;
  }
  .main-container__landing-page .c-disc {
    --disc-fz: 17px;
  }
  .main-container__landing-page .c-allBtn {
    --allBtn-w: 420px;
    --allBtn-h: 75px;
    --allBtn-mbs: 90px;
    --allBtn-fz: 22px;
  }
  .main-container__landing-page .c-topBtn {
    --topBtn-w: 420px;
    --topBtn-h: 75px;
    --topBtn-mbs: 20px;
  }
  .main-container__landing-page .c-topBtn a {
    --topBtn-pbs: 8px;
  }
  .main-container__landing-page .c-topBtn img {
    --topBtn-w: 130px;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .c-time {
    right: 42rem;
  }
  .main-container__landing-page .c-prodName {
    line-height: 1.3611111111;
  }
  .main-container__landing-page .c-desc {
    line-height: 1.75;
  }
}

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

Title : _content.css
For   : LILY BROWN lingerie LIFE STYLE SNAP お気に入りのランジェリーで過ごす1日

Created       : 2022-07-26
Last Modified : 2022-07-26

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

Content

    content

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                    content
============================================================================================== */
.main-container__landing-page .l-cnt {
  overflow: hidden;
}

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

.main-container__landing-page .l-cnt__blk + .l-cnt__blk {
  -webkit-margin-before: var(--blk-mbs, 17rem);
          margin-block-start: var(--blk-mbs, 17rem);
}

.main-container__landing-page .l-cnt__blk--3 .l-cnt__model {
  -webkit-margin-before: var(--blk-mbs, 17.5rem);
          margin-block-start: var(--blk-mbs, 17.5rem);
}

.main-container__landing-page .l-cnt__elm {
  position: relative;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.main-container__landing-page .l-cnt__elm--1-2 {
  -webkit-margin-before: var(--blk-mbs, 5rem);
          margin-block-start: var(--blk-mbs, 5rem);
}

.main-container__landing-page .l-cnt__elm--3-2 {
  -webkit-margin-before: var(--elm-mbs, 10.5rem);
          margin-block-start: var(--elm-mbs, 10.5rem);
}

.main-container__landing-page .l-cnt__elm--3-4 {
  -webkit-margin-start: var(--elm-mis, 15rem);
          margin-inline-start: var(--elm-mis, 15rem);
}

.main-container__landing-page .l-cnt__elm--5-2 {
  -webkit-margin-before: var(--elm-mbs, 5rem);
          margin-block-start: var(--elm-mbs, 5rem);
  -webkit-margin-start: var(--elm-mis, 30rem);
          margin-inline-start: var(--elm-mis, 30rem);
}

.main-container__landing-page .l-img {
  position: relative;
  z-index: 2;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page .l-cnt__blk {
    width: 95%;
    margin: auto;
  }
  .main-container__landing-page .l-cnt__blk + .l-cnt__blk {
    --blk-mbs: 130px;
  }
  .main-container__landing-page .l-cnt__blk--1 .l-cnt__inr {
    -webkit-padding-start: 26rem;
            padding-inline-start: 26rem;
  }
  .main-container__landing-page .l-cnt__blk--2 .c-prodName:nth-of-type(2) {
    --prodName-mbs: 30px;
  }
  .main-container__landing-page .l-cnt__blk--2 .c-border {
    -webkit-margin-before: 10px;
            margin-block-start: 10px;
  }
  .main-container__landing-page .l-cnt__blk--3 .l-cnt__item > .l-cnt__inr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-padding-start: 2rem;
            padding-inline-start: 2rem;
  }
  .main-container__landing-page .l-cnt__blk--3 .l-cnt__model {
    --blk-mbs: 140px;
  }
  .main-container__landing-page .l-cnt__blk--3 .c-border {
    -webkit-margin-before: 10px;
            margin-block-start: 10px;
  }
  .main-container__landing-page .l-cnt__blk--4 .c-border {
    -webkit-margin-before: 10px;
            margin-block-start: 10px;
  }
  .main-container__landing-page .l-cnt__blk--5 .l-cnt__model > .l-cnt__inr {
    -webkit-padding-start: 10rem;
            padding-inline-start: 10rem;
  }
  .main-container__landing-page .l-cnt__blk--5 .l-cnt__item .l-cnt__inr {
    -webkit-padding-end: 12.5rem;
            padding-inline-end: 12.5rem;
  }
  .main-container__landing-page .l-cnt__elm--1-1 {
    max-width: 480px;
  }
  .main-container__landing-page .l-cnt__elm--1-2 {
    --blk-mbs: 310px;
    max-width: 392px;
    -webkit-margin-start: -9rem;
            margin-inline-start: -9rem;
    -webkit-padding-before: 1.2rem;
            padding-block-start: 1.2rem;
    -webkit-padding-start: 1.2rem;
            padding-inline-start: 1.2rem;
    background-color: var(--color-mainbg);
    z-index: 2;
  }
  .main-container__landing-page .l-cnt__elm--1-3 .l-cnt__card + .l-cnt__card {
    -webkit-margin-start: 4rem;
            margin-inline-start: 4rem;
  }
  .main-container__landing-page .l-cnt__elm--2-1, .main-container__landing-page .l-cnt__elm--2-2 {
    max-width: 400px;
  }
  .main-container__landing-page .l-cnt__elm--2-2 {
    -webkit-margin-start: 1.2rem;
            margin-inline-start: 1.2rem;
  }
  .main-container__landing-page .l-cnt__elm--3-1 {
    max-width: 400px;
    -webkit-margin-start: 15rem;
            margin-inline-start: 15rem;
  }
  .main-container__landing-page .l-cnt__elm--3-2 {
    --elm-mbs: 105px;
  }
  .main-container__landing-page .l-cnt__elm--3-4 {
    --elm-mis: 3rem;
  }
  .main-container__landing-page .l-cnt__elm--3-3, .main-container__landing-page .l-cnt__elm--3-4 {
    max-width: 440px;
  }
  .main-container__landing-page .l-cnt__elm--4-1 {
    max-width: 480px;
  }
  .main-container__landing-page .l-cnt__elm--5-1 {
    max-width: 420px;
  }
  .main-container__landing-page .l-cnt__elm--5-2 {
    --elm-mbs: 150px;
    --elm-mis: 9rem;
    max-width: 480px;
  }
  .main-container__landing-page .l-cnt__elm--5-3 {
    max-width: 373px;
    width: 45%;
    -webkit-margin-before: -140px;
            margin-block-start: -140px;
    -webkit-padding-before: 1.2rem;
            padding-block-start: 1.2rem;
    -webkit-padding-end: 1.2rem;
            padding-inline-end: 1.2rem;
    background-color: var(--color-mainbg);
    z-index: 2;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .l-cnt__blk--2 .c-prodName:nth-of-type(2) {
    --prodName-mbs: 6.5rem;
  }
  .main-container__landing-page .l-cnt__blk--3 {
    --blk-mbs: 19rem;
  }
  .main-container__landing-page .l-cnt__blk--3 .l-cnt__model .l-cnt__inr {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .main-container__landing-page .l-cnt__blk--3 .l-cnt__item .c-prodName {
    --prodName-mbs: 0;
  }
  .main-container__landing-page .l-cnt__blk--4 {
    --blk-mbs: 19rem;
  }
  .main-container__landing-page .l-cnt__inr {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .main-container__landing-page .l-cnt__elm--1-1 {
    width: 64rem;
    margin: auto;
  }
  .main-container__landing-page .l-cnt__elm--1-2 {
    width: 54rem;
    margin: auto;
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
  }
  .main-container__landing-page .l-cnt__elm--2-1 {
    width: 56rem;
    -webkit-margin-start: 19rem;
            margin-inline-start: 19rem;
  }
  .main-container__landing-page .l-cnt__elm--2-2 {
    width: 56rem;
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
    -webkit-margin-end: 11rem;
            margin-inline-end: 11rem;
  }
  .main-container__landing-page .l-cnt__elm--3-1 {
    width: 64rem;
    margin: auto;
  }
  .main-container__landing-page .l-cnt__elm--3-3 {
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
    width: 56rem;
  }
  .main-container__landing-page .l-cnt__elm--3-4 {
    width: 56rem;
  }
  .main-container__landing-page .l-cnt__elm--4-1 {
    width: 64rem;
    margin: auto;
  }
  .main-container__landing-page .l-cnt__elm--5-1 {
    width: 56rem;
    -webkit-margin-end: 9rem;
            margin-inline-end: 9rem;
  }
  .main-container__landing-page .l-cnt__elm--5-2 {
    width: 45rem;
  }
  .main-container__landing-page .l-cnt__elm--5-3 {
    width: 45rem;
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
    -webkit-margin-end: 10rem;
            margin-inline-end: 10rem;
  }
}

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

Title : _firstview.css
For   : LILY BROWN lingerie LIFE STYLE SNAP お気に入りのランジェリーで過ごす1日

Created       : 2022-07-26
Last Modified : 2022-07-26

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

Content

    firstview

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                    firstview
============================================================================================== */
.main-container__landing-page .l-firstview {
  -webkit-margin-after: var(--fv-mbe, 19.5rem);
          margin-block-end: var(--fv-mbe, 19.5rem);
}

.main-container__landing-page .l-firstview__logo {
  width: var(--logo-w, 25rem);
  margin: auto;
}

.main-container__landing-page .l-firstview__ttl {
  -webkit-margin-before: var(--ttl-mbs, 2.5rem);
          margin-block-start: var(--ttl-mbs, 2.5rem);
  font-family: var(--font-primary);
  font-size: var(--ttl-fz, 9.4rem);
  font-weight: 200;
  letter-spacing: 0.03em;
}

.main-container__landing-page .l-firstview__sub {
  -webkit-margin-before: var(--sub-mbs, 3rem);
          margin-block-start: var(--sub-mbs, 3rem);
  font-size: var(--sub-fz, 2.9rem);
  letter-spacing: 0.02em;
}

.main-container__landing-page .l-firstview__lead {
  -webkit-margin-before: var(--lead-mbs, 9rem);
          margin-block-start: var(--lead-mbs, 9rem);
  font-size: var(--lead-fz, 2.6rem);
  letter-spacing: 0.05em;
}

.main-container__landing-page .l-firstview__lead span {
  display: block;
}

.main-container__landing-page .l-firstview__lead span + span {
  -webkit-margin-before: var(--lead-mbs, 5rem);
          margin-block-start: var(--lead-mbs, 5rem);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page .l-firstview {
    --fv-mbe: 100px;
  }
  .main-container__landing-page .l-firstview__logo {
    --logo-w:150px;
  }
  .main-container__landing-page .l-firstview__ttl {
    --ttl-mbs: 20px;
    --ttl-fz: 69px;
  }
  .main-container__landing-page .l-firstview__sub {
    --sub-mbs: 30px;
    --sub-fz: 18px;
  }
  .main-container__landing-page .l-firstview__lead {
    --lead-mbs: 55px;
    --lead-fz: 15px;
    line-height: 2.2666666667;
  }
  .main-container__landing-page .l-firstview__lead span + span {
    --lead-mbs: 40px;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .l-firstview__lead {
    line-height: 2;
  }
}