:root {
  --font-en: "norman-variable", sans-serif;
  --font-jp: "zen-kaku-gothic-antique", sans-serif;
  --color-cold: #7DADA4;
  --color-warm: #C4A257;
  --color-basis: #333333;
}

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

Title : style.scss
For   : LILY BROWN Lingerie Corsetta Bra NEW IN

Created       : 2023-04-07
Last Modified : 2023-04-11

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

Content

//////////////////////////////////////////////////*/
/* ===================== common */
.article {
  color: var(--color-basis);
}
.article * {
  box-sizing: border-box;
  font-style: normal;
}
.article * a {
  display: var(--display, block);
}
.article picture {
  display: block;
}
.article img,
.article video,
.article svg {
  width: 100%;
  height: auto;
}

/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .main-area .main-inner {
    width: initial;
  }
  .article {
    -webkit-padding-after: 97.5px;
            padding-block-end: 97.5px;
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .article {
    max-width: 1140px;
    width: 95%;
    -webkit-margin-before: 50px;
            margin-block-start: 50px;
    margin-inline: auto;
    -webkit-padding-after: 200px;
            padding-block-end: 200px;
  }
}
/* ===================== hero */
.hero {
  text-align: center;
}
.hero__image {
  -webkit-animation: firstviewFade 0.8s ease-in-out forwards;
          animation: firstviewFade 0.8s ease-in-out forwards;
}
.hero__lead {
  font-family: var(--font-jp);
}
.hero__lead span {
  display: block;
}

/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .hero__lead {
    -webkit-margin-before: 52px;
            margin-block-start: 52px;
    -webkit-margin-after: 69px;
            margin-block-end: 69px;
    font-size: 12px;
    line-height: 2.0833333333;
    letter-spacing: 0.05em;
  }
  .hero__lead span + span {
    -webkit-margin-before: 14px;
            margin-block-start: 14px;
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .hero__visual {
    max-width: 805px;
    margin-inline: auto;
  }
  .hero__lead {
    -webkit-margin-before: 70px;
            margin-block-start: 70px;
    -webkit-margin-after: 139px;
            margin-block-end: 139px;
    font-size: 14px;
    line-height: 2.1428571429;
    letter-spacing: 0.05em;
  }
  .hero__lead span + span {
    -webkit-margin-before: 25px;
            margin-block-start: 25px;
  }
}
/* ===================== contents */
/* --- common --- */
.contents__title, .contents__heading {
  font-family: var(--font-en);
  line-height: 1;
}
.contents__title span, .contents__heading span {
  display: inline-block;
}
.contents__title .notes, .contents__heading .notes {
  display: inline-block;
  font-family: var(--font-jp);
}
.contents__heading {
  text-align: center;
  color: var(--color-cold);
}
.contents__heading .en {
  border-bottom: var(--color-cold) 1px solid;
  letter-spacing: 0.2em;
  font-weight: 650;
}
.contents__heading .notes {
  letter-spacing: 0.1em;
}
.contents__title {
  letter-spacing: 0.2em;
  color: var(--color-warm);
}
.contents__title .en {
  letter-spacing: 0;
}
.contents__title .notes {
  color: var(--color-basis);
  letter-spacing: 0.2em;
}
.contents__visual {
  background-color: #fff;
}
.contents__wrapper {
  display: grid;
}
.contents__credit {
  letter-spacing: 0;
}
.contents__credit a {
  --display: inline-block;
}

