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

Title : style.scss
For   : page/feature/240319_shirahata/

Created       : 2024-03-06
Last Modified : 2024-03-12

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

Content

////////////////////////////////////////////////// */
.lpStyling img,
.lpStyling a,
.lpStyling picture {
  display: var(--display, block);
}
.lpStyling img {
  width: 100%;
  height: auto;
  image-rendering: optimizequality;
}

:root {
  --design-size-lrg: 1400px;
  --design-gap-lrg: 130px;
  --container-fluid: 100%;
  --container-wide: calc(var(--design-size-lrg) - var(--design-gap-lrg) * 2);
  --color-dark: #000;
  --color-gray: #808080;
  --font-en: acumin-pro, sans-serif;
  --font-ja: "Hiragino Sans", "acumin-pro", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", hiragino-kaku-gothic-pron, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, sans-serif;
  --font-mix: acumin-pro, "Hiragino Sans", "acumin-pro", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", hiragino-kaku-gothic-pron, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, sans-serif;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .main-area .main-inner {
    width: 100%;
    padding: 0;
  }
  :root {
    --rate: 100vw / 750;
    --text-size-base: calc(22 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  :root {
    --rate: 1px;
    --text-size-base: calc(14 * var(--rate));
  }
}
/* ========== layout */
.lpStyling {
  -webkit-border-after: 1px solid var(--color-gray);
          border-block-end: 1px solid var(--color-gray);
  font-feature-settings: "palt";
  text-align: left;
}
.lpStyling * {
  font-size: var(--font-size, var(--text-size-base));
  font-weight: var(--font-weight, 300);
  letter-spacing: var(--letter-spacing, 0.1em);
  box-sizing: border-box;
}
.lpStyling__body {
  max-width: var(--container-wide);
  width: var(--container-fluid);
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .hidden-sml {
    display: none !important;
  }
  .lpStyling {
    -webkit-padding-before: calc(140 * var(--rate));
            padding-block-start: calc(140 * var(--rate));
    -webkit-padding-after: calc(130 * var(--rate));
            padding-block-end: calc(130 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .hidden-lrg {
    display: none !important;
  }
  .lpStyling {
    -webkit-padding-after: calc(130 * var(--rate));
            padding-block-end: calc(130 * var(--rate));
  }
}
/* ========== lead */
.lpStyling .lead {
  text-align: center;
}
.lpStyling .lead__text {
  --letter-spacing: .12em;
  font-family: var(--font-ja);
}
.lpStyling .lead__title {
  line-height: 1;
}
.lpStyling .lead__title > span {
  display: block;
}
.lpStyling .lead__title--sub {
  --letter-spacing: .05em;
  font-family: var(--font-en);
}
.lpStyling .lead__title--sub .ja {
  --letter-spacing: .1em;
  font-family: var(--font-ja);
}
.lpStyling .lead__title--main {
  --letter-spacing: 0;
  --font-weight: 700;
  font-family: var(--font-en);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lpStyling .lead__text {
    line-height: 2;
  }
  .lpStyling .lead__title {
    -webkit-margin-before: calc(100 * var(--rate));
            margin-block-start: calc(100 * var(--rate));
  }
  .lpStyling .lead__title--sub {
    --font-size: calc(32 * var(--rate));
  }
  .lpStyling .lead__title--sub .ja {
    --font-size: calc(28 * var(--rate));
  }
  .lpStyling .lead__title--main {
    --font-size: calc(72 * var(--rate));
    -webkit-margin-before: calc(34 * var(--rate));
            margin-block-start: calc(34 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lpStyling .lead__text {
    line-height: 2.1428571429;
  }
  .lpStyling .lead__title {
    -webkit-margin-before: calc(90 * var(--rate));
            margin-block-start: calc(90 * var(--rate));
  }
  .lpStyling .lead__title--sub {
    --font-size: calc(20 * var(--rate));
  }
  .lpStyling .lead__title--sub .ja {
    --font-size: calc(18 * var(--rate));
  }
  .lpStyling .lead__title--main {
    --font-size: calc(44 * var(--rate));
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
}
/* ========== common */
.mainPanel {
  margin-inline: auto;
}
.mainPanel + .mainPanel {
  -webkit-margin-before: var(--spacer);
          margin-block-start: var(--spacer);
}
.mainPanel__shell {
  display: grid;
  margin-inline: auto;
}
.mainPanel__column {
  position: relative;
}
.mainPanel__heading {
  --letter-spacing: 0;
  --font-weight: 700;
  font-family: var(--font-en);
  line-height: 1;
}
.mainPanel__description {
  font-family: var(--font-ja);
  line-height: 2;
}
.mainPanel__prices {
  --font-weight: 200;
  --letter-spacing: 0.05em;
  font-family: var(--font-mix);
}
.mainPanel__prices > a {
  --display: inline-block;
}
.mainPanel__prices > span {
  display: inline-block;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel {
    --spacer: var(--var-spacer, calc(150 * var(--rate)));
  }
  .mainPanel__heading {
    --font-size: calc(68 * var(--rate));
    -webkit-margin-after: var(--margin-block-end, calc(26 * var(--rate)));
            margin-block-end: var(--margin-block-end, calc(26 * var(--rate)));
  }
  .mainPanel__heading .num {
    --font-size: calc(72 * var(--rate));
  }
  .mainPanel__thumb + .mainPanel__details {
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
  }
  .mainPanel__description + .mainPanel__prices {
    -webkit-margin-before: calc(40 * var(--rate) - 1em);
            margin-block-start: calc(40 * var(--rate) - 1em);
  }
  .mainPanel__prices {
    line-height: 1.8181818182;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel {
    --spacer: var(--var-spacer, 140px);
  }
  .mainPanel__heading {
    --font-size: calc(48 * var(--rate));
    -webkit-margin-after: var(--margin-block-end, calc(28 * var(--rate)));
            margin-block-end: var(--margin-block-end, calc(28 * var(--rate)));
  }
  .mainPanel__heading .num {
    --font-size: calc(51 * var(--rate));
  }
  .mainPanel__thumb + .mainPanel__details {
    -webkit-margin-before: calc(32 * var(--rate));
            margin-block-start: calc(32 * var(--rate));
  }
  .mainPanel__description + .mainPanel__prices {
    -webkit-margin-before: calc(30 * var(--rate) - 1.2em);
            margin-block-start: calc(30 * var(--rate) - 1.2em);
  }
  .mainPanel__prices {
    line-height: 1.8571428571;
  }
}
/* ========== style 01 */
.mainPanel--style-01 .mainPanel__column:nth-child(1) .mainPanel__details {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--style-01 {
    --var-spacer: calc(80 * var(--rate));
  }
  .mainPanel--style-01 .mainPanel__shell {
    --row-width: 750;
    grid-template-columns: calc(370 / var(--row-width) * 100%) 1fr calc(370 / var(--row-width) * 100%);
    grid-template-rows: auto calc(70 * var(--rate) - 1em) auto calc(60 * var(--rate)) calc(60 * var(--rate)) auto auto calc(28 * var(--rate)) auto;
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(1) {
    grid-column: 1/span 3;
    grid-row: 1;
    width: 100%;
    padding-inline: calc(55 * var(--rate));
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(2) {
    grid-column: 1/span 3;
    grid-row: 3;
    justify-self: end;
    padding-inline: calc(55 * var(--rate));
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(3) {
    grid-column: 1;
    grid-row: 5/span 3;
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(4) {
    grid-column: 3;
    grid-row: 6/span 2;
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(5) {
    grid-column: 1/span 3;
    grid-row: 9;
    padding-inline: calc(40 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--style-01 {
    --var-spacer: 98px;
  }
  .mainPanel--style-01 .mainPanel__shell {
    --row-width: 680;
    --row-gap: 30;
    max-width: calc(var(--row-width) * var(--rate));
    grid-template-columns: calc(110 / var(--row-width) * 100%) calc(220 / var(--row-width) * 100%) 1fr calc(220 / var(--row-width) * 100%) calc(110 / var(--row-width) * 100%);
    grid-template-rows: auto calc((var(--row-gap) * 2 - 10) * var(--rate)) auto calc((var(--row-gap) * 2 - 6) * var(--rate)) auto auto calc((var(--row-gap) - 8) * var(--rate)) auto;
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(1) {
    grid-column: 2/span 3;
    grid-row: 1;
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(2) {
    grid-column: 4/span 3;
    grid-row: 3;
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 5/span 2;
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(4) {
    grid-column: 4/span 2;
    grid-row: 5/span 4;
    align-self: end;
  }
  .mainPanel--style-01 .mainPanel__column:nth-child(5) {
    grid-column: 1/span 2;
    grid-row: 8;
  }
}
/* ========== style 02 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--style-02 .mainPanel__heading {
    --margin-block-end: calc(64 * var(--rate));
    padding-inline: calc(40 * var(--rate));
  }
  .mainPanel--style-02 .mainPanel__shell {
    grid-template-columns: 100%;
    row-gap: calc(50 * var(--rate));
  }
  .mainPanel--style-02 .mainPanel__column:nth-child(1) {
    order: 2;
  }
  .mainPanel--style-02 .mainPanel__column:nth-child(2) {
    order: 1;
    -webkit-padding-start: calc(230 * var(--rate));
            padding-inline-start: calc(230 * var(--rate));
    -webkit-padding-end: calc(40 * var(--rate));
            padding-inline-end: calc(40 * var(--rate));
  }
  .mainPanel--style-02 .mainPanel__column:nth-child(3) {
    order: 3;
    -webkit-padding-before: calc(10 * var(--rate));
            padding-block-start: calc(10 * var(--rate));
    padding-inline: calc(40 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--style-02 .mainPanel__heading {
    --margin-block-end: calc(26 * var(--rate));
  }
  .mainPanel--style-02 .mainPanel__shell {
    --row-width: 900;
    max-width: calc(var(--row-width) * 1px);
    grid-template-columns: calc(480 / var(--row-width) * 100%) 1fr calc(350 / var(--row-width) * 100%);
    row-gap: calc(74 * var(--rate));
  }
  .mainPanel--style-02 .mainPanel__column:nth-child(1) {
    grid-column: 1;
    grid-row: span 2;
    align-self: end;
  }
  .mainPanel--style-02 .mainPanel__column:nth-child(2) {
    grid-column: 3;
  }
  .mainPanel--style-02 .mainPanel__column:nth-child(3) {
    grid-column: 3;
    -webkit-padding-after: calc(75 * var(--rate));
            padding-block-end: calc(75 * var(--rate));
  }
}
/* ========== style 03 */
.mainPanel--style-03 .mainPanel__heading {
  text-align: center;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--style-03 {
    --var-spacer: calc(134 * var(--rate));
  }
  .mainPanel--style-03 .mainPanel__heading {
    --margin-block-end: calc(36 * var(--rate));
  }
  .mainPanel--style-03 .mainPanel__shell {
    row-gap: calc(60 * var(--rate));
  }
  .mainPanel--style-03 .mainPanel__column:nth-child(1) {
    padding-inline: calc(55 * var(--rate));
  }
  .mainPanel--style-03 .mainPanel__column:nth-child(2) {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
    padding-inline: calc(140 * var(--rate));
  }
  .mainPanel--style-03 .mainPanel__column:nth-child(3) {
    padding-inline: calc(85 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--style-03 {
    --var-spacer: 130px;
  }
  .mainPanel--style-03 .mainPanel__heading {
    --margin-block-end: calc(26 * var(--rate));
  }
  .mainPanel--style-03 .mainPanel__shell {
    --row-width: 800;
    max-width: calc(var(--row-width) * 1px);
    grid-template-columns: calc(370 / var(--row-width) * 100%) 1fr calc(350 / var(--row-width) * 100%);
    place-items: center;
    row-gap: calc(60 * var(--rate));
  }
  .mainPanel--style-03 .mainPanel__column:nth-child(1) {
    grid-column: span 3;
    order: 1;
    width: calc(480 / var(--row-width) * 100%);
  }
  .mainPanel--style-03 .mainPanel__column:nth-child(2) {
    grid-column: 3;
    order: 3;
  }
  .mainPanel--style-03 .mainPanel__column:nth-child(3) {
    grid-column: 1;
    order: 2;
    -webkit-padding-after: calc(8 * var(--rate));
            padding-block-end: calc(8 * var(--rate));
  }
}
/* ========== style 04 */
.mainPanel--style-04 .mainPanel__column:nth-child(1) .mainPanel__details {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--style-04 .mainPanel__shell {
    --row-width: 750;
    grid-template-columns: calc(210 / var(--row-width) * 100%) 1fr calc(350 / var(--row-width) * 100%);
    grid-template-rows: auto calc(50 * var(--rate)) auto calc(56 * var(--rate)) calc(350 * var(--rate)) auto auto calc(30 * var(--rate)) auto;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(1) {
    grid-column: span 3;
    grid-row: 1;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 3;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 5/span 2;
    z-index: 1;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(4) {
    grid-column: 2/span 2;
    grid-row: 6/span 2;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(5) {
    grid-column: 2/span 2;
    grid-row: 9;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--style-04 .mainPanel__shell {
    --row-width: 1000;
    max-width: calc(var(--row-width) * 1px);
    grid-template-columns: calc(240 / var(--row-width) * 100%) calc(80 / var(--row-width) * 100%) calc(20 / var(--row-width) * 100%) calc(190 / var(--row-width) * 100%) calc(160 / var(--row-width) * 100%) calc(30 / var(--row-width) * 100%) calc(40 / var(--row-width) * 100%) 1fr;
    grid-template-rows: auto calc(50 * var(--rate)) calc(86 * var(--rate)) auto calc(94 * var(--rate)) auto calc(200 * var(--rate));
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(1) {
    grid-column: 2/span 6;
    grid-row: 1;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(2) {
    grid-column: 5/span 4;
    grid-row: 3/span 2;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 4/span 3;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(4) {
    grid-column: 4/span 2;
    grid-row: 6/span 2;
  }
  .mainPanel--style-04 .mainPanel__column:nth-child(5) {
    grid-column: 7/span 2;
    grid-row: 7;
    align-self: end;
  }
}
/* ========== style 05 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--style-05 .mainPanel__shell {
    grid-template-columns: 100%;
    row-gap: calc(50 * var(--rate));
  }
  .mainPanel--style-05 .mainPanel__column:nth-child(1) {
    -webkit-padding-start: calc(70 * var(--rate));
            padding-inline-start: calc(70 * var(--rate));
    -webkit-padding-end: calc(120 * var(--rate));
            padding-inline-end: calc(120 * var(--rate));
  }
  .mainPanel--style-05 .mainPanel__column:nth-child(2) {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
    -webkit-padding-start: calc(210 * var(--rate));
            padding-inline-start: calc(210 * var(--rate));
  }
  .mainPanel--style-05 .mainPanel__column:nth-child(3) {
    padding-inline: calc(40 * var(--rate));
  }
  .mainPanel--style-05 .mainPanel__column:nth-child(4) {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
    padding-inline: calc(40 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--style-05 .mainPanel__shell {
    --row-width: 1060;
    max-width: calc(var(--row-width) * 1px);
    grid-template-columns: calc(480 / var(--row-width) * 100%) 1fr calc(410 / var(--row-width) * 100%);
  }
  .mainPanel--style-05 .mainPanel__column:nth-child(1) {
    grid-column: 3;
    -webkit-padding-end: calc(10 * var(--rate));
            padding-inline-end: calc(10 * var(--rate));
  }
  .mainPanel--style-05 .mainPanel__column:nth-child(2) {
    grid-column: 1;
    grid-row: 1/3;
    align-self: end;
  }
  .mainPanel--style-05 .mainPanel__column:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
    -webkit-margin-before: calc(46 * var(--rate));
            margin-block-start: calc(46 * var(--rate));
  }
  .mainPanel--style-05 .mainPanel__column:nth-child(4) {
    grid-column: span 3;
    justify-self: center;
    width: calc(480 / var(--row-width) * 100%);
    -webkit-margin-before: calc(100 * var(--rate));
            margin-block-start: calc(100 * var(--rate));
  }
  .mainPanel--style-05 .mainPanel__heading {
    --margin-block-end: calc(30 * var(--rate));
  }
}
/* ========== style 06 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--style-06 {
    --var-spacer: calc(140 * var(--rate));
  }
  .mainPanel--style-06 .mainPanel__heading {
    --margin-block-end: calc(40 * var(--rate));
  }
  .mainPanel--style-06 .mainPanel__shell {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto calc(60 * var(--rate)) auto calc(60 * var(--rate)) auto calc(26 * var(--rate)) auto;
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1;
    -webkit-padding-start: calc(40 * var(--rate));
            padding-inline-start: calc(40 * var(--rate));
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 2;
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(3) {
    grid-column: span 2;
    grid-row: 4;
    padding-inline: calc(40 * var(--rate));
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(4) {
    grid-row: 6;
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(5) {
    grid-row: 6;
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(6) {
    grid-column: span 2;
    grid-row: 8;
    -webkit-padding-after: calc(10 * var(--rate));
            padding-block-end: calc(10 * var(--rate));
    padding-inline: calc(40 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--style-06 .mainPanel__shell {
    --row-width: 1140;
    --gap: 30;
    max-width: calc(var(--row-width) * 1px);
    grid-template-columns: calc(70 / var(--row-width) * 100%) calc(340 / var(--row-width) * 100%) calc(30 / var(--row-width) * 100%) calc(110 / var(--row-width) * 100%) calc(100 / var(--row-width) * 100%) calc(140 / var(--row-width) * 100%) calc(350 / var(--row-width) * 100%);
    grid-template-rows: auto auto calc(100 * var(--rate)) auto;
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(1) {
    grid-column: 6/span 2;
    grid-row: 1;
    align-self: end;
    -webkit-padding-after: calc(var(--gap) / 2 * var(--rate));
            padding-block-end: calc(var(--gap) / 2 * var(--rate));
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(2) {
    grid-column: 2/span 3;
    grid-row: 1/span 2;
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(3) {
    grid-column: 6/span 2;
    grid-row: 2;
    -webkit-padding-before: calc(var(--gap) / 2 * var(--rate));
            padding-block-start: calc(var(--gap) / 2 * var(--rate));
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(4) {
    grid-column: 4/span 3;
    grid-row: 4;
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(5) {
    grid-column: 7;
    grid-row: 4;
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(6) {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    -webkit-padding-start: calc(18 * var(--rate));
            padding-inline-start: calc(18 * var(--rate));
  }
  .mainPanel--style-06 .mainPanel__column:nth-child(6) .mainPanel__details {
    transform: translateY(0.25em);
    text-align: justify;
  }
  .mainPanel--style-06 .mainPanel__heading {
    --margin-block-end: 0;
  }
}
/* ========== favorite */
.mainPanel--favorite {
  text-align: center;
}
.mainPanel--favorite .mainPanel__shell {
  grid-template-columns: 100%;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--favorite .mainPanel__heading {
    --margin-block-end: calc(30 * var(--rate)) ;
  }
  .mainPanel--favorite .mainPanel__thumb {
    padding-inline: calc(115 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--favorite {
    --var-spacer: calc(130 * var(--rate));
  }
  .mainPanel--favorite .mainPanel__shell {
    --row-width: 370;
    max-width: calc(var(--row-width) * var(--rate));
  }
}
/* ========== button */
.mainPanel--button {
  text-align: center;
}
.mainPanel--button .lpStyling__button {
  margin-inline: auto;
}
.mainPanel--button .caption {
  --font-weight: 300;
  --letter-spacing: 0.05em;
  font-family: var(--font-en);
  line-height: 1;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--button {
    --var-spacer: calc(120 * var(--rate));
  }
  .mainPanel--button .lpStyling__button {
    width: calc(480 * var(--rate));
  }
  .mainPanel--button .caption {
    --font-size: calc(22 * var(--rate));
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--button {
    --var-spacer: calc(122 * var(--rate));
  }
  .mainPanel--button .lpStyling__button {
    width: calc(460 * var(--rate));
  }
  .mainPanel--button .caption {
    --font-size: calc(14 * var(--rate));
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
}
/* ========== introduction / archive */
.mainPanel dl {
  text-align: center;
}
.mainPanel dl dt {
  --font-weight: 600;
  --letter-spacing: 0.01em;
  font-family: var(--font-family, var(--font-en));
  line-height: 1;
}
.mainPanel dl dt span {
  display: block;
}
.mainPanel dl dt .ja {
  --font-family: var(--font-ja);
  --letter-spacing: 0.12em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel dl {
    padding-inline: calc(50 * var(--rate));
  }
  .mainPanel dl dt {
    --font-size: calc(36 * var(--rate));
  }
  .mainPanel dl dt .ja {
    --font-size: calc(28 * var(--rate));
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel dl dt {
    --font-size: calc(28 * var(--rate));
  }
  .mainPanel dl dt .en {
    -webkit-padding-end: 0.75em;
            padding-inline-end: 0.75em;
  }
  .mainPanel dl dt .ja {
    --font-size: calc(22 * var(--rate));
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
  }
}
/* ========== introduction */
.mainPanel--introduction .introduction__details {
  --letter-spacing: 0.12em;
}
.mainPanel--introduction .introduction__details a {
  display: inline-block;
}
.mainPanel--introduction .introduction__instagramIcon {
  margin-inline: auto;
}
.mainPanel--introduction .introduction__instagramAccountName {
  --letter-spacing: 0;
  font-family: var(--font-en);
}
.mainPanel--introduction .introduction__detail {
  font-family: var(--font-ja);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--introduction {
    --var-spacer: calc(170 * var(--rate));
  }
  .mainPanel--introduction .introduction__details {
    -webkit-margin-before: calc(65 * var(--rate));
            margin-block-start: calc(65 * var(--rate));
  }
  .mainPanel--introduction .introduction__instagramIcon {
    width: calc(75 * var(--rate));
  }
  .mainPanel--introduction .introduction__instagramAccountName {
    --font-size: calc(25 * var(--rate));
    -webkit-margin-before: calc(18 * var(--rate));
            margin-block-start: calc(18 * var(--rate));
  }
  .mainPanel--introduction .introduction__detail {
    -webkit-margin-before: calc(70 * var(--rate));
            margin-block-start: calc(70 * var(--rate));
    line-height: 2;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--introduction {
    --var-spacer: calc(155 * var(--rate));
  }
  .mainPanel--introduction .introduction__details {
    -webkit-margin-before: calc(50 * var(--rate));
            margin-block-start: calc(50 * var(--rate));
  }
  .mainPanel--introduction .introduction__instagramIcon {
    width: calc(45 * var(--rate));
  }
  .mainPanel--introduction .introduction__instagramAccountName {
    --font-size: calc(18 * var(--rate));
    -webkit-margin-before: calc(6 * var(--rate));
            margin-block-start: calc(6 * var(--rate));
  }
  .mainPanel--introduction .introduction__detail {
    -webkit-margin-before: calc(50 * var(--rate));
            margin-block-start: calc(50 * var(--rate));
    line-height: 2.1428571429;
  }
}
/* ========== archive */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--archive .archive__thumb {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--archive {
    --var-spacer: calc(124 * var(--rate));
    max-width: calc(560 * var(--rate));
  }
  .mainPanel--archive .archive__thumb {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
}
/* ========== animation */
.lpStyling .js-fadeIn {
  opacity: 0;
  visibility: hidden;
  transition: all 2s;
}
.lpStyling .js-fadeIn.is-show {
  opacity: 1;
  visibility: visible;
}
.lpStyling .js-scrollIn {
  overflow: hidden;
}
.lpStyling .js-scrollIn > span {
  display: block;
  transition: all 1s;
  transform: translateY(100%);
}
.lpStyling .js-scrollIn.is-show span {
  transform: translateY(0);
}
.lpStyling .anim-fadeIn {
  opacity: 0;
  visibility: hidden;
  -webkit-animation: fade-in 2s ease forwards;
          animation: fade-in 2s ease forwards;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
/* --- for small viewport --- */
/* --- for large viewport --- */