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

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

Created       : 2024-03-08
Last Modified : 2024-03-15

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

Content

////////////////////////////////////////////////// */
/* ========== reset styles */
.article picture {
  display: block;
}
.article img {
  width: 100%;
  height: auto;
}

/* ========== varables */
:root {
  --container-fluid: 100%;
  --container-wide: 1200px;
  --color-light: #fff;
  --color-dim: #b7b7b7;
  --color-dark: #000;
  --font-en: "neue-haas-grotesk-display", sans-serif;
  --font-ja-san-serif: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --font-ja-serif: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  --font-ja-gothic: "dnp-shuei-gothic-gin-std", sans-serif;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  :root {
    --rate: 100vw / 750;
    --spacer: var(--var-spacer, calc(200 * var(--rate)));
    --text-size-heading: calc(34 * var(--rate));
    --text-size-base: calc(24 * var(--rate));
    --text-size-sml: calc(24 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  :root {
    --rate: 1px;
    --spacer: var(--var-spacer, calc(150 * var(--rate)));
    --text-size-heading: calc(21 * var(--rate));
    --text-size-base: calc(14 * var(--rate));
    --text-size-sml: calc(13 * var(--rate));
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 767px) and (max-width: 960px) {
  :root {
    --text-size-heading: calc(18 * var(--rate));
    --text-size-base: calc(12 * var(--rate));
    --text-size-sml: calc(11 * var(--rate));
  }
}
/* ========== layout / common */
.article__body {
  max-width: var(--container-wide);
  width: var(--container-fluid);
  margin-inline: auto;
}
.article * {
  font-family: var(--font-family, var(--font-ja-san-serif));
  font-size: var(--font-size, var(--text-size-base));
  letter-spacing: var(--letter-spacing, 0);
  box-sizing: border-box;
}

.mainPanel__shell {
  display: grid;
  margin-inline: auto;
}
.mainPanel__leadNumber {
  margin-inline: auto;
}
.mainPanel__leadDetails {
  --font-size: var(--text-size-heading);
  --font-family: var(--font-ja-serif);
  font-feature-settings: "halt";
}
.mainPanel__leadNotes {
  letter-spacing: 0.01em;
  text-decoration: underline;
}
.mainPanel__prices {
  --font-size: var(--text-size-sml);
  --font-family: var(--font-en);
  --letter-spacing: 0.025em;
  line-height: 1;
  font-weight: 500;
}
.mainPanel__prices > * + * {
  display: inline-block;
  -webkit-margin-start: 0.25em;
          margin-inline-start: 0.25em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .hidden-sml {
    display: none !important;
  }
  .footer {
    -webkit-padding-before: calc(192 * var(--rate));
            padding-block-start: calc(192 * var(--rate));
  }
  .main-area.lp .archive-area {
    --archive-space: calc(186 * var(--rate));
  }
  .article * {
    text-align: var(--text-align, center);
  }
  .mainPanel__shell {
    grid-template-columns: 100%;
  }
  .mainPanel__leadDetails {
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
    line-height: 1.6176470588;
  }
  .mainPanel--styling-01 .mainPanel__leadDetails {
    -webkit-margin-before: calc(24 * var(--rate));
            margin-block-start: calc(24 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__leadDetails {
    -webkit-margin-before: calc(22.5 * var(--rate));
            margin-block-start: calc(22.5 * var(--rate));
  }
  .mainPanel__leadNotes {
    --font-size: calc(27 * var(--rate));
    -webkit-margin-before: calc(44 * var(--rate) - 1em);
            margin-block-start: calc(44 * var(--rate) - 1em);
    line-height: 1.9259259259;
  }
  .mainPanel__prices {
    -webkit-margin-before: calc(50 * var(--rate));
            margin-block-start: calc(50 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__prices {
    -webkit-margin-before: calc(46.5 * var(--rate));
            margin-block-start: calc(46.5 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__prices {
    -webkit-margin-before: calc(35.5 * var(--rate));
            margin-block-start: calc(35.5 * var(--rate));
  }
  .mainPanel__description {
    line-height: 1.755;
    font-feature-settings: "halt";
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .hidden-lrg {
    display: none !important;
  }
  .footer {
    padding-top: calc(277 * var(--rate));
  }
  /*.article {
    -webkit-padding-after: 5px;
            padding-block-end: 5px;
  }*/
  .mainPanel__shell {
    max-width: calc(var(--row-width) * var(--rate));
  }
  .mainPanel__lead {
    text-align: center;
  }
  .mainPanel__leadDetails {
    -webkit-margin-before: calc(19 * var(--rate));
    margin-block-start: calc(19* var(--rate));
    line-height: 1.65;
    font-size: 2.3rem;
    white-space: nowrap;
  }
  .mainPanel__leadNotes {
    --font-size: calc(17 * var(--rate));
    -webkit-margin-before: calc(35 * var(--rate) - 1em);
            margin-block-start: calc(35 * var(--rate) - 1em);
    line-height: 2;
  }
  .mainPanel__stylingImage + .mainPanel__prices {
    -webkit-margin-before: calc(28.5 * var(--rate));
    margin-block-start: calc(28.5* var(--rate));
    text-align: end;
    letter-spacing: 0.02em;
  }
  .mainPanel__description {
    line-height: 1.8571428571;
    white-space: nowrap;
  }
  .mainPanel__description + .mainPanel__prices {
    -webkit-margin-before: calc(30 * var(--rate) - 0.5em);
            margin-block-start: calc(30 * var(--rate) - 0.5em);
  }
}
/* ========== hero */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .hero__lead {
    -webkit-margin-before: calc(100 * var(--rate) - 0.66em);
            margin-block-start: calc(100 * var(--rate) - 0.66em);
    line-height: 2.3333333333;
    font-feature-settings: "palt";
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .hero {
    text-align: center;
  }
  .hero__lead {
    --font-size: calc(15 * var(--rate));
    -webkit-margin-before: calc(80 * var(--rate) - 0.85em);
            margin-block-start: calc(80 * var(--rate) - 0.85em);
    line-height: 2.9333333333;
  }
}
/* ========== styling 01 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-01 {
    -webkit-margin-before: calc(160* var(--rate) - 0.68em);
    margin-block-start: calc(160* var(--rate) - 0.68em);
  }
  .mainPanel--styling-01 .mainPanel__shell {
    grid-template-rows: auto calc(42.5 * var(--rate)) auto calc(60.5 * var(--rate)) auto calc(120 * var(--rate) - 0.6em + 4 * var(--rate)) auto calc(90 * var(--rate)) auto;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(1) {
    grid-row: 1;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(2) {
    grid-row: 3;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(3) {
    grid-row: 5;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(4) {
    grid-row: 7;
    width: calc(630*(100vw / 750));
    margin: 0 auto;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(5) {
    grid-row: 9;
    -webkit-padding-start: calc(210 * var(--rate));
            padding-inline-start: calc(210 * var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__leadNumber {
    width: calc(55 * var(--rate));
    transform: translateX(calc(16 * var(--rate)));
  }
  .mainPanel--styling-01 .mainPanel__prices {
    --text-align: left;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-01 {
    -webkit-margin-before: calc(146* var(--rate));
    margin-block-start: calc(146* var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__shell {
    --row-width: 1020;
    grid-template-columns: calc(5 / var(--row-width) * 100%) calc(62.5 / var(--row-width) * 100%) calc(187.5 / var(--row-width) * 100%) calc(157.5 / var(--row-width) * 100%) calc(167.5 / var(--row-width) * 100%) calc(185 / var(--row-width) * 100%) calc(250 / var(--row-width) * 100%) calc(5 / var(--row-width) * 100%);
    grid-template-rows: auto calc(35.5 * var(--rate)) auto calc(100 * var(--rate)) calc(94 * var(--rate)) auto calc(147 * var(--rate)) auto auto;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(1) {
    grid-column: 1/span 9;
    grid-row: 1;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(2) {
    grid-column: 4 / 7;
    grid-row: 3;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(3) {
    grid-column: 2 / 6;
    grid-row: 6;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(4) {
    grid-column: 6 / 8;
    grid-row: 5/span 4;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(5) {
    grid-column: 3 / 5;
    grid-row: 8;
  }
  .mainPanel--styling-01 .mainPanel__leadNumber {
    width: calc(40 * var(--rate));
    transform: translateX(calc(14 * var(--rate)));
  }
}
/* ========== styling 02 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-02 {
    -webkit-margin-before: var(--spacer);
            margin-block-start: var(--spacer);
  }
  .mainPanel--styling-02 .mainPanel__shell {
    grid-template-rows: auto calc(50* var(--rate) - 0.5em + 4.5* var(--rate)) auto calc(61* var(--rate)) auto calc(109.5* var(--rate)) auto calc(91.5* var(--rate)) auto;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) {
    grid-row: 1;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(2) {
    grid-row: 3;
    padding-inline: calc(45 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(3) {
    grid-row: 5;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(4) {
    grid-row: 7;
    -webkit-padding-end: calc(150 * var(--rate));
    padding-inline-end: calc(150 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(5) {
    grid-row: 9;
    -webkit-padding-start: calc(210 * var(--rate));
            padding-inline-start: calc(210 * var(--rate));
    -webkit-padding-end: calc(45 * var(--rate));
            padding-inline-end: calc(45 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__leadNumber {
    width: calc(63* var(--rate));
    transform: translateX(calc(14* var(--rate)));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-02 {
    -webkit-margin-before: calc(130 * var(--rate));
            margin-block-start: calc(130 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__shell {
    --row-width: 1040;
    grid-template-columns: calc(20 / var(--row-width) * 100%) calc(10 / var(--row-width) * 100%) calc(205 / var(--row-width) * 100%) calc(185 / var(--row-width) * 100%) calc(10 / var(--row-width) * 100%) calc(160 / var(--row-width) * 100%) calc(74.5 / var(--row-width) * 100%) calc(300 / var(--row-width) * 100%) auto;
    grid-template-rows: auto calc(134 * var(--rate)) calc(259 * var(--rate)) calc(215 * var(--rate))  calc(35 * var(--rate))  auto;
    position: relative;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) {
    grid-column: 2 / span 4;
    grid-row: 1;
    align-self: center;
    -webkit-padding-after: calc(12.5 * var(--rate));
    padding-block-end: calc(12.5 * var(--rate));
    -webkit-padding-end: calc(5* var(--rate));
    padding-inline-end: calc(5* var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(2) {
    grid-column: 7 / span 3;
    grid-row: 1 / span 2;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(3) {
    grid-column: 4 / span 3;
    grid-row: 6;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(3) .mainPanel__details {
    display: inline-block;
    text-align: left;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(4) {
    grid-column: 3 / span 2;
    grid-row: 2/span 3;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(5) {
    grid-column: 8;
    grid-row: 4/span 3;
  }
  .mainPanel--styling-02 .mainPanel__leadNumber {
    width: calc(42 * var(--rate));
    transform: translateX(calc(14 * var(--rate)));
  }
  .mainPanel--styling-02 .mainPanel__leadDetails {
    -webkit-margin-before: calc(20.5 * var(--rate));
    margin-block-start: calc(20.5 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__prices {
    position: absolute;
    right: 0;
    bottom: 62.35rem;
  }
}

/* ========== styling 03 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-03 {
    -webkit-margin-before: var(--spacer);
            margin-block-start: var(--spacer);
  }
  .mainPanel--styling-03 .mainPanel__shell {
    grid-template-rows: auto calc(55 * var(--rate) - 0.5em - 1 * var(--rate)) auto calc(70 * var(--rate) - 0.5em + 3 * var(--rate)) auto calc(121.5 * var(--rate)) auto calc(50 * var(--rate)) auto;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(1) {
    grid-row: 1;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(2) {
    grid-row: 3;
    padding-inline: calc(45 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(3) {
    grid-row: 5;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(4) {
    grid-row: 7;
    -webkit-padding-start: calc(195 * var(--rate));
            padding-inline-start: calc(195 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(5) {
    grid-row: 9;
    -webkit-padding-start: calc(45 * var(--rate));
            padding-inline-start: calc(45 * var(--rate));
    -webkit-padding-end: calc(240 * var(--rate));
            padding-inline-end: calc(240 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__leadNumber {
    width: calc(60 * var(--rate));
    transform: translateX(calc(14 * var(--rate)));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-03 {
    -webkit-margin-before: calc(174 * var(--rate));
            margin-block-start: calc(174 * var(--rate));
    position: relative;
  }
  .mainPanel--styling-03 .mainPanel__shell {
    --row-width: 1070;
    grid-template-columns: calc(25 / var(--row-width) * 100%) calc(320 / var(--row-width) * 100%) calc(160 / var(--row-width) * 100%) calc(111 / var(--row-width) * 100%) calc(14 / var(--row-width) * 100%) calc(80 / var(--row-width) * 100%) calc(310 / var(--row-width) * 100%) auto;
    grid-template-rows: calc(298.5 * var(--rate)) calc(176.5 * var(--rate)) calc(205 * var(--rate)) calc(260 * var(--rate)) auto;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(1) {
    grid-column: 6 / span 2;
    grid-row: 1;
    align-self: center;
    -webkit-padding-before: calc(70* var(--rate));
    padding-block-start: calc(70* var(--rate));
    -webkit-padding-end: calc(15* var(--rate));
    padding-inline-end: calc(15* var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 1/span 2;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(3) {
    grid-column: 5 / span 3;
    grid-row: 2 / span 3;
    text-align: center;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(4) {
    grid-column: 7 / span 3;
    grid-row: 4;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(5) {
    grid-column: 3 / span 3;
    grid-row: 5;
  }
  .mainPanel--styling-03 .mainPanel__leadNumber {
    width: calc(43 * var(--rate));
    transform: translateX(calc(10 * var(--rate)));
  }
  .mainPanel--styling-03 .mainPanel__prices {
    position: absolute;
    top: 64.5rem;
    left: 9rem;
}
}
/* ========== button */
.articleButton {
  --letter-spacing: 0.06em;
  display: grid;
  place-items: center;
  -webkit-margin-before: var(--spacer);
          margin-block-start: var(--spacer);
  margin-inline: auto;
  border: 1px solid var(--color-dark);
  background-color: var(--color-light);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .articleButton {
    --font-size: calc(28 * var(--rate));
    width: calc(675 * var(--rate));
    height: calc(120 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .articleButton {
    --font-size: calc(18 * var(--rate));
    width: calc(380 * var(--rate));
    height: calc(64 * var(--rate));
  }
}
/* ========== introduction */
.introduction {
  -webkit-margin-before: var(--spacer);
          margin-block-start: var(--spacer);
}
.introduction__title {
  --font-family: var(--font-ja-serif);
  --letter-spacing: 0.02em;
  -webkit-border-after: 1px solid var(--color-dark);
          border-block-end: 1px solid var(--color-dark);
  line-height: 1;
}
.introduction__details {
  --font-family: var(--font-ja-gothic);
  --letter-spacing: 0.09em;
  font-feature-settings: "palt";
}
.introduction__details a {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-dim);
          text-decoration-color: var(--color-dim);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .introduction {
    padding-inline: calc(50 * var(--rate));
  }
  .introduction__image {
    padding-inline: calc(130 * var(--rate));
  }
  .introduction__title {
    --font-size: calc(47 * var(--rate));
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
    -webkit-padding-after: calc(44 * var(--rate));
            padding-block-end: calc(44 * var(--rate));
    text-align: center;
    letter-spacing: 0;
  }
  .introduction__details {
    -webkit-margin-before: calc(51.5 * var(--rate) - 0.5em);
            margin-block-start: calc(51.5 * var(--rate) - 0.5em);
    line-height: 1.9166666667;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .introduction {
    display: grid;
    --row-width: 686;
    max-width: calc(var(--row-width)* var(--rate));
    margin-inline: auto;
    grid-template-columns: calc(247 / var(--row-width)* 100%) calc(57 / var(--row-width)* 100%) auto;
    place-items: center;
    -webkit-margin-before: 14.5rem;
    margin-block-start: 14.5rem;
  }
  .introduction__image {
    grid-column: 1;
  }
  .introduction__body {
    grid-column: 3;
    width: 100%;
    -webkit-padding-before: calc(5.5* var(--rate));
    padding-block-start: calc(5.5* var(--rate));
}
  .introduction__title {
    --font-size: calc(26 * var(--rate));
    -webkit-padding-after: calc(14 * var(--rate));
            padding-block-end: calc(14 * var(--rate));
  }
  .introduction__details {
    -webkit-margin-before: calc(31 * var(--rate) - 0.5em);
    margin-block-start: calc(31 * var(--rate) - 0.5em);
    line-height: 1.9285714286;
  }
}
/* ========== animation */
.js-fadeIn {
  opacity: 0;
  visibility: hidden;
  transition: all 3s;
}
.js-fadeIn.is-show {
  opacity: 1;
  visibility: visible;
}