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

Title : style.scss
For   : page/style/240529/

Created       : 2024-05-22
Last Modified : 2024-05-23

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

Content

////////////////////////////////////////////////// */
/* ========== font */
@font-face {
  font-family: "Noto Serif JP";
  src: url(../font/NotoSerifJP-Medium.otf) format("opentype");
  font-weight: normal;
}
/* ========== variables */
.lpCelford {
  --color-dark: #000;
  --color-border: #B2B2B2;
  --color-lp-palechestnut: #DBA9A0;
  --color-lp-ivory: #F4F3EE;
  --color-lp-whitesmoke: #F1F1F1;
  --color-lp-seashellpink: #F9F0EE;
  --color-lp-paleblue: #EBF1F7;
  --font-en: "Crimson Text", serif;
  --font-en-sub-title: "garamond-premier-pro", serif;
  --font-en-title: adobe-garamond-pro, serif;
  --font-ja-san-serif: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  --font-ja-serif: "Noto Serif JP";
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lpCelford {
    --rate: 100vw / 750;
    --font-size-base: calc(24 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lpCelford {
    --rate: .1rem;
    --font-size-base: calc(12 * var(--rate));
  }
}
/* ========== common:initialize */
.main-area .main-inner {
  max-width: 100%;
  width: 100%;
}

#breadcrumb {
  margin-inline: auto;
}

.lpCelford img,
.lpCelford picture {
  display: var(--display, block);
}
.lpCelford img {
  width: 100%;
  height: auto;
}
.lpCelford a {
  display: var(--display, inline-block);
}
.lpCelford * {
  font-feature-settings: "palt";
  box-sizing: border-box;
  text-align: var(--text-align, initial);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #breadcrumb .cateList {
    --font-size: calc(20 * var(--rate));
  }
  /*#style-archive.style-archive {
    -webkit-padding-after: calc(220 * var(--rate)) !important;
            padding-block-end: calc(220 * var(--rate)) !important;
  }*/
  .lpCelford {
    -webkit-padding-after: calc(35 * var(--rate));
            padding-block-end: calc(35 * var(--rate));
  }
  .lpCelford .hidden-sml {
    display: none !important;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #breadcrumb {
    max-width: 1400px;
    -webkit-padding-start: 100px;
            padding-inline-start: 100px;
  }
  .lpCelford {
    -webkit-padding-after: calc(40 * var(--rate));
            padding-block-end: calc(40 * var(--rate));
  }
  .lpCelford .hidden-lrg {
    display: none !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw !important;
  }
}
/* ========== typography */
.lpCelford__details {
  font-family: var(--font-ja-san-serif);
  color: var(--color-dark);
}
.lpCelford__prices {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-en);
  color: var(--color-dark);
  letter-spacing: 0.025em;
}
.lpCelford__prices a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-padding-after: 1px;
          padding-block-end: 1px;
  border-bottom: 1px solid var(--color-border);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lpCelford__details {
    font-size: calc(24 * var(--rate));
    line-height: 2.2;
    letter-spacing: 0.05em;
  }
  .lpCelford__prices {
    font-size: calc(24 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lpCelford__details {
    font-size: calc(13 * var(--rate));
    line-height: 2.2;
    letter-spacing: var(--letter-spacing, 0.025em);
  }
  .lpCelford__prices {
    font-size: calc(13 * var(--rate));
  }
}
/* ========== firstview */
.firstView {
  max-width: calc(1200 * var(--rate));
  margin-inline: auto;
  --text-align: center;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .firstview__details {
    -webkit-margin-before: calc(124 * var(--rate));
            margin-block-start: calc(124 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .firstview__details {
    -webkit-margin-before: calc(112 * var(--rate));
            margin-block-start: calc(112 * var(--rate));
    --letter-spacing: 0.05em;
  }
}
/* ========== index */
.index {
  margin-inline: auto;
  --text-align: center;
  position: relative;
}
.index::before, .index::after {
  margin: auto;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  box-sizing: border-box;
}
.index::before {
  width: 100%;
  height: 100%;
}
.index__title > * {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.index__title--en {
  background-color: #fff;
  font-family: var(--font-en-title);
  color: var(--color-lp-palechestnut);
  line-height: 1;
  letter-spacing: 0.075em;
}
.index__title--ja {
  font-family: var(--font-ja-san-serif);
  color: var(--color-dark);
  line-height: 1;
  letter-spacing: 0.05em;
}
.index__thumbnail {
  margin-inline: auto;
}
.index__prices {
  margin-inline: auto;
  background-color: #fff;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .index {
    -webkit-margin-before: calc(150 * var(--rate));
            margin-block-start: calc(150 * var(--rate));
  }
  .index::before, .index::after {
    border-top: 1px solid var(--color-lp-palechestnut);
    border-bottom: 1px solid var(--color-lp-palechestnut);
  }
  .index::after {
    width: calc(100% - 10 * var(--rate));
    height: calc(100% - 10 * var(--rate));
  }
  .index__title {
    transform: translateY(calc(-24 * var(--rate)));
  }
  .index__title--en {
    padding-inline: calc(18 * var(--rate));
    font-size: calc(60 * var(--rate));
  }
  .index__title--ja {
    -webkit-margin-before: calc(38 * var(--rate));
            margin-block-start: calc(38 * var(--rate));
    font-size: calc(24 * var(--rate));
  }
  .index__thumbnail {
    width: calc(500 * var(--rate));
    -webkit-margin-before: calc(36 * var(--rate));
            margin-block-start: calc(36 * var(--rate));
  }
  .index__details {
    -webkit-margin-before: calc(45 * var(--rate));
            margin-block-start: calc(45 * var(--rate));
  }
  .index__prices {
    -webkit-margin-before: calc(36 * var(--rate));
            margin-block-start: calc(36 * var(--rate));
    padding-inline: calc(26 * var(--rate));
    transform: translateY(30%);
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .index {
    max-width: calc(686 * var(--rate));
    -webkit-margin-before: calc(94 * var(--rate));
            margin-block-start: calc(94 * var(--rate));
  }
  .index::before, .index::after {
    border: 1px solid var(--color-lp-palechestnut);
  }
  .index::after {
    width: calc(100% - 10 * var(--rate));
    height: calc(100% - 10 * var(--rate));
  }
  .index__title {
    transform: translateY(calc(-18 * var(--rate)));
  }
  .index__title--en {
    padding-inline: calc(20 * var(--rate));
    font-size: calc(40 * var(--rate));
  }
  .index__title--ja {
    -webkit-margin-before: calc(28 * var(--rate));
            margin-block-start: calc(28 * var(--rate));
    font-size: calc(13 * var(--rate));
  }
  .index__thumbnail {
    width: calc(340 * var(--rate));
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
  }
  .index__details {
    -webkit-margin-before: calc(22 * var(--rate));
            margin-block-start: calc(22 * var(--rate));
    letter-spacing: 0.05em;
  }
  .index__prices {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
    padding-inline: calc(26 * var(--rate));
    transform: translateY(20%);
  }
}
/* ========== main contents */
.mainPanel__shell:nth-child(1) {
  --theme-color: var(--color-lp-ivory);
}
.mainPanel__shell:nth-child(2) {
  --theme-color: var(--color-lp-ivory);
}
.mainPanel__shell:nth-child(3) {
  --theme-color: var(--color-lp-whitesmoke);
}
.mainPanel__shell:nth-child(4) {
  --theme-color: var(--color-lp-seashellpink);
}
.mainPanel__shell:nth-child(5) {
  --theme-color: var(--color-lp-seashellpink);
}
.mainPanel__shell:nth-child(6) {
  --theme-color: var(--color-lp-paleblue);
}
.mainPanel__cell {
  position: relative;
}
.mainPanel__heading-text {
  font-family: "Noto Serif JP";
  font-weight: 500;
  color: var(--color-dark);
}
.mainPanel__stylingImages a {
  --display: block;
}
.mainPanel__details {
  --text-align: justify;
}
.mainPanel__details dt {
  position: absolute;
}
.mainPanel__notes {
  display: flex;
  align-items: center;
  font-family: var(--font-en);
  color: var(--color-dark);
  letter-spacing: 0.025em;
}
.mainPanel__note {
  display: flex;
  align-items: center;
}
.mainPanel__note-icons {
  display: flex;
  align-items: center;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel {
    -webkit-margin-before: calc(206 * var(--rate));
            margin-block-start: calc(206 * var(--rate));
  }
  .mainPanel__cell:nth-child(1) .mainPanel__details {
    -webkit-margin-before: calc(66 * var(--rate));
            margin-block-start: calc(66 * var(--rate));
    padding-inline: var(--details-gap, calc(50 * var(--rate)));
  }
  .mainPanel__cell:nth-child(2) {
    display: grid;
    grid-template-columns: 100%;
    -webkit-margin-before: var(--cell-spacer, calc(80 * var(--rate)));
            margin-block-start: var(--cell-spacer, calc(80 * var(--rate)));
  }
  .mainPanel__cell:nth-child(2) .mainPanel__details {
    -webkit-padding-before: calc(106 * var(--rate));
            padding-block-start: calc(106 * var(--rate));
    -webkit-padding-after: var(--details-gap, calc(45 * var(--rate)));
            padding-block-end: var(--details-gap, calc(45 * var(--rate)));
  }
  .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    width: calc(90 * var(--rate));
  }
  .mainPanel__cell:nth-child(2) .mainPanel__prices > * + * {
    -webkit-margin-start: calc(20 * var(--rate));
            margin-inline-start: calc(20 * var(--rate));
  }
  .mainPanel__heading {
    position: absolute;
    top: 0;
  }
  .mainPanel__heading-text {
    font-size: calc(38 * var(--rate));
    writing-mode: vertical-rl;
    font-feature-settings: "vpal";
    letter-spacing: 0.065em;
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }
  .mainPanel__notes {
    -webkit-margin-before: var(--notes-spacer, calc(14 * var(--rate)));
            margin-block-start: var(--notes-spacer, calc(14 * var(--rate)));
    -moz-column-gap: calc(30 * var(--rate));
         column-gap: calc(30 * var(--rate));
    font-size: calc(24 * var(--rate));
  }
  .mainPanel__note {
    -moz-column-gap: calc(20 * var(--rate));
         column-gap: calc(20 * var(--rate));
  }
  .mainPanel__note-icons {
    -moz-column-gap: calc(10 * var(--rate));
         column-gap: calc(10 * var(--rate));
  }
  .mainPanel__note-icon {
    width: calc(55 * var(--rate));
  }
  .mainPanel__shell:not(:nth-child(6)) .mainPanel__cell:nth-child(2) {
    grid-template-rows: auto calc(60 * var(--rate)) auto calc(40 * var(--rate)) 1fr;
  }
  .mainPanel__shell:not(:nth-child(6)) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .mainPanel__shell:not(:nth-child(6)) .mainPanel__cell:nth-child(2) .mainPanel__details {
    grid-column: 1;
    grid-row: 2/span 2;
  }
  .mainPanel__shell:not(:nth-child(6)) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    grid-column: 1;
    grid-row: 5;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) {
    grid-template-rows: auto calc(60 * var(--rate)) auto calc(60 * var(--rate)) auto calc(40 * var(--rate)) 1fr;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages:nth-child(2) {
    grid-column: 1;
    grid-row: 3/span 2;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__details {
    grid-column: 1;
    grid-row: 4/span 2;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    grid-column: 1;
    grid-row: 7;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel {
    -webkit-margin-before: calc(154 * var(--rate));
            margin-block-start: calc(154 * var(--rate));
  }
  .mainPanel__shell {
    display: grid;
    margin-inline: auto;
  }
  .mainPanel__shell:not(:nth-child(4)) .mainPanel__prices > * + * {
    -webkit-margin-start: calc(12 * var(--rate));
            margin-inline-start: calc(12 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__prices a {
    --display: block;
  }
  .mainPanel__shell:nth-child(4) .mainPanel__prices > * + * {
    -webkit-margin-before: calc(15 * var(--rate));
            margin-block-start: calc(15 * var(--rate));
  }
  .mainPanel__cell {
    grid-column: 1/span 2;
    display: grid;
  }
  .mainPanel__cell:nth-child(1) {
    row-gap: calc(17 * var(--rate));
  }
  .mainPanel__cell:nth-child(2) .mainPanel__details {
    -webkit-padding-before: var(--detail-gap-top, calc(42.5 * var(--rate)));
            padding-block-start: var(--detail-gap-top, calc(42.5 * var(--rate)));
    -webkit-padding-after: var(--detail-gap-bottom, calc(42.5 * var(--rate)));
            padding-block-end: var(--detail-gap-bottom, calc(42.5 * var(--rate)));
    background-color: var(--theme-color);
  }
  .mainPanel__heading-text {
    -webkit-margin-before: calc(52 * var(--rate));
            margin-block-start: calc(52 * var(--rate));
    font-size: calc(17 * var(--rate));
    line-height: 2;
    letter-spacing: 0.075em;
  }
  .mainPanel__stylingImages {
    z-index: 1;
  }
  .mainPanel__details {
    position: relative;
  }
  .mainPanel__details dt {
    top: calc(-20 * var(--rate));
    width: calc(206 * var(--rate));
    z-index: 1;
  }
  .mainPanel__notes {
    -webkit-margin-before: calc(14 * var(--rate));
            margin-block-start: calc(14 * var(--rate));
    -webkit-padding-start: calc(2 * var(--rate));
            padding-inline-start: calc(2 * var(--rate));
    -moz-column-gap: calc(20 * var(--rate));
         column-gap: calc(20 * var(--rate));
    font-size: calc(13 * var(--rate));
  }
  .mainPanel__note {
    -moz-column-gap: calc(10 * var(--rate));
         column-gap: calc(10 * var(--rate));
  }
  .mainPanel__note-icons {
    -moz-column-gap: calc(5 * var(--rate));
         column-gap: calc(5 * var(--rate));
  }
  .mainPanel__note-icon {
    width: calc(30 * var(--rate));
  }
}
/* ========== main contents shell 1 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) {
    -webkit-padding-before: calc(250 * var(--rate));
            padding-block-start: calc(250 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    right: calc(84 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(92 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) .mainPanel__heading-text {
    -webkit-margin-start: calc(60 * var(--rate));
            margin-inline-start: calc(60 * var(--rate));
    -webkit-margin-after: auto;
            margin-block-end: auto;
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) .mainPanel__notes {
    -webkit-padding-start: calc(3 * var(--rate));
            padding-inline-start: calc(3 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    -webkit-padding-start: calc(140 * var(--rate));
            padding-inline-start: calc(140 * var(--rate));
    -webkit-padding-end: calc(50 * var(--rate));
            padding-inline-end: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) .mainPanel__details {
    -webkit-padding-start: calc(140 * var(--rate));
            padding-inline-start: calc(140 * var(--rate));
    background-color: var(--theme-color);
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    top: 0;
    left: calc(30 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    -webkit-padding-start: calc(140 * var(--rate));
            padding-inline-start: calc(140 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel__shell:nth-child(1) {
    max-width: calc(960 * var(--rate));
    grid-template-rows: auto calc(160 * var(--rate)) 1fr;
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) {
    grid-row: 1/span 2;
    grid-template-columns: 1fr calc(510 * var(--rate));
    grid-template-rows: auto 1fr;
    -moz-column-gap: calc(100 * var(--rate));
         column-gap: calc(100 * var(--rate));
    -webkit-padding-start: calc(20 * var(--rate));
            padding-inline-start: calc(20 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    -webkit-padding-before: calc(137 * var(--rate));
            padding-block-start: calc(137 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(37 * var(--rate));
    -webkit-margin-start: calc(8 * var(--rate));
            margin-inline-start: calc(8 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) .mainPanel__stylingImages {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(1) .mainPanel__details {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) {
    grid-row: 2/span 2;
    grid-template-columns: calc(260 * var(--rate)) calc(110 * var(--rate)) 1fr;
    grid-template-rows: calc(160 * var(--rate)) calc(30 * var(--rate)) auto 1fr calc(35 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    grid-column: 1/span 2;
    grid-row: 1/span 4;
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) .mainPanel__details {
    grid-column: 2/span 2;
    grid-row: 4/span 2;
    align-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-padding-start: calc(160 * var(--rate));
            padding-inline-start: calc(160 * var(--rate));
    -webkit-padding-end: calc(50 * var(--rate));
            padding-inline-end: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    right: calc(-32 * var(--rate));
  }
  .mainPanel__shell:nth-child(1) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    grid-column: 3;
    grid-row: 3;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
}
/* ========== main contents shell 2 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel__shell:nth-child(2) {
    -webkit-margin-before: calc(130 * var(--rate));
            margin-block-start: calc(130 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) {
    -webkit-padding-before: calc(190 * var(--rate));
            padding-block-start: calc(190 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) .mainPanel__stylingImages {
    padding-inline: calc(35 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    left: calc(65 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(114 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) .mainPanel__heading-text {
    -webkit-margin-start: calc(120 * var(--rate));
            margin-inline-start: calc(120 * var(--rate));
    -webkit-margin-after: calc(30 * var(--rate));
            margin-block-end: calc(30 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    -webkit-padding-end: calc(120 * var(--rate));
            padding-inline-end: calc(120 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) .mainPanel__details {
    --details-gap: calc(50 * var(--rate));
    -webkit-padding-start: calc(50 * var(--rate));
            padding-inline-start: calc(50 * var(--rate));
    background-color: var(--theme-color);
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    top: 0;
    right: calc(15 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    -webkit-padding-start: calc(50 * var(--rate));
            padding-inline-start: calc(50 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel__shell:nth-child(2) {
    max-width: calc(950 * var(--rate));
    grid-template-rows: auto calc(30 * var(--rate)) 1fr;
    -webkit-margin-before: calc(180 * var(--rate));
            margin-block-start: calc(180 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) {
    grid-row: 1;
    grid-template-columns: calc(550 * var(--rate)) 1fr;
    grid-template-rows: auto 1fr;
    -moz-column-gap: calc(80 * var(--rate));
         column-gap: calc(80 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    -webkit-padding-before: calc(217 * var(--rate));
            padding-block-start: calc(217 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(47 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) .mainPanel__stylingImages {
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(1) .mainPanel__details {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) {
    grid-row: 3;
    grid-template-columns: 1fr calc(420 * var(--rate));
    grid-template-rows: calc(10 * var(--rate)) 1fr calc(83 * var(--rate));
    -webkit-padding-end: calc(40 * var(--rate));
            padding-inline-end: calc(40 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    grid-column: 2;
    grid-row: 2/span 2;
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) .mainPanel__details {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    -webkit-padding-start: calc(50 * var(--rate));
            padding-inline-start: calc(50 * var(--rate));
    -webkit-padding-end: calc(54 * var(--rate));
            padding-inline-end: calc(54 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    left: calc(-30 * var(--rate));
  }
  .mainPanel__shell:nth-child(2) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    grid-column: 1;
    grid-row: 1/span 2;
  }
}
/* ========== main contents shell 3 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel__shell:nth-child(3) {
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) {
    -webkit-padding-before: calc(260 * var(--rate));
            padding-block-start: calc(260 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    right: calc(98 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(105 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) .mainPanel__heading-text {
    -webkit-margin-after: calc(52 * var(--rate));
            margin-block-end: calc(52 * var(--rate));
    -webkit-margin-start: calc(60 * var(--rate));
            margin-inline-start: calc(60 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) .mainPanel__notes {
    --notes-spacer: calc(30 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    -webkit-padding-start: calc(170 * var(--rate));
            padding-inline-start: calc(170 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) .mainPanel__details {
    -webkit-padding-start: calc(170 * var(--rate));
            padding-inline-start: calc(170 * var(--rate));
    background-image: linear-gradient(to right, var(--theme-color) calc(100% - 80 * var(--rate)), transparent calc(100% - 80 * var(--rate)));
    --details-gap: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    top: calc(60 * var(--rate));
    left: calc(48 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    -webkit-padding-start: calc(170 * var(--rate));
            padding-inline-start: calc(170 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel__shell:nth-child(3) {
    max-width: calc(1020 * var(--rate));
    grid-template-rows: auto calc(202 * var(--rate)) 1fr;
    -webkit-margin-before: calc(200 * var(--rate));
            margin-block-start: calc(200 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) {
    grid-row: 1/span 2;
    grid-template-columns: 1fr calc(460 * var(--rate));
    grid-template-rows: auto 1fr;
    -moz-column-gap: calc(160 * var(--rate));
         column-gap: calc(160 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    -webkit-padding-before: calc(17 * var(--rate));
            padding-block-start: calc(17 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(44 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) .mainPanel__stylingImages {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(1) .mainPanel__details {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) {
    grid-row: 2/span 2;
    grid-template-columns: calc(400 * var(--rate)) 1fr;
    grid-template-rows: calc(202 * var(--rate)) calc(30 * var(--rate)) auto 1fr calc(70 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    grid-column: 1;
    grid-row: 1/span 5;
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) .mainPanel__details {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    --detail-gap-bottom: calc(52.5 * var(--rate));
    padding-inline: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    right: calc(-33 * var(--rate));
  }
  .mainPanel__shell:nth-child(3) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    grid-column: 2;
    grid-row: 3;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
}
/* ========== main contents shell 4 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel__shell:nth-child(4) {
    -webkit-margin-before: calc(130 * var(--rate));
            margin-block-start: calc(130 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) {
    -webkit-padding-before: calc(188 * var(--rate));
            padding-block-start: calc(188 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__stylingImages {
    -webkit-padding-end: calc(70 * var(--rate));
            padding-inline-end: calc(70 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    left: calc(60 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(115 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__heading-text {
    -webkit-margin-after: calc(32 * var(--rate));
            margin-block-end: calc(32 * var(--rate));
    -webkit-margin-start: calc(116 * var(--rate));
            margin-inline-start: calc(116 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__details {
    --details-gap: calc(70 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__notes {
    --notes-spacer: calc(20 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    -webkit-padding-end: calc(140 * var(--rate));
            padding-inline-end: calc(140 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) .mainPanel__details {
    --details-gap: calc(50 * var(--rate));
    -webkit-padding-start: calc(150 * var(--rate));
            padding-inline-start: calc(150 * var(--rate));
    background-image: linear-gradient(to right, transparent calc(70 * var(--rate)), var(--theme-color) calc(70 * var(--rate)));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    top: calc(425 * var(--rate));
    right: calc(25 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    -webkit-padding-start: calc(150 * var(--rate));
            padding-inline-start: calc(150 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel__shell:nth-child(4) {
    max-width: calc(948 * var(--rate));
    grid-template-rows: auto calc(45 * var(--rate)) calc(50 * var(--rate)) 1fr;
    -webkit-margin-before: calc(180 * var(--rate));
            margin-block-start: calc(180 * var(--rate));
    -webkit-padding-end: calc(32 * var(--rate));
            padding-inline-end: calc(32 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) {
    grid-row: 1/span 2;
    grid-template-columns: calc(220 * var(--rate)) calc(80 * var(--rate)) calc(460 * var(--rate));
    grid-template-rows: auto 1fr;
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    grid-column: 1/span 2;
    grid-row: 1;
    align-self: start;
    -webkit-padding-before: calc(225 * var(--rate));
            padding-block-start: calc(225 * var(--rate));
    z-index: 2;
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(47 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__stylingImages {
    grid-column: 2/span 2;
    grid-row: 1/span 2;
    z-index: 2;
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(1) .mainPanel__details {
    --letter-spacing: 0.05em;
    grid-column: 1/span 2;
    grid-row: 2;
    align-self: start;
    z-index: 2;
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) {
    grid-row: 2/span 3;
    grid-template-columns: calc(60 * var(--rate)) calc(400 * var(--rate)) 1fr;
    grid-template-rows: calc(45 * var(--rate)) calc(50 * var(--rate)) 1fr;
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    grid-column: 2;
    grid-row: 3;
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) .mainPanel__details {
    grid-column: 3;
    grid-row: 3;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-inline: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    right: calc(-33 * var(--rate));
  }
  .mainPanel__shell:nth-child(4) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    grid-column: 3;
    grid-row: 1;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    -webkit-padding-end: calc(18 * var(--rate));
            padding-inline-end: calc(18 * var(--rate));
  }
}
/* ========== main contents shell 5 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel__shell:nth-child(5) {
    -webkit-margin-before: calc(95 * var(--rate));
            margin-block-start: calc(95 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) {
    -webkit-padding-before: calc(246 * var(--rate));
            padding-block-start: calc(246 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    right: calc(40 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(107 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) .mainPanel__heading-text {
    -webkit-margin-before: calc(35 * var(--rate));
            margin-block-start: calc(35 * var(--rate));
    -webkit-margin-after: auto;
            margin-block-end: auto;
    -webkit-margin-start: calc(60 * var(--rate));
            margin-inline-start: calc(60 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) .mainPanel__notes {
    --notes-spacer: calc(22 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    -webkit-padding-end: calc(50 * var(--rate));
            padding-inline-end: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) .mainPanel__details {
    --details-gap: calc(50 * var(--rate));
    -webkit-padding-start: calc(150 * var(--rate));
            padding-inline-start: calc(150 * var(--rate));
    background-image: linear-gradient(to right, transparent calc(70 * var(--rate)), var(--theme-color) calc(70 * var(--rate)));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    top: calc(-60 * var(--rate));
    right: calc(10 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    -webkit-padding-start: calc(150 * var(--rate));
            padding-inline-start: calc(150 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel__shell:nth-child(5) {
    max-width: calc(910 * var(--rate));
    grid-template-rows: auto calc(30 * var(--rate)) 1fr;
    -webkit-margin-before: calc(200 * var(--rate));
            margin-block-start: calc(200 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) {
    grid-row: 1;
    grid-template-columns: calc(550 * var(--rate)) 1fr;
    grid-template-rows: auto 1fr;
    -moz-column-gap: calc(80 * var(--rate));
         column-gap: calc(80 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    -webkit-padding-before: calc(242 * var(--rate));
            padding-block-start: calc(242 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(44 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) .mainPanel__stylingImages {
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(1) .mainPanel__details {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) {
    grid-row: 3;
    grid-template-columns: calc(40 * var(--rate)) 1fr calc(480 * var(--rate)) calc(40 * var(--rate));
    grid-template-rows: calc(20 * var(--rate)) auto 1fr;
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages {
    grid-column: 3;
    grid-row: 2/span 2;
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) .mainPanel__details {
    grid-column: 2;
    grid-row: 2/span 2;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    /*width: fit-content;*/
    width: auto;
    padding-inline: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    left: calc(-30 * var(--rate));
  }
  .mainPanel__shell:nth-child(5) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    grid-column: 1/span 2;
    grid-row: 1;
  }
}
/* ========== main contents shell 6 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel__shell:nth-child(6) {
    -webkit-margin-before: calc(128 * var(--rate));
            margin-block-start: calc(128 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) {
    -webkit-padding-before: calc(190 * var(--rate));
            padding-block-start: calc(190 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    left: calc(94 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(104 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) .mainPanel__heading-text {
    -webkit-margin-after: calc(20 * var(--rate));
            margin-block-end: calc(20 * var(--rate));
    -webkit-margin-start: calc(120 * var(--rate));
            margin-inline-start: calc(120 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) {
    --cell-spacer: calc(68 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages:nth-child(1) {
    padding-inline: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages:nth-child(2) {
    -webkit-padding-start: calc(150 * var(--rate));
            padding-inline-start: calc(150 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__details {
    -webkit-padding-start: calc(150 * var(--rate));
            padding-inline-start: calc(150 * var(--rate));
    background-color: var(--theme-color);
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    bottom: calc(440 * var(--rate));
    left: calc(30 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    -webkit-padding-start: calc(150 * var(--rate));
            padding-inline-start: calc(150 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel__shell:nth-child(6) {
    max-width: calc(1070 * var(--rate));
    grid-template-rows: auto calc(396 * var(--rate)) 1fr;
    -webkit-margin-before: calc(200 * var(--rate));
            margin-block-start: calc(200 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) {
    grid-row: 1/span 2;
    grid-template-columns: calc(520 * var(--rate)) 1fr;
    grid-template-rows: auto 1fr;
    -moz-column-gap: calc(135 * var(--rate));
         column-gap: calc(135 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) .mainPanel__heading {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    -webkit-padding-before: calc(16 * var(--rate));
            padding-block-start: calc(16 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) .mainPanel__heading-num {
    width: calc(42 * var(--rate));
    -webkit-margin-start: calc(3 * var(--rate));
            margin-inline-start: calc(3 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) .mainPanel__stylingImages {
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(1) .mainPanel__details {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    -webkit-padding-end: calc(36 * var(--rate));
            padding-inline-end: calc(36 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) {
    grid-row: 2/span 2;
    grid-template-columns: 1fr calc(100 * var(--rate)) calc(300 * var(--rate)) calc(150 * var(--rate));
    grid-template-rows: calc(396 * var(--rate)) calc(30 * var(--rate)) auto auto calc(100 * var(--rate)) 1fr;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages:nth-child(1) {
    grid-column: 3/span 2;
    grid-row: 1/span 4;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__stylingImages:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 6;
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__details {
    grid-column: 1;
    grid-row: 6;
    align-self: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    padding-inline: calc(50 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__details dt {
    left: calc(-30 * var(--rate));
  }
  .mainPanel__shell:nth-child(6) .mainPanel__cell:nth-child(2) .mainPanel__prices {
    grid-column: 1;
    grid-row: 3;
  }
}
/* ========== footer */
.lp-footer__function {
  margin-inline: auto;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  letter-spacing: 0.025em;
}
.lp-footer__function-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-family: var(--font-en-sub-title);
  background-color: #fff;
  transform: translateY(-50%);
  line-height: 1;
}
.lp-footer__function-details, .lp-footer__function-detail {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lp-footer__function-detail-text {
  font-family: var(--font-en);
  line-height: 1;
}
.lp-footer__button {
  --display: grid;
  --text-align: center;
  place-items: center;
  margin-inline: auto;
  border: 1px solid #333;
  font-family: var(--font-en);
  letter-spacing: 0.025em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-footer {
    -webkit-margin-before: calc(213 * var(--rate));
            margin-block-start: calc(213 * var(--rate));
  }
  .lp-footer__function {
    -webkit-padding-after: calc(40 * var(--rate));
            padding-block-end: calc(40 * var(--rate));
  }
  .lp-footer__function-title {
    padding-inline: calc(20 * var(--rate));
    font-size: calc(32 * var(--rate));
  }
  .lp-footer__function-details {
    -webkit-margin-before: calc(23 * var(--rate));
            margin-block-start: calc(23 * var(--rate));
    -moz-column-gap: calc(40 * var(--rate));
         column-gap: calc(40 * var(--rate));
  }
  .lp-footer__function-detail {
    -moz-column-gap: calc(20 * var(--rate));
         column-gap: calc(20 * var(--rate));
  }
  .lp-footer__function-detail-icon {
    width: calc(60 * var(--rate));
  }
  .lp-footer__function-detail-text {
    font-size: calc(24 * var(--rate));
  }
  .lp-footer__button {
    width: calc(660 * var(--rate));
    height: calc(124 * var(--rate));
    -webkit-margin-before: calc(118 * var(--rate));
            margin-block-start: calc(118 * var(--rate));
    font-size: calc(22 * var(--rate));
    line-height: 1.5454545455;
    letter-spacing: 0.02em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-footer {
    -webkit-margin-before: calc(128 * var(--rate));
            margin-block-start: calc(128 * var(--rate));
  }
  .lp-footer__function {
    max-width: calc(1000 * var(--rate));
    -webkit-padding-after: calc(25 * var(--rate));
            padding-block-end: calc(25 * var(--rate));
  }
  .lp-footer__function-title {
    padding-inline: calc(20 * var(--rate));
    font-size: calc(18 * var(--rate));
  }
  .lp-footer__function-details {
    -moz-column-gap: calc(20 * var(--rate));
         column-gap: calc(20 * var(--rate));
    -webkit-margin-before: calc(15 * var(--rate));
            margin-block-start: calc(15 * var(--rate));
  }
  .lp-footer__function-detail {
    -moz-column-gap: calc(10 * var(--rate));
         column-gap: calc(10 * var(--rate));
  }
  .lp-footer__function-detail-icon {
    width: calc(32 * var(--rate));
  }
  .lp-footer__function-detail-text {
    font-size: calc(13 * var(--rate));
  }
  .lp-footer__button {
    width: calc(1016 * var(--rate));
    height: calc(64 * var(--rate));
    -webkit-margin-before: calc(58 * var(--rate));
            margin-block-start: calc(58 * var(--rate));
    font-size: calc(11 * var(--rate));
    line-height: 1.5454545455;
    letter-spacing: 0.025em;
  }
}
/* ========== animation */
.js-animation-trigger {
  opacity: 0;
  transition: all 1.2s;
}
.js-animation-trigger .mainPanel__heading-num {
  opacity: 0;
  transform: translateY(calc(30 * var(--rate)));
  transition: all 1.2s;
}
.js-animation-trigger.is-show {
  opacity: 1;
}
.js-animation-trigger.is-show .mainPanel__heading-num {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}
/*# sourceMappingURL=style.css.map */