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

Title : style.scss
For   : Page/style/241206/

Created       : 2024-11-28
Last Modified : 2024-11-28

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

Content

////////////////////////////////////////////////// */
/**
 * variables, layouts
 */
#CE241206holiday {
  --color-dark: #000;
  --color-gray: #8E8E8E;
  --font-ja-primary: "shippori-mincho", sans-serif;
  --font-ja-secondary: noto-sans-cjk-jp, sans-serif;
  --font-en-credit: "bodoni-moda-variable", sans-serif;
  --font-en-prices: "noto-serif", serif;
}

#CE241206holiday {
  width: 100%;
  margin-inline: auto;
}

.main-area .main-inner {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
}

#breadcrumb {
  max-width: 1200px;
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #CE241206holiday {
    --rate: 100vw / 750;
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
  #CE241206holiday .hidden-sml {
    display: none !important;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #CE241206holiday {
    --rate: .1rem;
    -webkit-padding-before: calc(50 * var(--rate));
            padding-block-start: calc(50 * var(--rate));
  }
  #CE241206holiday .hidden-lrg {
    display: none !important;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}
/**
 * common
 */
.lpCelford img,
.lpCelford picture {
  display: var(--display, block);
}
.lpCelford img,
.lpCelford video,
.lpCelford svg {
  width: 100%;
  height: auto;
}
.lpCelford iframe {
  width: 100%;
  height: 100%;
}
.lpCelford a {
  display: var(--display, inline-block);
}
.lpCelford a:has(img) {
  --display: block;
}
.lpCelford * {
  font-family: var(--font-family, var(--font-ja-primary));
  font-weight: var(--font-weight, 400);
  text-align: initial;
  box-sizing: border-box;
}
.lpCelford .en {
  --font-family: var(--font-en);
}
.lpCelford .ja {
  --font-family: var(--font-ja);
}

/**
 * first view
 */
