@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(190 * 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__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__stylingImage + .mainPanel__prices {
    -webkit-margin-before: calc(50 * var(--rate));
            margin-block-start: calc(50 * var(--rate));
  }
  .mainPanel__description {
    line-height: 1.75;
  }
  .mainPanel__description + .mainPanel__prices {
    -webkit-margin-before: calc(50 * var(--rate) - 0.5em);
            margin-block-start: calc(50 * var(--rate) - 0.5em);
  }
}
/* --- 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(18 * var(--rate));
            margin-block-start: calc(18 * var(--rate));
    line-height: 1.7142857143;
  }
  .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(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
  .mainPanel__description {
    line-height: 1.8571428571;
  }
  .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.6em);
            margin-block-start: calc(100 * var(--rate) - 0.6em);
    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.8em);
            margin-block-start: calc(80 * var(--rate) - 0.8em);
    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.7em);
            margin-block-start: calc(160 * var(--rate) - 0.7em);
  }
  .mainPanel--styling-01 .mainPanel__shell {
    grid-template-rows: auto calc(50 * var(--rate) - 0.5em + 4 * var(--rate)) auto calc(70 * var(--rate) - 0.5em + 2 * var(--rate)) auto calc(120 * var(--rate) - 0.5em + 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;
    -webkit-padding-start: calc(45 * var(--rate));
            padding-inline-start: calc(45 * var(--rate));
    -webkit-padding-end: calc(105 * var(--rate));
            padding-inline-end: calc(105 * var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(5) {
    grid-row: 9;
    -webkit-padding-start: calc(225 * var(--rate));
            padding-inline-start: calc(225 * var(--rate));
    -webkit-padding-end: calc(45 * var(--rate));
            padding-inline-end: calc(45 * 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(160 * var(--rate) - 1em - 2px);
            margin-block-start: calc(160 * var(--rate) - 1em - 2px);
  }
  .mainPanel--styling-01 .mainPanel__shell {
    --row-width: 1000;
    grid-template-columns: calc(3 / var(--row-width) * 100%) calc(227 / var(--row-width) * 100%) calc(193 / var(--row-width) * 100%) calc(100 / var(--row-width) * 100%) calc(145 / var(--row-width) * 100%) calc(102 / var(--row-width) * 100%) calc(228 / var(--row-width) * 100%) calc(2 / var(--row-width) * 100%);
    grid-template-rows: auto calc(50 * var(--rate) - 1em) auto calc(100 * var(--rate)) calc(80 * var(--rate) - 0.5em) auto calc(110 * var(--rate) - 0.5em) 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: 3/span 4;
    grid-row: 3;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(3) {
    grid-column: 5/span 3;
    grid-row: 6;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(4) {
    grid-column: 2/span 2;
    grid-row: 5/span 4;
  }
  .mainPanel--styling-01 .mainPanel__column:nth-child(5) {
    grid-column: 6/span 2;
    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(55 * var(--rate) - 0.5em + 4 * var(--rate)) auto calc(50 * var(--rate)) auto calc(70 * var(--rate) - 0.5em) auto calc(120 * 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;
    -webkit-padding-start: calc(270 * var(--rate));
            padding-inline-start: calc(270 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(4) {
    grid-row: 7;
  }
  .mainPanel--styling-02 .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(150 * var(--rate));
            padding-inline-end: calc(150 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__leadNumber {
    width: calc(60 * var(--rate));
    transform: translateX(calc(14 * var(--rate)));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-02 {
    -webkit-margin-before: calc(120 * var(--rate));
            margin-block-start: calc(120 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__shell {
    --row-width: 1100;
    grid-template-columns: calc(105 / var(--row-width) * 100%) calc(405 / var(--row-width) * 100%) calc(80 / var(--row-width) * 100%) calc(160 / var(--row-width) * 100%) calc(245 / var(--row-width) * 100%) calc(85 / var(--row-width) * 100%) calc(20 / var(--row-width) * 100%);
    grid-template-rows: auto calc(55 * var(--rate)) calc(184 * var(--rate)) calc(205 * var(--rate)) auto auto;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) {
    grid-column: 4/span 3;
    grid-row: 1;
    align-self: center;
    -webkit-padding-after: calc(50 * var(--rate));
            padding-block-end: calc(50 * var(--rate));
    -webkit-padding-start: calc(50 * var(--rate));
            padding-inline-start: calc(50 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(3) {
    grid-column: 5/span 2;
    grid-row: 2/span 3;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(4) {
    grid-column: 4/span 3;
    grid-row: 6;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(5) {
    grid-column: 2;
    grid-row: 4/span 3;
  }
  .mainPanel--styling-02 .mainPanel__leadNumber {
    width: calc(45 * var(--rate));
    transform: translateX(calc(10 * var(--rate)));
  }
}
/* ========== styling 03 */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-03 {
    -webkit-margin-before: calc(var(--spacer) + 4 * var(--rate));
            margin-block-start: calc(var(--spacer) + 4 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__shell {
    grid-template-rows: auto calc(55 * var(--rate) - 0.5em - 2 * var(--rate)) auto calc(70 * var(--rate) - 0.5em + 2 * var(--rate)) auto calc(120 * 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-end: calc(225 * var(--rate));
            padding-inline-end: calc(225 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(5) {
    grid-row: 9;
    -webkit-padding-start: calc(140 * var(--rate));
            padding-inline-start: calc(140 * var(--rate));
    -webkit-padding-end: calc(45 * var(--rate));
            padding-inline-end: calc(45 * 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(180 * var(--rate));
            margin-block-start: calc(180 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__shell {
    --row-width: 1180;
    grid-template-columns: calc(70 / var(--row-width) * 100%) calc(190 / var(--row-width) * 100%) calc(185 / var(--row-width) * 100%) calc(165 / var(--row-width) * 100%) calc(55 / var(--row-width) * 100%) calc(80 / var(--row-width) * 100%) calc(345 / var(--row-width) * 100%) calc(90 / var(--row-width) * 100%);
    grid-template-rows: auto calc(145 * var(--rate)) calc(140 * var(--rate)) calc(215 * var(--rate)) auto auto;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(1) {
    grid-column: 2/span 2;
    grid-row: 1;
    align-self: center;
    -webkit-padding-after: calc(30 * var(--rate));
            padding-block-end: calc(30 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(2) {
    grid-column: 5/span 3;
    grid-row: 1/span 2;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(3) {
    grid-column: 2/span 4;
    grid-row: 6;
    text-align: right;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(3) .mainPanel__details {
    display: inline-block;
    text-align: left;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(4) {
    grid-column: 2/span 2;
    grid-row: 2/span 3;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(5) {
    grid-column: 7/span 2;
    grid-row: 4/span 3;
  }
  .mainPanel--styling-03 .mainPanel__leadNumber {
    width: calc(42 * var(--rate));
    transform: translateX(calc(14 * var(--rate)));
  }
}
/* ========== 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(42 * var(--rate));
            padding-block-end: calc(42 * var(--rate));
    text-align: center;
  }
  .introduction__details {
    -webkit-margin-before: calc(50 * var(--rate) - 0.5em);
            margin-block-start: calc(50 * var(--rate) - 0.5em);
    line-height: 1.9166666667;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .introduction {
    display: grid;
    --row-width: 660;
    max-width: calc(var(--row-width) * var(--rate));
    margin-inline: auto;
    grid-template-columns: calc(220 / var(--row-width) * 100%) calc(57 / var(--row-width) * 100%) auto;
    place-items: center;
  }
  .introduction__image {
    grid-column: 1;
  }
  .introduction__body {
    grid-column: 3;
    width: 100%;
    -webkit-padding-before: calc(6 * var(--rate));
            padding-block-start: calc(6 * 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(30 * var(--rate) - 0.5em);
            margin-block-start: calc(30 * 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;
}