@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : style.scss
For   : Page/feature/2024/0730/

Created       : 2024-07-23
Last Modified : 2024-07-23

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

Content

////////////////////////////////////////////////// */
/**
 * variables
 */
#LB240730METcollaboration {
  --color-dark: #000;
  --color-white: #fff;
  --color-midnight-blue: #172B47;
  --color-snow-white: #F9F9F9;
  --color-midnight-blue-light: rgba(23, 43, 71, 0.2);
  --font-en: "europa", sans-serif;
  --font-ja: "ヒラギノ角ゴ Pro W3", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", , "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #LB240730METcollaboration {
    --rate: 100vw / 750;
    --spacer-wide: calc(130 * var(--rate));
    --spacer-narrow: calc(80 * var(--rate));
    -webkit-padding-before: var(--spacer-narrow);
            padding-block-start: var(--spacer-narrow);
    -webkit-padding-after: calc(200 * var(--rate));
            padding-block-end: calc(200 * var(--rate));
  }
  #LB240730METcollaboration .hidden-lrg {
    display: block;
  }
  #LB240730METcollaboration .hidden-sml {
    display: none !important;
  }
  .main-area .main-inner {
    width: 100%;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #LB240730METcollaboration {
    --rate: .1rem;
    --spacer-wide: calc(120 * var(--rate));
    --spacer-narrow: calc(60 * var(--rate));
    -webkit-padding-before: calc(70 * var(--rate));
            padding-block-start: calc(70 * var(--rate));
    -webkit-padding-after: calc(150 * var(--rate));
            padding-block-end: calc(150 * var(--rate));
  }
  #LB240730METcollaboration .hidden-sml {
    display: block;
  }
  #LB240730METcollaboration .hidden-lrg {
    display: none !important;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}
/**
 * common
 */
.lpLilyBrown img,
.lpLilyBrown picture {
  display: var(--display, block);
}
.lpLilyBrown img {
  width: 100%;
  height: auto;
}
.lpLilyBrown a {
  display: var(--display, inline-block);
}
.lpLilyBrown * {
  font-feature-settings: "halt";
  font-weight: var(--font-weight, 400);
  color: var(--font-color, var(--color-dark));
  box-sizing: border-box;
}
.lpLilyBrown .en {
  font-family: var(--font-en);
}
.lpLilyBrown .ja {
  font-family: var(--font-ja);
}
.lpLilyBrown .js-accordion {
  overflow: hidden;
  height: var(--acc-height--closed, auto);
  transition: height 0.25s;
}
.lpLilyBrown .js-accordion-arrow {
  transition: all 0.25s;
}
.lpLilyBrown .js-accordion-arrow:hover {
  cursor: pointer;
}
.lpLilyBrown .js-accordion.is-opened {
  height: var(--acc-height--opened, auto);
}
.lpLilyBrown .js-accordion.is-opened + .js-accordion-arrow {
  transform: scale(1, -1);
}

/**
 * first view
 */