/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .contents__wrapper {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 15px;
         column-gap: 15px;
    justify-content: center;
    place-items: center;
    align-items: start;
  }
  .contents__wrapper:first-child {
    -webkit-margin-before: 40px;
            margin-block-start: 40px;
  }
  .contents__wrapper:first-child .contents__image:nth-of-type(1) {
    grid-column: span 2;
    grid-row: 1;
    -webkit-margin-after: 60px;
            margin-block-end: 60px;
    width: 100%;
  }
  .contents__wrapper:first-child .contents__image:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
  .contents__wrapper:first-child .contents__image:nth-of-type(4) {
    grid-column: 2;
    grid-row: 3;
    -webkit-padding-end: 20px;
            padding-inline-end: 20px;
  }
  .contents__wrapper:first-child .contents__image:nth-of-type(5) {
    grid-column: 1/3;
    grid-row: 4;
    -webkit-margin-before: 65px;
            margin-block-start: 65px;
  }
  .contents__wrapper:first-child .contents__title {
    grid-column: span 2;
    grid-row: 2;
    -webkit-margin-after: 60px;
            margin-block-end: 60px;
  }
  .contents__wrapper:first-child .contents__title span:nth-of-type(2) {
    transform: translateY(20px);
  }
  .contents__wrapper:first-child .contents__title .notes {
    -webkit-padding-start: 32.5px;
            padding-inline-start: 32.5px;
  }
  .contents__wrapper:last-child {
    -webkit-margin-before: 122px;
            margin-block-start: 122px;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(1) {
    grid-column: span 2;
    grid-row: 1;
    -webkit-margin-after: 60px;
            margin-block-end: 60px;
    overflow: hidden;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(1) .contents__visual {
    width: 120vw;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(4) {
    grid-column: 2;
    grid-row: 3;
    -webkit-margin-before: 117.5px;
            margin-block-start: 117.5px;
    -webkit-padding-end: 20px;
            padding-inline-end: 20px;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(5) {
    grid-column: span 2;
    grid-row: 4;
    -webkit-margin-before: 65px;
            margin-block-start: 65px;
  }
  .contents__wrapper:last-child .contents__title {
    grid-column: span 2;
    grid-row: 2;
    -webkit-margin-after: 50px;
            margin-block-end: 50px;
    text-align: center;
  }
  .contents__heading .notes, .contents__title .notes {
    -webkit-margin-before: 5px;
            margin-block-start: 5px;
  }
  .contents__heading .en {
    font-size: 32.5px;
  }
  .contents__heading .notes {
    font-size: 13px;
  }
  .contents__title .en {
    font-size: 50px;
  }
  .contents__title .notes {
    font-size: 11px;
  }
  .contents__title02 .notes {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
  .contents__title03 .notes {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
  .contents__credit {
    -webkit-margin-before: 5px;
            margin-block-start: 5px;
    font-size: 11px;
    line-height: 1.8181818182;
    letter-spacing: 0.04em;
    text-align: center;
  }
  .contents__credit a {
    padding-inline: 2.5px;
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .contents__wrapper {
    place-items: center;
    align-items: start;
  }
  .contents__wrapper:first-child {
    grid-template-columns: 61.4035087719% 28.0701754386%;
    -moz-column-gap: 10.5263157895%;
         column-gap: 10.5263157895%;
    row-gap: 108px;
    -webkit-margin-before: 80px;
            margin-block-start: 80px;
  }
  .contents__wrapper:first-child .contents__image:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .contents__wrapper:first-child .contents__image:nth-of-type(3) {
    grid-column: 2;
    grid-row: 1;
    -webkit-padding-before: 236px;
            padding-block-start: 236px;
  }
  .contents__wrapper:first-child .contents__image:nth-of-type(4) {
    grid-column: 1/3;
    grid-row: 2;
    justify-self: end;
    -webkit-padding-start: 47.0175438596%;
            padding-inline-start: 47.0175438596%;
    -webkit-padding-end: 14.3859649123%;
            padding-inline-end: 14.3859649123%;
  }
  .contents__wrapper:first-child .contents__image:nth-of-type(5) {
    grid-column: 1;
    grid-row: 2;
    -webkit-padding-before: 90px;
            padding-block-start: 90px;
    -webkit-padding-start: 23.5714285714%;
            padding-inline-start: 23.5714285714%;
    -webkit-padding-end: 30.7142857143%;
            padding-inline-end: 30.7142857143%;
  }
  .contents__wrapper:first-child .contents__title {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    -webkit-margin-after: 22px;
            margin-block-end: 22px;
  }
  .contents__wrapper:first-child .contents__title span:nth-of-type(2) {
    transform: translateY(40px);
  }
  .contents__wrapper:first-child .contents__title .notes {
    -webkit-padding-start: 70px;
            padding-inline-start: 70px;
  }
  .contents__wrapper:first-child .contents__credit a {
    -webkit-padding-end: 7px;
            padding-inline-end: 7px;
  }
  .contents__wrapper:last-child {
    grid-template-columns: 26.3157894737% 69.298245614%;
    -moz-column-gap: 4.3859649123%;
         column-gap: 4.3859649123%;
    -webkit-margin-before: 240px;
            margin-block-start: 240px;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(3) {
    grid-column: 1;
    grid-row: 1;
    -webkit-margin-before: 440px;
            margin-block-start: 440px;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
    -webkit-margin-before: 125px;
            margin-block-start: 125px;
    -webkit-padding-start: 6.3291139241%;
            padding-inline-start: 6.3291139241%;
    -webkit-padding-end: 56.9620253165%;
            padding-inline-end: 56.9620253165%;
  }
  .contents__wrapper:last-child .contents__image:nth-of-type(5) {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    -webkit-padding-start: 49.3670886076%;
            padding-inline-start: 49.3670886076%;
    -webkit-margin-before: -35px;
            margin-block-start: -35px;
  }
  .contents__wrapper:last-child .contents__title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    -webkit-margin-after: 135px;
            margin-block-end: 135px;
    text-align: center;
  }
  .contents__wrapper:last-child .contents__credit {
    text-align: right;
  }
  .contents__wrapper:last-child .contents__credit a {
    -webkit-padding-start: 10px;
            padding-inline-start: 10px;
  }
  .contents__heading .en {
    font-size: 40px;
  }
  .contents__heading .notes {
    font-size: 17px;
    -webkit-padding-before: 7px;
            padding-block-start: 7px;
  }
  .contents__title .en {
    font-size: 80px;
  }
  .contents__title .notes {
    font-size: 16px;
  }
  .contents__title02 .notes {
    -webkit-margin-before: -6px;
            margin-block-start: -6px;
  }
  .contents__title03 .notes {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
  .contents__credit {
    -webkit-margin-before: 14px;
            margin-block-start: 14px;
    font-size: 14px;
    line-height: 2;
  }
}
/* ===================== foot */
.article__foot .button {
  margin-inline: auto;
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  text-align: center;
  background-color: var(--color-cold);
  color: #fff;
}
.article__foot .button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .article__foot {
    -webkit-margin-before: 72px;
            margin-block-start: 72px;
  }
  .article__foot .button {
    width: 240px;
    height: 40px;
    font-size: 16px;
  }
  .article__foot .button a {
    -webkit-padding-before: 2px;
            padding-block-start: 2px;
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .article__foot {
    -webkit-margin-before: 150px;
            margin-block-start: 150px;
  }
  .article__foot .button {
    width: 460px;
    height: 70px;
    font-size: 28px;
  }
  .article__foot .button a {
    -webkit-padding-before: 14px;
            padding-block-start: 14px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1140px) {
  .hero__lead {
    font-size: 12px;
  }
  .contents__wrapper:first-child .contents__title .notes {
    font-size: 13px;
  }
  .contents__title:not(.contents__title--cold) span:not(.notes) {
    font-size: 70px;
  }
  .contents__credit {
    font-size: 11px;
  }
}
/* ===================== animation */
.js-fadeIn {
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.8s;
}
.js-fadeIn.is-show {
  opacity: 1;
  visibility: visible;
}

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

@keyframes firstviewFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeLtoR {
  0% {
    opacity: 0;
    transform: translateX(-30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeLtoR {
  0% {
    opacity: 0;
    transform: translateX(-30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes fadeRtoL {
  0% {
    opacity: 0;
    transform: translateX(30%);
  }
  100% {
    opacity: 1;
    transform: translateX(-10vw);
  }
}
@keyframes fadeRtoL {
  0% {
    opacity: 0;
    transform: translateX(30%);
  }
  100% {
    opacity: 1;
    transform: translateX(-10vw);
  }
}
/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .js-fadeIn.is-show .fadeAnimation--LtoR {
    -webkit-animation: fadeLtoR 1.5s ease-out forwards;
            animation: fadeLtoR 1.5s ease-out forwards;
  }
  .js-fadeIn.is-show .fadeAnimation--RtoL {
    -webkit-animation: fadeRtoL 1.5s ease-out forwards;
            animation: fadeRtoL 1.5s ease-out forwards;
  }
}
/* --- large viewport --- */