:root {
  /*===================== colors */
  --color-basic: #000;
  /*===================== z-index */
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-header: 9999;
  --zindex-drawer: 99999;
  --zindex-modal: 999999;
  /*===================== utility */
  --hover-opacity: .7;
  --transition-default: .5s ease;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                          for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  :root {
    /*===================== gutter */
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                          for mobile
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (max-width: 768px) {
  :root {
    /*===================== gutter */
  }
}

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

Title : _main.css
For   : "AOURE campaign LP" styles of the site

Created       : 2022-04-18
Last Modified : 2022-04-18

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

Content

    common

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                            common
============================================================================================== */
.header {
  position: fixed;
}

.l-article {
  text-align: center;
  line-height: 1;
}

.l-article img {
  max-width: 100%;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																				for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .l-article {
    -webkit-padding-after: 285px;
            padding-block-end: 285px;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																			for mobile phone
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (max-width: 767px) {
  html {
    font-size: 1.70648vw;
  }
  .header .header-logo,
  .header .navigation {
    -webkit-transition: all var(--transition-default);
    transition: all var(--transition-default);
  }
  .l-article {
    -webkit-padding-after: 28.49829vw;
            padding-block-end: 28.49829vw;
  }
}

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

Title : _module.css
For   : "AOURE LP" styles of the site

Created       : 2022-04-18
Last Modified : 2022-04-18

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

Content

    module

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                            module
============================================================================================== */
.c-visual {
  position: relative;
}

.c-visual--div01 {
  visibility: hidden;
  opacity: 0;
  -webkit-animation: fade_in 1s ease forwards;
          animation: fade_in 1s ease forwards;
}

.c-heading, .c-msg {
  width: 100%;
  position: absolute;
  font-size: var(--heading-fz, 1.8rem);
}

.c-sentence {
  width: 100%;
  position: absolute;
  font-size: var(--sentence-fz, 1.5rem);
}

.c-collection__ttl span {
  display: block;
}

.c-collection__ttl--major {
  font-size: var(--major-fz, 3rem);
}

.c-collection__ttl--minor {
  font-size: var(--minor-fz, 2rem);
}

.c-slider__arrow {
  position: absolute;
  top: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(/Page/lookbook/2022/ss2nd/assets/img/svg/arrow.svg);
  z-index: 1;
}

.c-slider__arrow--prev {
  -webkit-transform: translate(0, -50%) rotate(180deg);
          transform: translate(0, -50%) rotate(180deg);
}

.c-slider__arrow--next {
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.c-btn {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--btn-fz, 1.8rem);
}

.c-btn span {
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid #000;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																				for mobile phone
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (max-width: 767px) {
  .c-visual--div02 {
    -webkit-margin-before: 13.31058vw;
            margin-block-start: 13.31058vw;
  }
  .c-visual--div02 .c-visual__img:nth-child(2) {
    -webkit-margin-before: 17.06485vw;
            margin-block-start: 17.06485vw;
    padding-inline: 7.75vw;
  }
  .c-visual--div03 {
    -webkit-margin-before: 17.06485vw;
            margin-block-start: 17.06485vw;
  }
  .c-visual--div04 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-margin-before: 18.77133vw;
            margin-block-start: 18.77133vw;
  }
  .c-visual--div04 .c-visual__img:nth-child(1) {
    -webkit-margin-before: 17.06485vw;
            margin-block-start: 17.06485vw;
    padding-inline: 7.75vw;
  }
  .c-visual--div05 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-margin-before: 17.06485vw;
            margin-block-start: 17.06485vw;
  }
  .c-visual--div06 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-margin-before: 34.12969vw;
            margin-block-start: 34.12969vw;
  }
  .c-visual--div06 .c-visual__img:nth-child(1) {
    -webkit-margin-before: 12.79863vw;
            margin-block-start: 12.79863vw;
    padding-inline: 7.33788vw;
  }
  .c-visual--div07 {
    -webkit-margin-before: 12.79863vw;
            margin-block-start: 12.79863vw;
  }
  .c-visual--div07 .c-visual__img:nth-child(2) {
    -webkit-margin-before: 17.06485vw;
            margin-block-start: 17.06485vw;
    padding-inline: 7.33788vw;
  }
  .c-heading {
    -webkit-padding-before: 5.11945vw;
            padding-block-start: 5.11945vw;
  }
  .c-msg {
    -webkit-padding-before: 8.02048vw;
            padding-block-start: 8.02048vw;
  }
  .c-sentence {
    -webkit-padding-before: 3.41297vw;
            padding-block-start: 3.41297vw;
  }
  .c-collection {
    -webkit-margin-before: 25.08532vw;
            margin-block-start: 25.08532vw;
    overflow: hidden;
  }
  .c-collection__ttl {
    -webkit-padding-after: 3.92491vw;
            padding-block-end: 3.92491vw;
  }
  .c-collection__ttl--minor {
    -webkit-padding-before: 1.10922vw;
            padding-block-start: 1.10922vw;
  }
  .c-collection__img {
    width: 68.25939vw;
  }
  .c-slider__arrow {
    width: 4.09556vw;
    height: 6.14334vw;
  }
  .c-slider__arrow--prev {
    left: 4.86348vw;
  }
  .c-slider__arrow--next {
    right: 4.86348vw;
  }
  .c-btn {
    -webkit-margin-before: 13.65188vw;
            margin-block-start: 13.65188vw;
  }
  #collection-swiper {
    position: relative;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																			for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .c-visual:not(.c-visual--div02):not(.c-visual--div07) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .c-visual--div01, .c-visual--div05, .c-visual--div06 {
    width: 100%;
  }
  .c-visual--div01 .c-visual__img, .c-visual--div05 .c-visual__img, .c-visual--div06 .c-visual__img {
    width: 50%;
  }
  .c-visual--div03, .c-visual--div04 {
    padding-inline: 16.66667vw;
  }
  .c-visual--div02, .c-visual--div03 {
    -webkit-margin-before: 70px;
            margin-block-start: 70px;
  }
  .c-visual--div04 {
    -webkit-margin-before: 220px;
            margin-block-start: 220px;
  }
  .c-visual--div05 {
    -webkit-margin-before: 160px;
            margin-block-start: 160px;
  }
  .c-visual--div06 {
    -webkit-margin-before: 100px;
            margin-block-start: 100px;
  }
  .c-visual--div06 .c-visual__img {
    width: 50%;
  }
  .c-visual--div06 .c-visual__img:nth-child(1) {
    -webkit-padding-before: 7.33333vw;
            padding-block-start: 7.33333vw;
    -webkit-padding-end: 11vw;
            padding-inline-end: 11vw;
  }
  .c-visual--div07 {
    -webkit-margin-before: 90px;
            margin-block-start: 90px;
  }
  .c-visual--div07 .c-visual__img:nth-child(2) {
    -webkit-margin-before: 150px;
            margin-block-start: 150px;
    padding-inline: 16.66667vw;
  }
  .c-heading {
    --heading-fz: 14px;
    -webkit-padding-before: 30px;
            padding-block-start: 30px;
  }
  .c-sentence {
    --sentence-fz: 12px;
    -webkit-padding-before: 75px;
            padding-block-start: 75px;
  }
  .c-collection {
    -webkit-margin-before: 200px;
            margin-block-start: 200px;
  }
  .c-collection__ttl {
    -webkit-padding-after: 50px;
            padding-block-end: 50px;
  }
  .c-collection__ttl--major {
    --major-fz: 20px;
  }
  .c-collection__ttl--minor {
    --minor-fz: 14px;
    -webkit-padding-before: 6px;
            padding-block-start: 6px;
  }
  .c-collection__imgs {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
  .c-slider__arrow {
    width: 24px;
    height: 36px;
  }
  .c-slider__arrow:hover {
    cursor: pointer;
  }
  .c-slider__arrow--prev {
    left: 35px;
  }
  .c-slider__arrow--next {
    right: 35px;
  }
  .c-btn {
    -webkit-margin-before: 80px;
            margin-block-start: 80px;
    --btn-fz: 12px;
  }
}

@-webkit-keyframes fade_in {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

@keyframes fade_in {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

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

Title : _modal.css
For   : "AOURE LP" styles of the site

Created       : 2022-04-18
Last Modified : 2022-04-18

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

Content

    modal

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                            modal
============================================================================================== */
.c-modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  font-size: var(--modal-fz, 2.4rem);
  z-index: var(--zindex-behind);
  -webkit-transition: all .5s;
  transition: all .5s;
  visibility: hidden;
  opacity: 0;
}

.c-modal.is-visible {
  z-index: var(--zindex-modal);
  visibility: visible;
  opacity: 1;
}

.c-modal__bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--zindex-behind);
}

.c-modal__wrapper {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: var(--zindex-middle);
}

.c-modal__block {
  background: #fff;
}

.c-modal__caption, .c-modal__close {
  line-height: 1;
}

.c-modal__close {
  display: inline-block;
  border-bottom: 1px solid #000;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																			for mobile phone
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (max-width: 767px) {
  .c-modal__wrapper {
    width: 93.17406vw;
    top: 15.35836vw;
  }
  .c-modal__desc {
    -webkit-padding-before: 6.82594vw;
            padding-block-start: 6.82594vw;
    -webkit-padding-after: 13.65188vw;
            padding-block-end: 13.65188vw;
    padding-inline: 6.82594vw;
  }
  .c-modal__caption:not(:first-child) {
    -webkit-margin-before: 2.04778vw;
            margin-block-start: 2.04778vw;
  }
  .c-modal__close {
    -webkit-margin-before: 4.09556vw;
            margin-block-start: 4.09556vw;
  }
  .c-modal .c-slider__arrow {
    top: 58.70307vw;
  }
  .c-modal .c-slider__arrow--prev {
    left: 1.70648vw;
  }
  .c-modal .c-slider__arrow--next {
    right: 1.70648vw;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																				for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .c-modal {
    --modal-fz: 12px;
  }
  .c-modal__wrapper {
    width: 600px;
    top: 0;
    bottom: 0;
  }
  .c-modal__block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .c-modal__img {
    width: 75.5%;
  }
  .c-modal__desc {
    width: 24.5%;
    -webkit-padding-after: 50px;
            padding-block-end: 50px;
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
  .c-modal__caption:not(:first-child) {
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
  }
  .c-modal__close {
    -webkit-margin-before: 24px;
            margin-block-start: 24px;
    -webkit-transition: all .5s;
    transition: all .5s;
  }
  .c-modal__close:hover {
    cursor: pointer;
    opacity: var(--hover-opacity);
  }
}