.firstview__title {
  margin-inline: auto;
}
.firstview__lead {
  font-family: var(--font-ja);
  line-height: 2;
  text-align: center;
}
.firstview__details {
  margin-inline: auto;
}
.firstview__details-summary {
  --font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1;
}
.firstview__details-summary .ja {
  font-feature-settings: "palt";
}
.firstview__details-summary:hover {
  cursor: pointer;
}
.firstview__details-contents {
  background-color: var(--color-snow-white);
  letter-spacing: 0.05em;
}
.firstview__details-contents dt {
  margin-inline: auto;
}
.firstview__details-arrow {
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .firstview__title {
    width: calc(560 * var(--rate));
  }
  .firstview__lead {
    -webkit-margin-before: calc(88 * var(--rate));
            margin-block-start: calc(88 * var(--rate));
    font-size: calc(24 * var(--rate));
    letter-spacing: 0.06em;
    font-feature-settings: "palt";
  }
  .firstview__details {
    -webkit-margin-before: calc(106 * var(--rate));
            margin-block-start: calc(106 * var(--rate));
    padding-inline: calc(25 * var(--rate));
  }
  .firstview__details-body.is-opened + .firstview__details-arrow {
    -webkit-margin-before: calc(54 * var(--rate));
            margin-block-start: calc(54 * var(--rate));
  }
  .firstview__details-summary {
    -webkit-padding-after: calc(50 * var(--rate));
            padding-block-end: calc(50 * var(--rate));
    font-size: calc(28 * var(--rate));
  }
  .firstview__details-contents {
    -webkit-padding-before: var(--spacer-narrow);
            padding-block-start: var(--spacer-narrow);
    -webkit-padding-after: var(--spacer-narrow);
            padding-block-end: var(--spacer-narrow);
    -webkit-padding-start: calc(65 * var(--rate));
            padding-inline-start: calc(65 * var(--rate));
    -webkit-padding-end: calc(73 * var(--rate));
            padding-inline-end: calc(73 * var(--rate));
    font-size: calc(21 * var(--rate));
    line-height: 1.75;
  }
  .firstview__details-contents dt {
    width: calc(192 * var(--rate));
    transform: translateX(calc(4 * var(--rate)));
  }
  .firstview__details-contents dd {
    -webkit-margin-before: var(--spacer-narrow);
            margin-block-start: var(--spacer-narrow);
  }
  .firstview__details-contents dd p + p {
    -webkit-margin-before: 3.5em;
            margin-block-start: 3.5em;
  }
  .firstview__details-arrow {
    width: calc(56 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .firstview__title {
    width: calc(430 * var(--rate));
  }
  .firstview__lead {
    -webkit-margin-before: calc(74 * var(--rate));
            margin-block-start: calc(74 * var(--rate));
    font-size: calc(14 * var(--rate));
    letter-spacing: 0.01em;
  }
  .firstview__details {
    width: calc(1000 * var(--rate));
    -webkit-margin-before: calc(72 * var(--rate));
            margin-block-start: calc(72 * var(--rate));
  }
  .firstview__details-body {
    -webkit-margin-after: calc(2 * var(--rate));
            margin-block-end: calc(2 * var(--rate));
  }
  .firstview__details-body.is-opened + .firstview__details-arrow {
    -webkit-margin-before: calc(24 * var(--rate));
            margin-block-start: calc(24 * var(--rate));
  }
  .firstview__details-summary {
    -webkit-padding-after: calc(25 * var(--rate));
            padding-block-end: calc(25 * var(--rate));
    font-size: calc(17 * var(--rate));
  }
  .firstview__details-contents {
    -webkit-padding-before: calc(42 * var(--rate));
            padding-block-start: calc(42 * var(--rate));
    -webkit-padding-after: calc(42 * var(--rate));
            padding-block-end: calc(42 * var(--rate));
    -webkit-padding-start: calc(85 * var(--rate));
            padding-inline-start: calc(85 * var(--rate));
    -webkit-padding-end: calc(90 * var(--rate));
            padding-inline-end: calc(90 * var(--rate));
    font-size: calc(13 * var(--rate));
    line-height: 1.75;
  }
  .firstview__details-contents dt {
    width: calc(147 * var(--rate));
    transform: translateX(calc(2.5 * var(--rate)));
  }
  .firstview__details-contents dd {
    -webkit-margin-before: calc(42 * var(--rate));
            margin-block-start: calc(42 * var(--rate));
  }
  .firstview__details-contents dd p + p {
    -webkit-margin-before: 3.5em;
            margin-block-start: 3.5em;
  }
  .firstview__details-arrow {
    width: calc(36 * var(--rate));
  }
}
/**
 * main contents common
 */
.mainContents {
  -webkit-margin-before: var(--gap-contents, var(--spacer-wide));
          margin-block-start: var(--gap-contents, var(--spacer-wide));
}
.mainContents__section + .mainContents__section {
  -webkit-margin-before: var(--gap-section, var(--spacer-wide));
          margin-block-start: var(--gap-section, var(--spacer-wide));
}
.mainContents__shell + .mainContents__shell {
  -webkit-margin-before: var(--gap-shell, var(--spacer-wide));
          margin-block-start: var(--gap-shell, var(--spacer-wide));
}
.mainContents__block {
  display: grid;
}
.mainContents__block--fill {
  background-color: var(--color-midnight-blue);
}
.mainContents__block--fill .mainContents__prices {
  --font-color: var(--color-white);
}
.mainContents__block + .mainContents__block {
  -webkit-margin-before: var(--gap-block, var(--spacer-narrow));
          margin-block-start: var(--gap-block, var(--spacer-narrow));
}
.mainContents__section, .mainContents__shell, .mainContents__block, .mainContents__cell, .mainContents__styling, .mainContents__illust {
  position: relative;
}
.mainContents__styling {
  overflow: hidden;
}
.mainContents__styling a {
  --display: block;
  position: relative;
}
.mainContents__styling a::after {
  background-image: url(../../public/images/vector/copyright.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  content: "";
}
.mainContents__illust::after {
  background-image: url(../../public/images/vector/copyright.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  content: "";
}
.mainContents__prices {
  font-family: var(--font-en);
  text-align: var(--text-align, center);
  letter-spacing: 0.025em;
}
.mainContents__prices > a {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  margin-inline: 0.25em;
  line-height: 1;
}
.mainContents__items {
  position: relative;
}
.mainContents__items-heading {
  position: var(--position, absolute);
  z-index: 10;
}
.mainContents__items-details {
  display: grid;
}

.carouselPager {
  display: flex;
  justify-content: center;
}
.carouselPager__dot {
  width: var(--size-dot);
  height: var(--size-dot);
  padding: 0;
  background-color: #E0E0E0;
}
.carouselPager__dot.is-active {
  background-color: var(--color-midnight-blue);
}
.carouselPager__dot:hover {
  cursor: pointer;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents {
    --gap-contents: calc(128 * var(--rate));
  }
  .mainContents__styling a::after {
    width: calc(266 * var(--rate));
    height: calc(14 * var(--rate));
    bottom: calc(12 * var(--rate));
    right: calc(14 * var(--rate));
  }
  .mainContents__prices {
    -webkit-margin-before: calc(16 * var(--rate));
            margin-block-start: calc(16 * var(--rate));
    font-size: calc(24 * var(--rate));
  }
  .mainContents__prices > a {
    -webkit-margin-before: 0.8em;
            margin-block-start: 0.8em;
  }
  .mainContents__items-details {
    grid-template-columns: repeat(auto-fill, minmax(auto, calc(300 * var(--rate))));
  }
  .mainContents__illust::after {
    width: calc(266 * var(--rate));
    height: calc(14 * var(--rate));
    bottom: calc(12 * var(--rate));
    right: calc(14 * var(--rate));
  }
  .carouselPager {
    -webkit-margin-before: calc(19 * var(--rate));
            margin-block-start: calc(19 * var(--rate));
    gap: calc(12 * var(--rate));
  }
  .carouselPager__dot {
    --size-dot: calc(18 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__block {
    justify-content: var(--justify-content, center);
    margin-inline: auto;
  }
  .mainContents__block--fill {
    -webkit-padding-before: calc(50 * var(--rate));
            padding-block-start: calc(50 * var(--rate));
    -webkit-padding-after: calc(52 * var(--rate));
            padding-block-end: calc(52 * var(--rate));
  }
  .mainContents__styling a::after {
    width: calc(176 * var(--rate));
    height: calc(8 * var(--rate));
    bottom: calc(8 * var(--rate));
    right: calc(8 * var(--rate));
  }
  .mainContents__prices {
    -webkit-margin-before: calc(6 * var(--rate));
            margin-block-start: calc(6 * var(--rate));
    font-size: calc(13 * var(--rate));
  }
  .mainContents__items-details {
    grid-template-columns: repeat(var(--col-length), calc(220 * var(--rate)));
  }
  .mainContents__illust::after {
    width: calc(176 * var(--rate));
    height: calc(8 * var(--rate));
    bottom: calc(8 * var(--rate));
    right: calc(8 * var(--rate));
  }
  .carouselPager {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
    gap: calc(8 * var(--rate));
  }
  .carouselPager__dot {
    --size-dot: calc(10 * var(--rate));
  }
}
/**
 * main contents: t-shirt
 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents__section--tShirt .mainContents__shell:nth-child(1) .mainContents__block {
    row-gap: var(--spacer-narrow);
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(1) {
    padding-inline: calc(25 * var(--rate));
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(2) .mainContents__styling {
    padding-inline: calc(95 * var(--rate));
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) {
    --gap-shell: calc(125 * var(--rate));
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(1) {
    row-gap: calc(12 * var(--rate));
    -webkit-padding-before: calc(60 * var(--rate));
            padding-block-start: calc(60 * var(--rate));
    -webkit-padding-after: calc(72 * var(--rate));
            padding-block-end: calc(72 * var(--rate));
    padding-inline: calc(60 * var(--rate));
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(2) .mainContents__prices {
    -webkit-margin-before: calc(22 * var(--rate));
            margin-block-start: calc(22 * var(--rate));
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(2) .mainContents__items-heading {
    width: calc(222 * var(--rate));
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(2) .mainContents__items-details {
    row-gap: calc(57 * var(--rate));
    -moz-column-gap: calc(100 * var(--rate));
         column-gap: calc(100 * var(--rate));
    justify-content: center;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__section--tShirt .mainContents__shell:nth-child(1) .mainContents__block {
    max-width: calc(1000 * var(--rate));
    grid-template-columns: calc(500 * var(--rate)) calc(400 * var(--rate));
    -moz-column-gap: calc(100 * var(--rate));
         column-gap: calc(100 * var(--rate));
    align-items: center;
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(2) {
    -webkit-padding-before: calc(20 * var(--rate));
            padding-block-start: calc(20 * var(--rate));
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(2) .mainContents__prices {
    position: absolute;
    left: 0;
    right: 0;
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(1) {
    --text-align: left;
    grid-template-columns: calc(380 * var(--rate)) calc(910 * var(--rate));
    -moz-column-gap: calc(10 * var(--rate));
         column-gap: calc(10 * var(--rate));
    justify-content: center;
    padding-inline: calc(50 * var(--rate));
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(2) {
    display: grid;
    grid-template-columns: calc(380 * var(--rate)) 1fr;
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(1) .mainContents__prices {
    -webkit-margin-start: calc(16 * var(--rate));
            margin-inline-start: calc(16 * var(--rate));
    align-self: end;
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(2) .mainContents__items {
    width: calc(1080 * var(--rate));
    margin-inline: auto;
    -webkit-padding-before: calc(50 * var(--rate));
            padding-block-start: calc(50 * var(--rate));
    padding-inline: calc(55 * var(--rate));
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(2) .mainContents__items-heading {
    width: calc(177 * var(--rate));
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    top: calc(8 * var(--rate));
    left: 0;
  }
  .mainContents__section--tShirt .mainContents__shell:nth-child(2) .mainContents__block:nth-child(2) .mainContents__items-details {
    --col-length: 4;
    -moz-column-gap: calc(30 * var(--rate));
         column-gap: calc(30 * var(--rate));
    justify-content: center;
  }
}
/**
 * main contents: tops
 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__block {
    row-gap: calc(var(--spacer-narrow) - 2 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(1) {
    -webkit-padding-start: calc(225 * var(--rate));
            padding-inline-start: calc(225 * var(--rate));
    -webkit-padding-end: calc(25 * var(--rate));
            padding-inline-end: calc(25 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(2) .mainContents__prices {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) {
    transform: translateY(calc(-4 * var(--rate)));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(auto, calc(300 * var(--rate))));
    grid-template-rows: repeat(2, calc(400 * var(--rate)));
    -moz-column-gap: calc(60 * var(--rate));
         column-gap: calc(60 * var(--rate));
    justify-content: center;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items-heading {
    --position: relative;
    grid-column: 2;
    grid-row: 1;
    width: calc(152 * var(--rate));
    align-self: center;
    justify-self: center;
    transform: translateY(calc(6 * var(--rate)));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items-details {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
    -moz-column-gap: calc(60 * var(--rate));
         column-gap: calc(60 * var(--rate));
    justify-content: center;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items-thumb:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items-thumb:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items-thumb:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(2) {
    --gap-shell: calc(175 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(2) .mainContents__block {
    row-gap: var(--spacer-narrow);
  }
  .mainContents__section--tops .mainContents__shell:nth-child(2) .mainContents__cell:nth-child(1) {
    padding-inline: calc(190 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(2) .mainContents__cell:nth-child(2) {
    padding-inline: calc(95 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__block {
    max-width: calc(1400 * var(--rate));
    grid-template-columns: calc(540 * var(--rate)) calc(50 * var(--rate)) calc(260 * var(--rate)) calc(350 * var(--rate)) calc(138 * var(--rate)) 1fr;
    row-gap: calc(98 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(1) {
    grid-column: 4;
    grid-row: 1;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(2) {
    grid-column: 1;
    grid-row: 1/span 2;
    align-self: end;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) {
    grid-column: 3/span 3;
    grid-row: 2;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items {
    -webkit-padding-before: calc(62 * var(--rate));
            padding-block-start: calc(62 * var(--rate));
    -webkit-padding-after: calc(28 * var(--rate));
            padding-block-end: calc(28 * var(--rate));
    -webkit-padding-end: calc(28 * var(--rate));
            padding-inline-end: calc(28 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items-heading {
    width: calc(122 * var(--rate));
    top: calc(8 * var(--rate));
    right: 0;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(1) .mainContents__cell:nth-child(3) .mainContents__items-details {
    --col-length: 3;
    -moz-column-gap: calc(30 * var(--rate));
         column-gap: calc(30 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(2) .mainContents__block {
    grid-template-columns: calc(380 * var(--rate)) calc(300 * var(--rate));
    -moz-column-gap: calc(150 * var(--rate));
         column-gap: calc(150 * var(--rate));
  }
  .mainContents__section--tops .mainContents__shell:nth-child(2) .mainContents__cell:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }
  .mainContents__section--tops .mainContents__shell:nth-child(2) .mainContents__cell:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
}
/**
 * main contents: knit tops / bag
 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents__section--knitTops {
    --gap-section: calc(180 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) {
    row-gap: calc(75 * var(--rate));
    -webkit-padding-before: calc(75 * var(--rate));
            padding-block-start: calc(75 * var(--rate));
    -webkit-padding-after: calc(74 * var(--rate));
            padding-block-end: calc(74 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(1) {
    padding-inline: calc(75 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(2) .mainContents__prices {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items {
    -webkit-padding-before: calc(66 * var(--rate));
            padding-block-start: calc(66 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-heading {
    width: calc(288 * var(--rate));
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    top: calc(12 * var(--rate));
    left: 0;
    right: 0;
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-details {
    -moz-column-gap: calc(60 * var(--rate));
         column-gap: calc(60 * var(--rate));
    justify-content: center;
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-thumb:nth-child(3) {
    grid-column: 1/span 2;
    justify-self: center;
    width: calc(300 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(2) {
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(2) .mainContents__items {
    -webkit-padding-before: calc(68 * var(--rate));
            padding-block-start: calc(68 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(2) .mainContents__items-heading {
    width: calc(122 * var(--rate));
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    top: calc(15 * var(--rate));
    left: 0;
    right: 0;
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(2) .mainContents__items-details {
    -moz-column-gap: calc(60 * var(--rate));
         column-gap: calc(60 * var(--rate));
    justify-content: center;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) {
    grid-template-columns: calc(540 * var(--rate)) calc(500 * var(--rate));
    -moz-column-gap: calc(150 * var(--rate));
         column-gap: calc(150 * var(--rate));
    padding-inline: calc(105 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    -webkit-padding-after: calc(28 * var(--rate));
            padding-block-end: calc(28 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) {
    grid-template-columns: repeat(2, auto);
    -moz-column-gap: calc(2 * var(--rate));
         column-gap: calc(2 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items {
    -webkit-padding-before: calc(52 * var(--rate));
            padding-block-start: calc(52 * var(--rate));
    -webkit-padding-start: calc(30 * var(--rate));
            padding-inline-start: calc(30 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-heading {
    width: calc(228 * var(--rate));
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    top: calc(10 * var(--rate));
    left: calc(2 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-details {
    --col-length: 3;
    -moz-column-gap: calc(30 * var(--rate));
         column-gap: calc(30 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(2) {
    -webkit-padding-before: calc(151 * var(--rate));
            padding-block-start: calc(151 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(2) .mainContents__items {
    -webkit-padding-start: calc(100 * var(--rate));
            padding-inline-start: calc(100 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(2) .mainContents__items-heading {
    width: calc(95 * var(--rate));
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    bottom: calc(26 * var(--rate));
    left: calc(3 * var(--rate));
  }
  .mainContents__section--knitTops .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(2) .mainContents__items-details {
    --col-length: 2;
    -moz-column-gap: calc(30 * var(--rate));
         column-gap: calc(30 * var(--rate));
  }
}
/**
 * main contents: cardigan
 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents__section--cardigan {
    --gap-section: calc(180 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) {
    row-gap: calc(180 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(1) {
    padding-inline: calc(190 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(1) .mainContents__title {
    -webkit-margin-before: var(--spacer-narrow);
            margin-block-start: var(--spacer-narrow);
    padding-inline: calc(15 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) {
    --gap-block: calc(76 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(auto, calc(300 * var(--rate))));
    grid-template-rows: repeat(2, calc(400 * var(--rate)));
    -moz-column-gap: calc(60 * var(--rate));
         column-gap: calc(60 * var(--rate));
    justify-content: center;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-heading {
    --position: relative;
    grid-column: 2;
    grid-row: 1;
    width: calc(292 * var(--rate));
    align-self: center;
    justify-self: center;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-details {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
    -moz-column-gap: calc(60 * var(--rate));
         column-gap: calc(60 * var(--rate));
    justify-content: center;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-thumb:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-thumb:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-thumb:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(2) .mainContents__block {
    row-gap: calc(12 * var(--rate));
    padding-inline: calc(25 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(2) .mainContents__prices {
    -webkit-margin-before: calc(8 * var(--rate));
            margin-block-start: calc(8 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) {
    grid-template-columns: calc(520 * var(--rate)) calc(490 * var(--rate));
    -moz-column-gap: calc(90 * var(--rate));
         column-gap: calc(90 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
    -webkit-padding-before: calc(30 * var(--rate));
            padding-block-start: calc(30 * var(--rate));
    padding-inline: calc(100 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(1) .mainContents__title {
    -webkit-margin-before: calc(57 * var(--rate));
            margin-block-start: calc(57 * var(--rate));
    padding-inline: calc(22 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(1) .mainContents__cell:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) {
    --gap-block: calc(58 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items {
    -webkit-padding-start: calc(294 * var(--rate));
            padding-inline-start: calc(294 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-details {
    --col-length: 3;
    -moz-column-gap: calc(30 * var(--rate));
         column-gap: calc(30 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(1) .mainContents__block:nth-child(2) .mainContents__cell:nth-child(1) .mainContents__items-heading {
    width: calc(230 * var(--rate));
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    top: 0;
    bottom: 0;
    left: calc(2 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(2) {
    --gap-shell: calc(118 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(2) .mainContents__block {
    grid-template-columns: repeat(2, calc(480 * var(--rate)));
    -moz-column-gap: calc(10 * var(--rate));
         column-gap: calc(10 * var(--rate));
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(2) .mainContents__cell:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(2) .mainContents__cell:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .mainContents__section--cardigan .mainContents__shell:nth-child(2) .mainContents__cell:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 2;
  }
}
/**
 * main contents: all line up
 */
.mainContents__section--allLineUp {
  background-color: var(--color-midnight-blue-light);
}
.mainContents__section--allLineUp .mainContents__heading {
  margin-inline: auto;
}
.mainContents__section--allLineUp .mainContents__gridPanels {
  display: grid;
  margin-inline: auto;
}
.mainContents__section--allLineUp .mainContents__gridPanel {
  background-color: var(--color-white);
  text-indent: -9999px;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 0.3s;
  transition: background-image 0.075s;
}
.mainContents__section--allLineUp .mainContents__gridPanel:nth-child(1) {
  background-image: url(../images/panels/panels-t_shirt-01-01.jpg);
}
.mainContents__section--allLineUp .mainContents__gridPanel:nth-child(2) {
  background-image: url(../images/panels/panels-knit_tops-01.jpg);
}
.mainContents__section--allLineUp .mainContents__gridPanel:nth-child(3) {
  background-image: url(../images/panels/panels-cardigan-01.jpg);
}
.mainContents__section--allLineUp .mainContents__gridPanel:nth-child(4) {
  background-image: url(../images/panels/panels-t_shirt-02-01.jpg);
}
.mainContents__section--allLineUp .mainContents__gridPanel:nth-child(5) {
  background-image: url(../images/panels/panels-tops-01.jpg);
}
.mainContents__section--allLineUp .mainContents__gridPanel:nth-child(6) {
  background-image: url(../images/panels/panels-bag-01.jpg);
}
.mainContents__section--allLineUp .mainContents__gridPanel > a {
  --display: block;
  width: 100%;
  height: 100%;
}
.mainContents__section--allLineUp .mainContents__gridPanel:hover {
  opacity: 0.7;
}
.mainContents__section--allLineUp .mainContents__button {
  --display: block;
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents__section--allLineUp {
    --gap-section: calc(125 * var(--rate));
    -webkit-padding-before: calc(88 * var(--rate));
            padding-block-start: calc(88 * var(--rate));
    -webkit-padding-after: var(--spacer-wide);
            padding-block-end: var(--spacer-wide);
  }
  .mainContents__section--allLineUp .mainContents__heading {
    width: calc(324 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__shell:nth-child(2) {
    -webkit-margin-before: calc(82 * var(--rate));
            margin-block-start: calc(82 * var(--rate));
    padding-inline: calc(12 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__shell:nth-child(3) {
    padding-inline: calc(25 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__gridPanels {
    grid-template-columns: repeat(2, calc(357 * var(--rate)));
    grid-template-rows: repeat(3, calc(357 * var(--rate)));
    gap: calc(12 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__button {
    width: 100%;
  }
  .mainContents__section--allLineUp .mainContents__button + * {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__section--allLineUp {
    -webkit-padding-before: calc(56 * var(--rate));
            padding-block-start: calc(56 * var(--rate));
    -webkit-padding-after: var(--spacer-wide);
            padding-block-end: var(--spacer-wide);
  }
  .mainContents__section--allLineUp .mainContents__heading {
    width: calc(230 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__shell:nth-child(2) {
    -webkit-margin-before: calc(50 * var(--rate));
            margin-block-start: calc(50 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__shell:nth-child(2) .mainContents__block {
    width: calc(920 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__gridPanels {
    grid-template-columns: repeat(3, calc(300 * var(--rate)));
    grid-template-rows: repeat(2, calc(300 * var(--rate)));
    gap: calc(10 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__gridPanel:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .mainContents__section--allLineUp .mainContents__gridPanel:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .mainContents__section--allLineUp .mainContents__gridPanel:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  .mainContents__section--allLineUp .mainContents__gridPanel:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
  }
  .mainContents__section--allLineUp .mainContents__gridPanel:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }
  .mainContents__section--allLineUp .mainContents__gridPanel:nth-child(6) {
    grid-column: 3;
    grid-row: 2;
  }
  .mainContents__section--allLineUp .mainContents__button {
    width: calc(420 * var(--rate));
  }
  .mainContents__section--allLineUp .mainContents__button + * {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
  }
}
/**
 * animation
 */
.js-fadeIn {
  transform: translate3d(0, 0, 0) scale(1.1);
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), scale 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-fadeIn.is-show {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .js-fadeIn-for-sml {
    transform: translate3d(0, 0, 0) scale(1.1);
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), scale 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .js-fadeIn-for-sml.is-show {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
.anim-fadeIn {
  transform: translate3d(0, 0, 0) scale(1.1);
  opacity: 0;
  -webkit-animation: fadeIn 2s forwards;
          animation: fadeIn 2s forwards;
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .anim-fadeIn-for-lrg {
    transform: translate3d(0, 0, 0) scale(1.1);
    opacity: 0;
    -webkit-animation: fadeIn 2s forwards;
            animation: fadeIn 2s forwards;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    transform: translate3d(0, 0, 0) scale(1.1);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    transform: translate3d(0, 0, 0) scale(1.1);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
/*# sourceMappingURL=style.css.map */