.firstView {
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
}
.firstView__mainImage {
  position: relative;
}
.firstView__mainImage--visual {
  opacity: 0;
}
.firstView__mainImage--text {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.firstView__title {
  margin-inline: auto;
}
.firstView__title--primary {
  margin-inline: auto;
}
.firstView__title > * {
  --font-weight: 500;
  display: block;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
.firstView__lead {
  text-align: center;
  letter-spacing: 0.03em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .firstView__mainImage--text {
    width: calc(562 * var(--rate));
    bottom: calc(95 * var(--rate));
    right: calc(31 * var(--rate));
  }
  .firstView__title {
    -webkit-margin-before: calc(50 * var(--rate));
            margin-block-start: calc(50 * var(--rate));
  }
  .firstView__title--primary {
    width: calc(312 * var(--rate));
  }
  .firstView__title--secondary {
    -webkit-margin-before: calc(32 * var(--rate));
            margin-block-start: calc(32 * var(--rate));
    font-size: calc(35 * var(--rate));
  }
  .firstView__lead {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
    font-size: calc(24 * var(--rate));
    line-height: 2.0833333333;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .firstView__mainImage--text {
    width: calc(511 * var(--rate));
    top: calc(210 * var(--rate));
    right: calc(49 * var(--rate));
  }
  .firstView__title {
    -webkit-margin-before: calc(80 * var(--rate));
            margin-block-start: calc(80 * var(--rate));
  }
  .firstView__title--primary {
    width: calc(367 * var(--rate));
  }
  .firstView__title--secondary {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
    font-size: calc(40 * var(--rate));
  }
  .firstView__lead {
    -webkit-margin-before: calc(53 * var(--rate));
            margin-block-start: calc(53 * var(--rate));
    font-size: calc(26 * var(--rate));
    line-height: 1.9230769231;
  }
}
/**
 * scroll button
 */
.lpCelford__scroll-button {
  position: -webkit-sticky;
  position: sticky;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lpCelford__scroll-button {
    width: calc(64 * var(--rate));
    left: calc(50% + 280 * var(--rate));
    bottom: calc(100 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lpCelford__scroll-button {
    width: calc(65 * var(--rate));
    left: calc(50% + 555 * var(--rate));
    bottom: calc(100 * var(--rate));
  }
}
/**
 * main contents: index
 */
.mainContents__index {
  position: relative;
}
.mainContents__index > img {
  position: absolute;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents__index--color-01 {
    height: calc(248 * var(--rate));
  }
  .mainContents__index--color-01 .number {
    top: 0;
    left: 0;
    right: 0;
    width: calc(107 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-01 .copy {
    top: calc(40 * var(--rate));
    left: calc(63 * var(--rate));
    width: calc(49 * var(--rate));
  }
  .mainContents__index--color-01 .line {
    top: calc(107 * var(--rate));
    left: 0;
    right: 0;
    width: calc(1.4 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-01 .text {
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(211 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-02 {
    height: calc(261 * var(--rate));
  }
  .mainContents__index--color-02 .number {
    top: 0;
    left: 0;
    right: 0;
    width: calc(132 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-02 .copy {
    top: calc(39 * var(--rate));
    left: calc(50 * var(--rate));
    width: calc(49 * var(--rate));
  }
  .mainContents__index--color-02 .line {
    top: calc(107 * var(--rate));
    left: 0;
    right: 0;
    width: calc(1.4 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-02 .text {
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(212 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-03 {
    height: calc(259 * var(--rate));
  }
  .mainContents__index--color-03 .number {
    top: 0;
    left: 0;
    right: 0;
    width: calc(124 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-03 .copy {
    top: calc(39 * var(--rate));
    left: calc(67 * var(--rate));
    width: calc(49 * var(--rate));
  }
  .mainContents__index--color-03 .line {
    top: calc(107 * var(--rate));
    left: 0;
    right: 0;
    width: calc(1.4 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-03 .text {
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(237 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-04 {
    height: calc(240 * var(--rate));
  }
  .mainContents__index--color-04 .number {
    top: 0;
    left: 0;
    right: 0;
    width: calc(135 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-04 .copy {
    top: calc(35 * var(--rate));
    left: calc(56 * var(--rate));
    width: calc(49 * var(--rate));
  }
  .mainContents__index--color-04 .line {
    top: calc(107 * var(--rate));
    left: 0;
    right: 0;
    width: calc(1.4 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-04 .text {
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(227 * var(--rate));
    margin: auto;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__index--color-01 {
    height: calc(354 * var(--rate));
  }
  .mainContents__index--color-01 .number {
    top: 0;
    left: 0;
    right: 0;
    width: calc(152 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-01 .copy {
    top: calc(56 * var(--rate));
    left: calc(90 * var(--rate));
    width: calc(70 * var(--rate));
  }
  .mainContents__index--color-01 .line {
    top: calc(153 * var(--rate));
    left: 0;
    right: 0;
    width: calc(2 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-01 .text {
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(301 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-02 {
    height: calc(372 * var(--rate));
  }
  .mainContents__index--color-02 .number {
    top: 0;
    left: 0;
    right: 0;
    width: calc(188 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-02 .copy {
    top: calc(56 * var(--rate));
    left: calc(72 * var(--rate));
    width: calc(70 * var(--rate));
  }
  .mainContents__index--color-02 .line {
    top: calc(153 * var(--rate));
    left: 0;
    right: 0;
    width: calc(2 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-02 .text {
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(302 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-03 {
    height: calc(370 * var(--rate));
  }
  .mainContents__index--color-03 .number {
    top: 0;
    left: 0;
    right: 0;
    width: calc(177 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-03 .copy {
    top: calc(55 * var(--rate));
    left: calc(96 * var(--rate));
    width: calc(70 * var(--rate));
  }
  .mainContents__index--color-03 .line {
    top: calc(179 * var(--rate));
    left: 0;
    right: 0;
    width: calc(2 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-03 .text {
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(338 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-04 {
    height: calc(342 * var(--rate));
  }
  .mainContents__index--color-04 .number {
    top: 0;
    left: 0;
    right: 0;
    width: calc(192 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-04 .copy {
    top: calc(51 * var(--rate));
    left: calc(81 * var(--rate));
    width: calc(70 * var(--rate));
  }
  .mainContents__index--color-04 .line {
    top: calc(153 * var(--rate));
    left: 0;
    right: 0;
    width: calc(2 * var(--rate));
    margin: auto;
  }
  .mainContents__index--color-04 .text {
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(325 * var(--rate));
    margin: auto;
  }
}
/**
 * main contents
 */
.mainContents__section--designer-intro .designer-intro__heading {
  --font-weight: 600;
}
.mainContents__section--designer-intro .designer-intro__heading, .mainContents__section--designer-intro .designer-intro__lead {
  text-align: center;
}
.mainContents__section--designer-intro .designer-intro__lead {
  font-size: calc(18 * var(--rate));
  line-height: 2;
  letter-spacing: 0.025em;
}
.mainContents__section--designer-intro .designer-intro__thumbnail {
  margin-inline: auto;
}
.mainContents__section--designer-intro .designer-intro__notes {
  --font-family: var(--font-ja-secondary);
  line-height: calc(28 * var(--rate));
}
.mainContents__section--designer-intro .designer-intro__notes dt {
  font-size: calc(24 * var(--rate));
}
.mainContents__section--designer-intro .designer-intro__notes dd {
  font-size: calc(14 * var(--rate));
}
.mainContents__section--designer-intro .designer-intro__name {
  position: absolute;
}
.mainContents__section--model-intro .model-intro__details {
  background-color: #464646;
  color: #fff;
}
.mainContents__section--model-intro .model-intro__heading span {
  display: block;
}
.mainContents__section--model-intro .model-intro__heading--secondary {
  --font-weight: 500;
  font-size: calc(25 * var(--rate));
  line-height: 1;
}
.mainContents__section--model-intro .model-intro__lead {
  border-bottom: 1px solid #fff;
  font-size: calc(18 * var(--rate));
  line-height: 2;
  letter-spacing: 0.03em;
}
.mainContents__section--model-intro .model-intro__notes {
  --font-family: var(--font-ja-secondary);
  font-size: calc(14 * var(--rate));
  line-height: 2;
}
.mainContents__section--model-intro .model-intro__thumbnail {
  position: absolute;
}
.mainContents__section--footer {
  --font-family: var(--font-en-credit);
}
.mainContents__section--footer .footer__iframe {
  margin-inline: auto;
  aspect-ratio: 1250/703;
}
.mainContents__section--footer .footer__credit > * {
  text-align: center;
  font-style: italic;
}
.mainContents__shell {
  margin-inline: auto;
}
.mainContents__block {
  display: grid;
  width: 100%;
  margin-inline: auto;
}
.mainContents__section, .mainContents__shell, .mainContents__block, .mainContents__cell, .mainContents__styling {
  position: relative;
}
.mainContents__prices > * {
  --display: block;
  --font-family: var(--font-en-prices);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: 1px solid var(--color-gray);
  font-size: calc(18 * var(--rate));
  color: var(--color-gray);
  line-height: 1;
  letter-spacing: 0.025em;
}
.mainContents__details {
  position: relative;
  margin-inline: auto;
}
.mainContents__details-decoraiton {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.mainContents__heading {
  --font-weight: 600;
  line-height: 1;
}
.mainContents__heading, .mainContents__lead {
  position: relative;
  z-index: 1;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents {
    -webkit-margin-before: calc(90 * var(--rate));
            margin-block-start: calc(90 * var(--rate));
  }
  .mainContents__section + * {
    -webkit-margin-before: var(--section-spacer, calc(110 * var(--rate)));
            margin-block-start: var(--section-spacer, calc(110 * var(--rate)));
  }
  .mainContents__section--color-02 {
    --section-spacer: calc(92 * var(--rate));
  }
  .mainContents__section--color-03 {
    --section-spacer: calc(98 * var(--rate));
  }
  .mainContents__section--color-04 {
    --section-spacer: calc(90 * var(--rate));
  }
  .mainContents__section--designer-intro {
    --section-spacer: calc(92 * var(--rate));
    -webkit-padding-before: calc(160 * var(--rate));
            padding-block-start: calc(160 * var(--rate));
    -webkit-padding-after: calc(76 * var(--rate));
            padding-block-end: calc(76 * var(--rate));
  }
  .mainContents__section--designer-intro .mainContents__shell {
    position: static;
  }
  .mainContents__section--designer-intro .designer-intro__heading {
    font-size: calc(28 * var(--rate));
    line-height: 1.7857142857;
  }
  .mainContents__section--designer-intro .designer-intro__lead {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
  }
  .mainContents__section--designer-intro .designer-intro__thumbnail {
    width: calc(300 * var(--rate));
    -webkit-margin-before: calc(24 * var(--rate));
            margin-block-start: calc(24 * var(--rate));
  }
  .mainContents__section--designer-intro .designer-intro__notes {
    -webkit-margin-before: calc(33 * var(--rate));
            margin-block-start: calc(33 * var(--rate));
    padding-inline: calc(175 * var(--rate));
  }
  .mainContents__section--designer-intro .designer-intro__notes dd {
    -webkit-margin-before: 0.3em;
            margin-block-start: 0.3em;
  }
  .mainContents__section--designer-intro .designer-intro__name {
    top: 0;
    left: 0;
    right: 0;
    width: calc(616 * var(--rate));
    margin: auto;
  }
  .mainContents__section--video {
    --section-spacer: calc(50 * var(--rate));
  }
  .mainContents__section--model-intro {
    --section-spacer: calc(50 * var(--rate));
    -webkit-padding-before: calc(200 * var(--rate));
            padding-block-start: calc(200 * var(--rate));
  }
  .mainContents__section--model-intro .mainContents__shell {
    position: static;
  }
  .mainContents__section--model-intro .model-intro__details {
    -webkit-padding-before: calc(285 * var(--rate));
            padding-block-start: calc(285 * var(--rate));
    -webkit-padding-after: calc(76 * var(--rate));
            padding-block-end: calc(76 * var(--rate));
  }
  .mainContents__section--model-intro .model-intro__heading--primary {
    width: calc(273 * var(--rate));
    margin-inline: auto;
  }
  .mainContents__section--model-intro .model-intro__heading--secondary {
    -webkit-margin-before: calc(-10 * var(--rate));
            margin-block-start: calc(-10 * var(--rate));
    text-align: center;
  }
  .mainContents__section--model-intro .model-intro__lead {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    -webkit-padding-before: calc(50 * var(--rate));
            padding-block-start: calc(50 * var(--rate));
    -webkit-padding-after: calc(34 * var(--rate));
            padding-block-end: calc(34 * var(--rate));
    padding-inline: calc(5 * var(--rate));
    text-align: center;
  }
  .mainContents__section--model-intro .model-intro__notes {
    -webkit-padding-before: calc(35 * var(--rate));
            padding-block-start: calc(35 * var(--rate));
    text-align: center;
  }
  .mainContents__section--model-intro .model-intro__thumbnail {
    width: calc(417 * var(--rate));
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
  }
  .mainContents__section--footer {
    --section-spacer: calc(50 * var(--rate));
  }
  .mainContents__section--footer .footer__iframe {
    width: calc(600 * var(--rate));
  }
  .mainContents__section--footer .footer__credit {
    -webkit-margin-before: calc(42 * var(--rate));
            margin-block-start: calc(42 * var(--rate));
    font-size: calc(16 * var(--rate));
    line-height: 2.1875;
  }
  .mainContents__shell + * {
    -webkit-margin-before: calc(92 * var(--rate));
            margin-block-start: calc(92 * var(--rate));
  }
  .mainContents__block--color-01-01 {
    grid-template-columns: calc(112.5 * var(--rate)) calc(317.5 * var(--rate)) calc(20 * var(--rate)) calc(187.5 * var(--rate)) calc(112.5 * var(--rate));
    grid-template-rows: calc(402 * var(--rate)) calc(243 * var(--rate)) calc(207 * var(--rate)) calc(20 * var(--rate)) auto;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(1) {
    grid-column: 4/span 2;
    grid-row: 1;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(3) {
    grid-column: 4/span 2;
    grid-row: 2/span 2;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(4) {
    grid-column: 2/span 3;
    grid-row: 5;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(6) {
    grid-column: 5;
    grid-row: 5;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-start: calc(8 * var(--rate));
            padding-inline-start: calc(8 * var(--rate));
    -webkit-padding-before: calc(16 * var(--rate));
            padding-block-start: calc(16 * var(--rate));
  }
  .mainContents__block--color-01-01 .mainContents__prices > * {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .mainContents__block--color-01-01 .mainContents__color-name {
    width: calc(30 * var(--rate));
  }
  .mainContents__block--color-01-01 .mainContents__index {
    width: calc(211 * var(--rate));
    -webkit-margin-before: calc(104 * var(--rate));
            margin-block-start: calc(104 * var(--rate));
    margin-inline: auto;
  }
  .mainContents__block--color-01-02 {
    grid-template-columns: calc(112.5 * var(--rate)) calc(187.5 * var(--rate)) calc(20 * var(--rate)) calc(317.5 * var(--rate)) calc(112.5 * var(--rate));
    grid-template-rows: calc(206 * var(--rate)) auto auto calc(20 * var(--rate)) auto;
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(2) {
    grid-column: 4/span 2;
    grid-row: 2/span 2;
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(3) {
    grid-column: 2/span 3;
    grid-row: 5;
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
    -webkit-padding-after: calc(2 * var(--rate));
            padding-block-end: calc(2 * var(--rate));
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(5) {
    grid-column: 4;
    grid-row: 1;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-before: calc(2 * var(--rate));
            padding-block-start: calc(2 * var(--rate));
    transform: translateX(calc(-6 * var(--rate)));
  }
  .mainContents__block--color-01-02 .mainContents__prices > * {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .mainContents__block--color-01-02 .mainContents__color-name {
    width: calc(30 * var(--rate));
  }
  .mainContents__block--color-01-02 + .mainContents__details {
    --details-spacer: calc(50 * var(--rate));
  }
  .mainContents__block--color-02-01 {
    grid-template-columns: calc(160 * var(--rate)) calc(175 * var(--rate)) calc(20 * var(--rate)) calc(235 * var(--rate)) calc(100 * var(--rate)) calc(60 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) calc(274 * var(--rate)) calc(229 * var(--rate)) calc(10 * var(--rate)) auto;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1;
    z-index: 1;
    -webkit-padding-start: calc(16 * var(--rate));
            padding-inline-start: calc(16 * var(--rate));
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(2) {
    grid-column: 2/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 4/span 3;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(4) {
    grid-column: 4/span 2;
    grid-row: 3/span 2;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(5) {
    grid-column: 4;
    grid-row: 6;
    -webkit-padding-before: calc(4 * var(--rate));
            padding-block-start: calc(4 * var(--rate));
    transform: translateX(calc(-2 * var(--rate)));
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(6) {
    grid-column: 5;
    grid-row: 1;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-start: calc(10 * var(--rate));
            padding-inline-start: calc(10 * var(--rate));
  }
  .mainContents__block--color-02-01 .mainContents__color-name {
    width: calc(40 * var(--rate));
  }
  .mainContents__block--color-02-01 .mainContents__index {
    width: calc(212 * var(--rate));
    -webkit-margin-before: calc(150 * var(--rate));
            margin-block-start: calc(150 * var(--rate));
    margin-inline: auto;
  }
  .mainContents__block--color-02-01 + .mainContents__details {
    --details-spacer: calc(50 * var(--rate));
  }
  .mainContents__block--color-02-02 {
    grid-template-columns: calc(250 * var(--rate)) calc(100 * var(--rate)) calc(250 * var(--rate));
    grid-template-rows: auto auto calc(20 * var(--rate)) auto calc(20 * var(--rate)) auto;
    padding-inline: calc(75 * var(--rate));
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(2) {
    grid-column: 1/span 3;
    grid-row: 2;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(3) {
    grid-column: 2/span 2;
    grid-row: 4;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(4) {
    grid-column: 1/span 2;
    grid-row: 6;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(5) {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    -webkit-padding-after: calc(2 * var(--rate));
            padding-block-end: calc(2 * var(--rate));
    -webkit-padding-end: calc(17 * var(--rate));
            padding-inline-end: calc(17 * var(--rate));
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(6) {
    grid-column: 1;
    grid-row: 1/span 2;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-after: calc(22 * var(--rate));
            padding-block-end: calc(22 * var(--rate));
    -webkit-padding-start: calc(7 * var(--rate));
            padding-inline-start: calc(7 * var(--rate));
  }
  .mainContents__block--color-02-02 .mainContents__prices > * {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .mainContents__block--color-02-02 .mainContents__color-name {
    width: calc(30 * var(--rate));
  }
  .mainContents__block--color-02-02 + .mainContents__details {
    --details-spacer: calc(50 * var(--rate));
  }
  .mainContents__block--color-03-01 {
    grid-template-columns: calc(60 * var(--rate)) calc(100 * var(--rate)) calc(235 * var(--rate)) calc(20 * var(--rate)) calc(175 * var(--rate)) calc(160 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) calc(377 * var(--rate)) auto auto;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(1) {
    grid-column: 2/span 2;
    grid-row: 3;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(2) {
    grid-column: 3/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(3) {
    grid-column: 2/span 2;
    grid-row: 4/span 2;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(4) {
    grid-column: 5/span 2;
    grid-row: 3/span 2;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(5) {
    grid-column: 5/span 2;
    grid-row: 5;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(6) {
    grid-column: 6;
    grid-row: 1;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-before: calc(4 * var(--rate));
            padding-block-start: calc(4 * var(--rate));
    -webkit-padding-start: calc(15 * var(--rate));
            padding-inline-start: calc(15 * var(--rate));
  }
  .mainContents__block--color-03-01 .mainContents__color-name {
    width: calc(30 * var(--rate));
  }
  .mainContents__block--color-03-01 .mainContents__index {
    width: calc(237 * var(--rate));
    -webkit-margin-before: calc(55 * var(--rate));
            margin-block-start: calc(55 * var(--rate));
    margin-inline: auto;
  }
  .mainContents__block--color-03-01 + .mainContents__details {
    --details-spacer: calc(52 * var(--rate));
  }
  .mainContents__block--color-03-02 {
    grid-template-columns: calc(120 * var(--rate)) calc(55 * var(--rate)) calc(145 * var(--rate)) calc(255 * var(--rate)) calc(55 * var(--rate)) calc(120 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) auto calc(20 * var(--rate)) auto calc(0 * var(--rate)) auto;
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(1) {
    grid-column: 2/span 4;
    grid-row: 1;
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(2) {
    grid-column: 4/span 3;
    grid-row: 3;
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(3) {
    grid-column: 3/span 2;
    grid-row: 5;
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(4) {
    grid-column: 3/span 2;
    grid-row: 7;
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(5) {
    grid-column: 3;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-after: calc(3 * var(--rate));
            padding-block-end: calc(3 * var(--rate));
    -webkit-padding-end: calc(5 * var(--rate));
            padding-inline-end: calc(5 * var(--rate));
  }
  .mainContents__block--color-03-02 .mainContents__prices {
    transform: translateY(calc(-2 * var(--rate)));
  }
  .mainContents__block--color-03-02 .mainContents__prices > * {
    --display: inline-block;
    -webkit-margin-end: 0.45em;
            margin-inline-end: 0.45em;
  }
  .mainContents__block--color-03-02 .mainContents__color-name {
    width: calc(30 * var(--rate));
  }
  .mainContents__block--color-03-02 + .mainContents__details {
    --details-spacer: calc(50 * var(--rate));
  }
  .mainContents__block--color-04-01 {
    grid-template-columns: calc(160 * var(--rate)) calc(175 * var(--rate)) calc(20 * var(--rate)) calc(235 * var(--rate)) calc(100 * var(--rate)) calc(60 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) calc(307 * var(--rate)) auto auto;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(1) {
    grid-column: 4/span 2;
    grid-row: 3;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(2) {
    grid-column: 2/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 3/span 2;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(4) {
    grid-column: 4/span 2;
    grid-row: 4/span 2;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(5) {
    grid-column: 1/span 2;
    grid-row: 5;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(6) {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-end: calc(10 * var(--rate));
            padding-inline-end: calc(10 * var(--rate));
  }
  .mainContents__block--color-04-01 .mainContents__prices > * {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .mainContents__block--color-04-01 .mainContents__color-name {
    width: calc(30 * var(--rate));
  }
  .mainContents__block--color-04-01 .mainContents__index {
    width: calc(227 * var(--rate));
    -webkit-margin-before: calc(29 * var(--rate));
            margin-block-start: calc(29 * var(--rate));
    margin-inline: auto;
  }
  .mainContents__block--color-04-01 + .mainContents__details {
    --details-spacer: calc(50 * var(--rate));
  }
  .mainContents__block--color-04-02 {
    grid-template-columns: calc(75 * var(--rate)) calc(35 * var(--rate)) calc(350 * var(--rate)) calc(215 * var(--rate)) calc(75 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) auto calc(20 * var(--rate)) auto calc(20 * var(--rate)) auto;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(1) {
    grid-column: 2/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(2) {
    grid-column: 3/span 1;
    grid-row: 3;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(3) {
    grid-column: 3/span 1;
    grid-row: 5;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(4) {
    grid-column: 2/span 3;
    grid-row: 7;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(5) {
    grid-column: 4/span 2;
    grid-row: 5;
    align-self: end;
    -webkit-padding-after: calc(2 * var(--rate));
            padding-block-end: calc(2 * var(--rate));
    -webkit-padding-start: calc(20 * var(--rate));
            padding-inline-start: calc(20 * var(--rate));
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-end: calc(15 * var(--rate));
            padding-inline-end: calc(15 * var(--rate));
  }
  .mainContents__block--color-04-02 .mainContents__color-name {
    width: calc(30 * var(--rate));
  }
  .mainContents__block--color-04-02 + .mainContents__details {
    --details-spacer: calc(50 * var(--rate));
  }
  .mainContents__prices > * + * {
    -webkit-margin-before: 0.9em;
            margin-block-start: 0.9em;
  }
  .mainContents__details {
    width: calc(630 * var(--rate));
    -webkit-margin-before: var(--details-spacer, calc(42 * var(--rate)));
            margin-block-start: var(--details-spacer, calc(42 * var(--rate)));
    -webkit-padding-before: calc(20 * var(--rate));
            padding-block-start: calc(20 * var(--rate));
    padding-inline: calc(15 * var(--rate));
  }
  .mainContents__details-decoraiton {
    width: calc(104 * var(--rate));
  }
  .mainContents__heading {
    font-size: calc(24 * var(--rate));
    letter-spacing: -0.01em;
  }
  .mainContents__lead {
    -webkit-margin-before: calc(28 * var(--rate));
            margin-block-start: calc(28 * var(--rate));
    font-size: calc(24 * var(--rate));
    line-height: 2.0833333333;
    letter-spacing: 0.03em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents {
    -webkit-margin-before: calc(142 * var(--rate));
            margin-block-start: calc(142 * var(--rate));
  }
  .mainContents__section + * {
    -webkit-margin-before: var(--section-spacer, calc(144 * var(--rate)));
            margin-block-start: var(--section-spacer, calc(144 * var(--rate)));
  }
  .mainContents__section--color-03 {
    --section-spacer: calc(150 * var(--rate));
  }
  .mainContents__section--designer-intro {
    -webkit-padding-before: calc(77 * var(--rate));
            padding-block-start: calc(77 * var(--rate));
    -webkit-padding-after: calc(72 * var(--rate));
            padding-block-end: calc(72 * var(--rate));
  }
  .mainContents__section--designer-intro .mainContents__shell {
    --shell-width: 1400px;
  }
  .mainContents__section--designer-intro .designer-intro__heading {
    font-size: calc(35 * var(--rate));
    line-height: 1.5714285714;
  }
  .mainContents__section--designer-intro .designer-intro__lead {
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
  }
  .mainContents__section--designer-intro .designer-intro__thumbnail {
    width: calc(450 * var(--rate));
    -webkit-margin-before: calc(58 * var(--rate));
            margin-block-start: calc(58 * var(--rate));
  }
  .mainContents__section--designer-intro .designer-intro__notes {
    -webkit-margin-before: calc(21 * var(--rate));
            margin-block-start: calc(21 * var(--rate));
    -webkit-margin-start: calc(475 * var(--rate));
            margin-inline-start: calc(475 * var(--rate));
  }
  .mainContents__section--designer-intro .designer-intro__notes dd {
    -webkit-margin-before: 0.3em;
            margin-block-start: 0.3em;
  }
  .mainContents__section--designer-intro .designer-intro__name {
    top: 0;
    bottom: 0;
    right: 0;
    width: calc(108 * var(--rate));
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
  }
  .mainContents__section--video {
    --section-spacer: calc(100 * var(--rate));
    max-width: 1100px;
    margin-inline: auto;
  }
  .mainContents__section--model-intro {
    padding-inline: calc(150 * var(--rate));
  }
  .mainContents__section--model-intro .model-intro__details {
    width: calc(800 * var(--rate));
    -webkit-padding-before: calc(60 * var(--rate));
            padding-block-start: calc(60 * var(--rate));
    -webkit-padding-after: calc(76 * var(--rate));
            padding-block-end: calc(76 * var(--rate));
    padding-inline: calc(50 * var(--rate));
  }
  .mainContents__section--model-intro .model-intro__heading--primary {
    width: calc(273 * var(--rate));
    -webkit-margin-start: calc(8 * var(--rate));
            margin-inline-start: calc(8 * var(--rate));
  }
  .mainContents__section--model-intro .model-intro__heading--secondary {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
  }
  .mainContents__section--model-intro .model-intro__lead {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-before: calc(50 * var(--rate));
            padding-block-start: calc(50 * var(--rate));
    -webkit-padding-after: calc(23 * var(--rate));
            padding-block-end: calc(23 * var(--rate));
    -webkit-padding-end: calc(10 * var(--rate));
            padding-inline-end: calc(10 * var(--rate));
  }
  .mainContents__section--model-intro .model-intro__notes {
    -webkit-padding-before: calc(25 * var(--rate));
            padding-block-start: calc(25 * var(--rate));
  }
  .mainContents__section--model-intro .model-intro__thumbnail {
    width: calc(507 * var(--rate));
    top: calc(27 * var(--rate));
    right: calc(57 * var(--rate));
  }
  .mainContents__section--footer {
    --section-spacer: calc(80 * var(--rate));
  }
  .mainContents__section--footer .footer__iframe {
    max-width: 800px;
  }
  .mainContents__section--footer .footer__credit {
    -webkit-margin-before: calc(45 * var(--rate));
            margin-block-start: calc(45 * var(--rate));
    font-size: calc(18 * var(--rate));
    line-height: 2;
  }
  .mainContents__shell {
    max-width: var(--shell-width, 1100px);
  }
  .mainContents__shell + * {
    -webkit-margin-before: calc(144 * var(--rate));
            margin-block-start: calc(144 * var(--rate));
  }
  .mainContents__block {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  .mainContents__block--color-01-01 {
    grid-template-columns: calc(175 * var(--rate)) calc(475 * var(--rate)) calc(20 * var(--rate)) calc(255 * var(--rate)) calc(20 * var(--rate)) calc(155 * var(--rate));
    grid-template-rows: calc(608 * var(--rate)) calc(367 * var(--rate)) calc(278 * var(--rate)) calc(20 * var(--rate)) auto;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(1) {
    grid-column: 4/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(3) {
    grid-column: 4/span 3;
    grid-row: 2/span 2;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(4) {
    grid-column: 2/span 3;
    grid-row: 5;
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(5) {
    grid-column: 6;
    grid-row: 5;
    align-self: end;
    -webkit-padding-after: calc(12 * var(--rate));
            padding-block-end: calc(12 * var(--rate));
  }
  .mainContents__block--color-01-01 .mainContents__cell:nth-child(6) {
    grid-column: 1;
    grid-row: 1/span 2;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-start: calc(20 * var(--rate));
            padding-inline-start: calc(20 * var(--rate));
    z-index: 10;
  }
  .mainContents__block--color-01-01 .mainContents__color-name {
    width: calc(37 * var(--rate));
  }
  .mainContents__block--color-01-01 .mainContents__index {
    width: calc(301 * var(--rate));
    -webkit-margin-before: calc(128 * var(--rate));
            margin-block-start: calc(128 * var(--rate));
    margin-inline: auto;
  }
  .mainContents__block--color-01-02 {
    grid-template-columns: calc(175 * var(--rate)) calc(255 * var(--rate)) calc(20 * var(--rate)) calc(475 * var(--rate)) calc(175 * var(--rate));
    grid-template-rows: calc(225 * var(--rate)) calc(420 * var(--rate)) calc(555 * var(--rate)) calc(20 * var(--rate)) auto;
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(2) {
    grid-column: 4/span 2;
    grid-row: 2/span 2;
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(3) {
    grid-column: 2/span 3;
    grid-row: 5;
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(4) {
    grid-column: 1;
    grid-row: 5;
    align-self: end;
    -webkit-padding-after: calc(2 * var(--rate));
            padding-block-end: calc(2 * var(--rate));
    -webkit-padding-end: calc(20 * var(--rate));
            padding-inline-end: calc(20 * var(--rate));
  }
  .mainContents__block--color-01-02 .mainContents__cell:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-after: calc(70 * var(--rate));
            padding-block-end: calc(70 * var(--rate));
  }
  .mainContents__block--color-01-02 .mainContents__prices > * {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .mainContents__block--color-01-02 .mainContents__color-name {
    width: calc(37 * var(--rate));
  }
  .mainContents__block--color-01-02 + .mainContents__details {
    --details-spacer: calc(72 * var(--rate));
  }
  .mainContents__block--color-02-01 {
    grid-template-columns: calc(185 * var(--rate)) calc(315 * var(--rate)) calc(20 * var(--rate)) calc(315 * var(--rate)) calc(185 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) calc(356 * var(--rate)) auto auto;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1;
    z-index: 1;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(2) {
    grid-column: 2/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 4/span 2;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(4) {
    grid-column: 4/span 2;
    grid-row: 3/span 2;
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(5) {
    grid-column: 4/span 2;
    grid-row: 5;
    align-self: end;
    -webkit-padding-after: calc(2 * var(--rate));
            padding-block-end: calc(2 * var(--rate));
  }
  .mainContents__block--color-02-01 .mainContents__cell:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-after: calc(18 * var(--rate));
            padding-block-end: calc(18 * var(--rate));
    transform: translateX(calc(5 * var(--rate)));
  }
  .mainContents__block--color-02-01 .mainContents__color-name {
    width: calc(50 * var(--rate));
  }
  .mainContents__block--color-02-01 .mainContents__index {
    width: calc(302 * var(--rate));
    -webkit-margin-before: calc(316 * var(--rate));
            margin-block-start: calc(316 * var(--rate));
    transform: translateX(calc(-6.4 * var(--rate)));
  }
  .mainContents__block--color-02-01 + .mainContents__details {
    --details-spacer: calc(52 * var(--rate));
  }
  .mainContents__block--color-02-02 {
    grid-template-columns: calc(345 * var(--rate)) calc(285 * var(--rate)) calc(345 * var(--rate));
    grid-template-rows: auto auto calc(20 * var(--rate)) auto calc(20 * var(--rate)) auto;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(2) {
    grid-column: 1/span 3;
    grid-row: 2;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(3) {
    grid-column: 2/span 2;
    grid-row: 4;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(4) {
    grid-column: 1/span 2;
    grid-row: 6;
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(5) {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    -webkit-padding-end: calc(20 * var(--rate));
            padding-inline-end: calc(20 * var(--rate));
  }
  .mainContents__block--color-02-02 .mainContents__cell:nth-child(6) {
    grid-column: 1;
    grid-row: 1/span 2;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-start: calc(27 * var(--rate));
            padding-inline-start: calc(27 * var(--rate));
    -webkit-padding-after: calc(36 * var(--rate));
            padding-block-end: calc(36 * var(--rate));
  }
  .mainContents__block--color-02-02 .mainContents__prices > * {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .mainContents__block--color-02-02 .mainContents__color-name {
    width: calc(37 * var(--rate));
  }
  .mainContents__block--color-02-02 + .mainContents__details {
    --details-spacer: calc(74 * var(--rate));
  }
  .mainContents__block--color-03-01 {
    grid-template-columns: calc(185 * var(--rate)) calc(315 * var(--rate)) calc(20 * var(--rate)) calc(315 * var(--rate)) calc(185 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) calc(470 * var(--rate)) calc(280 * var(--rate)) auto;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 3;
    justify-self: center;
    align-self: center;
    -webkit-padding-before: calc(10 * var(--rate));
            padding-block-start: calc(10 * var(--rate));
    -webkit-padding-end: calc(10 * var(--rate));
            padding-inline-end: calc(10 * var(--rate));
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(2) {
    grid-column: 2/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 4/span 2;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(4) {
    grid-column: 4/span 2;
    grid-row: 3/span 2;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(5) {
    grid-column: 4/span 2;
    grid-row: 5;
  }
  .mainContents__block--color-03-01 .mainContents__cell:nth-child(6) {
    grid-column: 5;
    grid-row: 1;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-before: calc(10 * var(--rate));
            padding-block-start: calc(10 * var(--rate));
    -webkit-padding-start: calc(26 * var(--rate));
            padding-inline-start: calc(26 * var(--rate));
  }
  .mainContents__block--color-03-01 .mainContents__prices > * {
    --display: inline-block;
    -webkit-margin-end: 0.75em;
            margin-inline-end: 0.75em;
    letter-spacing: 0.015em;
  }
  .mainContents__block--color-03-01 .mainContents__color-name {
    width: calc(37 * var(--rate));
  }
  .mainContents__block--color-03-01 .mainContents__index {
    width: calc(338 * var(--rate));
  }
  .mainContents__block--color-03-02 {
    grid-template-columns: calc(122 * var(--rate)) calc(128 * var(--rate)) calc(250 * var(--rate)) calc(350 * var(--rate)) calc(128 * var(--rate)) calc(122 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) auto calc(20 * var(--rate)) auto;
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(1) {
    grid-column: 2/span 4;
    grid-row: 1;
    -webkit-padding-start: calc(56 * var(--rate));
            padding-inline-start: calc(56 * var(--rate));
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(2) {
    grid-column: 4/span 3;
    grid-row: 3;
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(3) {
    grid-column: 3/span 2;
    grid-row: 5;
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(4) {
    grid-column: 5/span 2;
    grid-row: 5;
    align-self: end;
    -webkit-padding-start: calc(20 * var(--rate));
            padding-inline-start: calc(20 * var(--rate));
    -webkit-padding-after: calc(2 * var(--rate));
            padding-block-end: calc(2 * var(--rate));
  }
  .mainContents__block--color-03-02 .mainContents__cell:nth-child(5) {
    grid-column: 3;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-end: calc(23 * var(--rate));
            padding-inline-end: calc(23 * var(--rate));
  }
  .mainContents__block--color-03-02 .mainContents__color-name {
    width: calc(38 * var(--rate));
  }
  .mainContents__block--color-03-02 + .mainContents__details {
    --details-spacer: calc(52 * var(--rate));
  }
  .mainContents__block--color-04-01 {
    grid-template-columns: calc(185 * var(--rate)) calc(315 * var(--rate)) calc(20 * var(--rate)) calc(315 * var(--rate)) calc(185 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) calc(448 * var(--rate)) auto auto;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(1) {
    grid-column: 3/span 3;
    grid-row: 3;
    justify-self: center;
    align-self: center;
    -webkit-padding-start: calc(20 * var(--rate));
            padding-inline-start: calc(20 * var(--rate));
    -webkit-padding-after: calc(38 * var(--rate));
            padding-block-end: calc(38 * var(--rate));
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(2) {
    grid-column: 2/span 3;
    grid-row: 1;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 3/span 2;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(4) {
    grid-column: 4/span 2;
    grid-row: 4/span 2;
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(5) {
    grid-column: 1/span 2;
    grid-row: 5;
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
    -webkit-padding-after: calc(2 * var(--rate));
            padding-block-end: calc(2 * var(--rate));
  }
  .mainContents__block--color-04-01 .mainContents__cell:nth-child(6) {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-after: calc(38 * var(--rate));
            padding-block-end: calc(38 * var(--rate));
    -webkit-padding-end: calc(16 * var(--rate));
            padding-inline-end: calc(16 * var(--rate));
  }
  .mainContents__block--color-04-01 .mainContents__prices > * {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .mainContents__block--color-04-01 .mainContents__color-name {
    width: calc(37 * var(--rate));
  }
  .mainContents__block--color-04-01 .mainContents__index {
    width: calc(324 * var(--rate));
  }
  .mainContents__block--color-04-01 + .mainContents__details {
    --details-spacer: calc(52 * var(--rate));
  }
  .mainContents__block--color-04-02 {
    grid-template-columns: calc(105 * var(--rate)) calc(500 * var(--rate)) calc(100 * var(--rate)) calc(270 * var(--rate));
    grid-template-rows: auto calc(20 * var(--rate)) auto calc(20 * var(--rate)) auto calc(20 * var(--rate)) auto;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 4;
    grid-row: 1;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(2) {
    grid-column: 2;
    grid-row: 3;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(3) {
    grid-column: 2/span 2;
    grid-row: 5;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(4) {
    grid-column: 1/span 4;
    grid-row: 7;
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(5) {
    grid-column: 4;
    grid-row: 5;
    align-self: end;
    -webkit-padding-after: calc(2 * var(--rate));
            padding-block-end: calc(2 * var(--rate));
    -webkit-padding-start: calc(22 * var(--rate));
            padding-inline-start: calc(22 * var(--rate));
  }
  .mainContents__block--color-04-02 .mainContents__cell:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-after: calc(54 * var(--rate));
            padding-block-end: calc(54 * var(--rate));
    -webkit-padding-end: calc(26 * var(--rate));
            padding-inline-end: calc(26 * var(--rate));
  }
  .mainContents__block--color-04-02 .mainContents__color-name {
    width: calc(37 * var(--rate));
  }
  .mainContents__block--color-04-02 + .mainContents__details {
    --details-spacer: calc(52 * var(--rate));
  }
  .mainContents__prices > * + * {
    -webkit-margin-before: 0.95em;
            margin-block-start: 0.95em;
  }
  .mainContents__details {
    width: calc(860 * var(--rate));
    -webkit-margin-before: var(--details-spacer, calc(54 * var(--rate)));
            margin-block-start: var(--details-spacer, calc(54 * var(--rate)));
    -webkit-padding-before: calc(35 * var(--rate));
            padding-block-start: calc(35 * var(--rate));
    padding-inline: calc(30 * var(--rate));
  }
  .mainContents__details-decoraiton {
    width: calc(116 * var(--rate));
  }
  .mainContents__heading {
    font-size: calc(24 * var(--rate));
  }
  .mainContents__lead {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
    font-size: calc(18 * var(--rate));
    line-height: 2;
    letter-spacing: 0.025em;
  }
}
/**
 * animation
 */
.js-animation-trigger.anim-draw-index .number {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-draw-index .copy {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.5s;
}
.js-animation-trigger.anim-draw-index .line {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-draw-index .text {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.5s;
}
.js-animation-trigger.anim-draw-index.is-active .number {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}
.js-animation-trigger.anim-draw-index.is-active .copy {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}
.js-animation-trigger.anim-draw-index.is-active .line {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}
.js-animation-trigger.anim-draw-index.is-active .text {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}
.js-animation-trigger.anim-draw-top-to-bottom {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-draw-top-to-bottom.is-active {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}
.js-animation-trigger.anim-draw-left-to-right {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-draw-left-to-right.is-active {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}
.js-animation-trigger.anim-rotate-thumbnail {
  opacity: 0;
}
.js-animation-trigger.anim-rotate-thumbnail.is-active {
  -webkit-animation: rotateThumbnail 1s ease-out 0.5s 1 normal forwards;
          animation: rotateThumbnail 1s ease-out 0.5s 1 normal forwards;
}
.js-animation-trigger.mainContents__section--designer-intro::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(145, 185, 195, 0.35);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}
.js-animation-trigger.mainContents__section--designer-intro .designer-intro__name {
  -webkit-clip-path: inset(0 0 0 100%);
          clip-path: inset(0 0 0 100%);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
  z-index: 1;
}
.js-animation-trigger.mainContents__section--designer-intro .designer-intro__details {
  opacity: 0;
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s;
}
.js-animation-trigger.mainContents__section--designer-intro.is-active::after {
  width: 100%;
}
.js-animation-trigger.mainContents__section--designer-intro.is-active .designer-intro__name {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.js-animation-trigger.mainContents__section--designer-intro.is-active .designer-intro__details {
  opacity: 1;
}
.js-animation-trigger.mainContents__section--designer-intro .mainContents__shell {
  z-index: 1;
}

.js-scroll-top {
  opacity: 0;
  transform: translateY(25%);
  transition: all 1.2s;
}
.js-scroll-top.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 1.2s;
}

.firstView__mainImage {
  overflow: hidden;
}
.firstView__mainImage--visual {
  -webkit-animation: zoom-in 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s 1 normal forwards;
          animation: zoom-in 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s 1 normal forwards;
}
.firstView__mainImage--text {
  -webkit-animation: slide-to-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s 1 normal forwards;
          animation: slide-to-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s 1 normal forwards;
}

@-webkit-keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes slide-to-left {
  0% {
    opacity: 0;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-to-left {
  0% {
    opacity: 0;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes rotateThumbnail {
  0% {
    opacity: 0;
    transform: scale(1.2) rotate(15deg) translateY(-10%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0) translateY(0);
  }
}
@keyframes rotateThumbnail {
  0% {
    opacity: 0;
    transform: scale(1.2) rotate(15deg) translateY(-10%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0) translateY(0);
  }
}