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

Title : style.scss
For   : Page/feature/241204_nagaoyoshimi/

Created       : 2024-11-26
Last Modified : 2024-11-26

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

Content

////////////////////////////////////////////////// */
/**
 * variables, layouts
 */
#st241204nagaoyoshimi {
  --color-dark: #000;
  --font-ja: hiragino-kaku-gothic-pron, sans-serif;
  --font-en: "acumin-variable", sans-serif;
}

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

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #st241204nagaoyoshimi {
    --rate: 100vw / 750;
    --spacer-wide: calc(220 * var(--rate));
    --spacer-narrow: calc(150 * var(--rate));
    -webkit-padding-before: var(--spacer-narrow);
            padding-block-start: var(--spacer-narrow);
    -webkit-padding-after: calc(120 * var(--rate));
            padding-block-end: calc(120 * var(--rate));
  }
  #st241204nagaoyoshimi .hidden-sml {
    display: none !important;
  }
  .main-area.lp {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
  .main-area .main-inner {
    width: 100%;
    padding-inline: 0;
  }
  .footer {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #st241204nagaoyoshimi {
    --rate: .1rem;
    --spacer-wide: calc(150 * var(--rate));
    --spacer-narrow: calc(60 * var(--rate));
    -webkit-padding-before: calc(100 * var(--rate));
            padding-block-start: calc(100 * var(--rate));
    -webkit-padding-after: calc(120 * var(--rate));
            padding-block-end: calc(120 * var(--rate));
  }
  #st241204nagaoyoshimi .hidden-lrg {
    display: none !important;
  }
  .main-area.not {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}
/**
 * common
 */
.lpStyling img,
.lpStyling picture {
  display: var(--display, block);
}
.lpStyling img {
  width: 100%;
  height: auto;
}
.lpStyling a {
  display: var(--display, inline-block);
}
.lpStyling a:has(img) {
  --display: block;
}
.lpStyling * {
  font-feature-settings: "palt";
  font-family: var(--font-family, var(--font-ja));
  font-weight: var(--font-weight, 300);
  text-align: var(--text-align, center);
  color: var(--font-color, var(--color-dark));
  box-sizing: border-box;
}
.lpStyling .en {
  --font-family: var(--font-en);
}
.lpStyling .ja {
  --font-family: var(--font-ja);
}

/**
 * index
 */
.lpStyling__title {
  --font-family: var(--font-en);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
  line-height: 1;
  letter-spacing: 0.01em;
}
.lpStyling__title span {
  display: inline-block;
  border-bottom: 1px solid #000;
}
.lpStyling__lead {
  line-height: 1;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lpStyling__index + * {
    -webkit-margin-before: calc(100 * var(--rate));
            margin-block-start: calc(100 * var(--rate));
  }
  .lpStyling__title {
    font-size: calc(52 * var(--rate));
  }
  .lpStyling__title span {
    -webkit-padding-after: calc(5 * var(--rate));
            padding-block-end: calc(5 * var(--rate));
  }
  .lpStyling__title span:nth-of-type(2) {
    -webkit-margin-before: calc(18 * var(--rate));
            margin-block-start: calc(18 * var(--rate));
  }
  .lpStyling__lead {
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
    font-size: calc(24 * var(--rate));
    letter-spacing: 0.015em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lpStyling__index + * {
    -webkit-margin-before: var(--spacer-narrow);
            margin-block-start: var(--spacer-narrow);
  }
  .lpStyling__title {
    font-size: calc(36 * var(--rate));
  }
  .lpStyling__title span {
    -webkit-padding-after: calc(5 * var(--rate));
            padding-block-end: calc(5 * var(--rate));
  }
  .lpStyling__title span:nth-of-type(2) {
    -webkit-margin-before: calc(12 * var(--rate));
            margin-block-start: calc(12 * var(--rate));
  }
  .lpStyling__lead {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
    font-size: calc(15 * var(--rate));
    letter-spacing: 0.025em;
  }
}
/**
 * main contents: common
 */
.mainContents__heading {
  letter-spacing: 0.01em;
}
.mainContents__heading span {
  display: block;
}
.mainContents__heading-primary {
  --font-family: var(--font-en);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
}
.mainContents__heading-secondary {
  --font-family: var(--font-en);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
}
.mainContents__lead {
  letter-spacing: 0.05em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents__section + * {
    -webkit-margin-before: var(--spacer, calc(207 * var(--rate)));
            margin-block-start: var(--spacer, calc(207 * var(--rate)));
  }
  .mainContents__details {
    -webkit-margin-before: calc(56 * var(--rate));
            margin-block-start: calc(56 * var(--rate));
  }
  .mainContents__heading-primary {
    font-size: calc(64 * var(--rate));
    line-height: 1;
  }
  .mainContents__heading-secondary {
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
    font-size: calc(32 * var(--rate));
    line-height: 1.5;
  }
  .mainContents__lead {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
    font-size: calc(26 * var(--rate));
    line-height: 2;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__section + * {
    -webkit-margin-before: var(--spacer, calc(142 * var(--rate)));
            margin-block-start: var(--spacer, calc(142 * var(--rate)));
  }
  .mainContents__details {
    -webkit-margin-before: calc(38 * var(--rate));
            margin-block-start: calc(38 * var(--rate));
  }
  .mainContents__heading {
    line-height: 1;
  }
  .mainContents__heading-primary {
    font-size: calc(36 * var(--rate));
  }
  .mainContents__heading-secondary {
    -webkit-margin-before: calc(18 * var(--rate));
            margin-block-start: calc(18 * var(--rate));
    font-size: calc(20 * var(--rate));
  }
  .mainContents__lead {
    -webkit-margin-before: calc(23 * var(--rate));
            margin-block-start: calc(23 * var(--rate));
    font-size: calc(16 * var(--rate));
    line-height: 2;
  }
}
/**
 * main contents
 */
.mainContents__block {
  display: grid;
  margin-inline: auto;
}
.mainContents__introduction-details {
  --text-align: justify;
  border: 1px solid #000;
}
.mainContents__introduction-details dt {
  --font-family: var(--font-en);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
  line-height: 1;
}
.mainContents__introduction-details dd {
  letter-spacing: 0.02em;
}
.mainContents__footer-title {
  --font-family: var(--font-en);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
}
.mainContents__prices {
  --font-family: var(--font-en);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
  letter-spacing: 0.01em;
}
.mainContents__button {
  margin-inline: auto;
}
.mainContents__staff-credit {
  --font-family: var(--font-en);
  --font-weight: 400;
  --text-align: left;
  border-top: 1px solid #000;
  letter-spacing: 0.05em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents__section--footer {
    --spacer: calc(220 * var(--rate));
  }
  .mainContents__block--day01 {
    grid-template-columns: calc(270 * var(--rate)) calc(120 * var(--rate)) calc(360 * var(--rate));
    row-gap: calc(60 * var(--rate));
  }
  .mainContents__block--day01 .mainContents__cell:nth-child(1) {
    grid-column: span 3;
    padding-inline: calc(45 * var(--rate));
  }
  .mainContents__block--day01 .mainContents__cell:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 2;
    -webkit-margin-before: calc(400 * var(--rate));
            margin-block-start: calc(400 * var(--rate));
    z-index: 1;
  }
  .mainContents__block--day01 .mainContents__cell:nth-child(3) {
    grid-column: 2/span 2;
    grid-row: 2;
  }
  .mainContents__block--day02, .mainContents__block--day03, .mainContents__block--day05, .mainContents__block--day06, .mainContents__block--day07 {
    grid-template-columns: 100%;
    row-gap: calc(60 * var(--rate));
  }
  .mainContents__block--day02 .mainContents__cell:nth-child(1), .mainContents__block--day03 .mainContents__cell:nth-child(1), .mainContents__block--day05 .mainContents__cell:nth-child(1), .mainContents__block--day06 .mainContents__cell:nth-child(1), .mainContents__block--day07 .mainContents__cell:nth-child(1) {
    grid-row: 1;
  }
  .mainContents__block--day02 .mainContents__cell:nth-child(2), .mainContents__block--day03 .mainContents__cell:nth-child(2), .mainContents__block--day05 .mainContents__cell:nth-child(2), .mainContents__block--day06 .mainContents__cell:nth-child(2), .mainContents__block--day07 .mainContents__cell:nth-child(2) {
    grid-row: 2;
    padding-inline: calc(120 * var(--rate));
  }
  .mainContents__block--day04 {
    grid-template-columns: calc(360 * var(--rate)) calc(120 * var(--rate)) calc(270 * var(--rate));
    row-gap: calc(60 * var(--rate));
  }
  .mainContents__block--day04 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1;
  }
  .mainContents__block--day04 .mainContents__cell:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 1;
    -webkit-margin-before: calc(250 * var(--rate));
            margin-block-start: calc(250 * var(--rate));
  }
  .mainContents__block--day04 .mainContents__cell:nth-child(3) {
    grid-column: span 3;
    grid-row: 2;
    padding-inline: calc(45 * var(--rate));
    z-index: 1;
  }
  .mainContents__block--introduction {
    grid-template-columns: calc(60 * var(--rate)) calc(540 * var(--rate)) calc(150 * var(--rate));
  }
  .mainContents__block--introduction .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1;
    z-index: 1;
  }
  .mainContents__block--introduction .mainContents__cell:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 2;
    -webkit-margin-before: calc(-120 * var(--rate));
            margin-block-start: calc(-120 * var(--rate));
  }
  .mainContents__block--footer {
    grid-template-columns: 100%;
    row-gap: calc(70 * var(--rate));
  }
  .mainContents__block--footer .mainContents__cell:nth-child(1) {
    margin-inline: auto;
  }
  .mainContents__introduction-details {
    -webkit-padding-before: calc(180 * var(--rate));
            padding-block-start: calc(180 * var(--rate));
    -webkit-padding-after: calc(66 * var(--rate));
            padding-block-end: calc(66 * var(--rate));
    -webkit-padding-start: calc(60 * var(--rate));
            padding-inline-start: calc(60 * var(--rate));
    -webkit-padding-end: calc(40 * var(--rate));
            padding-inline-end: calc(40 * var(--rate));
  }
  .mainContents__introduction-details dt {
    font-size: calc(34 * var(--rate));
  }
  .mainContents__introduction-details dd {
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
    font-size: calc(24 * var(--rate));
    line-height: 2;
  }
  .mainContents__footer-title {
    font-size: calc(48 * var(--rate));
    line-height: 1.25;
  }
  .mainContents__prices {
    -webkit-margin-before: calc(48 * var(--rate));
            margin-block-start: calc(48 * var(--rate));
    font-size: calc(24 * var(--rate));
    line-height: 1.75;
  }
  .mainContents__prices > * {
    margin-inline: 0.4em;
  }
  .mainContents__article-summary {
    -webkit-margin-before: calc(66 * var(--rate));
            margin-block-start: calc(66 * var(--rate));
    font-size: calc(22 * var(--rate));
    line-height: 2;
    letter-spacing: 0.05em;
  }
  .mainContents__button {
    width: calc(480 * var(--rate));
    -webkit-margin-before: calc(138 * var(--rate));
            margin-block-start: calc(138 * var(--rate));
  }
  .mainContents__staff-credit {
    -webkit-margin-before: calc(120 * var(--rate));
            margin-block-start: calc(120 * var(--rate));
    padding-block: calc(28 * var(--rate));
    padding-inline: calc(50 * var(--rate));
    border-bottom: 1px solid #000;
    font-size: calc(20 * var(--rate));
    line-height: 2;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents__section--footer {
    --spacer: calc(150 * var(--rate));
  }
  .mainContents__block--day01 {
    width: calc(660 * var(--rate));
    grid-template-columns: calc(270 * var(--rate)) calc(30 * var(--rate)) calc(360 * var(--rate));
    row-gap: calc(60 * var(--rate));
  }
  .mainContents__block--day01 .mainContents__cell:nth-child(1) {
    grid-column: span 3;
    padding-inline: calc(90 * var(--rate));
  }
  .mainContents__block--day01 .mainContents__cell:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 2;
    -webkit-margin-before: calc(210 * var(--rate));
            margin-block-start: calc(210 * var(--rate));
    z-index: 1;
  }
  .mainContents__block--day01 .mainContents__cell:nth-child(3) {
    grid-column: 2/span 2;
    grid-row: 2;
  }
  .mainContents__block--day02, .mainContents__block--day03, .mainContents__block--day05, .mainContents__block--day06, .mainContents__block--day07 {
    width: calc(540 * var(--rate));
    grid-template-columns: 100%;
    row-gap: calc(60 * var(--rate));
  }
  .mainContents__block--day02 .mainContents__cell:nth-child(1), .mainContents__block--day03 .mainContents__cell:nth-child(1), .mainContents__block--day05 .mainContents__cell:nth-child(1), .mainContents__block--day06 .mainContents__cell:nth-child(1), .mainContents__block--day07 .mainContents__cell:nth-child(1) {
    grid-row: 1;
  }
  .mainContents__block--day02 .mainContents__cell:nth-child(2), .mainContents__block--day03 .mainContents__cell:nth-child(2), .mainContents__block--day05 .mainContents__cell:nth-child(2), .mainContents__block--day06 .mainContents__cell:nth-child(2), .mainContents__block--day07 .mainContents__cell:nth-child(2) {
    grid-row: 2;
    padding-inline: calc(105 * var(--rate));
  }
  .mainContents__block--day04 {
    width: calc(650 * var(--rate));
    grid-template-columns: calc(350 * var(--rate)) calc(40 * var(--rate)) calc(260 * var(--rate));
    row-gap: calc(60 * var(--rate));
  }
  .mainContents__block--day04 .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1;
  }
  .mainContents__block--day04 .mainContents__cell:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 1;
    -webkit-margin-before: calc(210 * var(--rate));
            margin-block-start: calc(210 * var(--rate));
  }
  .mainContents__block--day04 .mainContents__cell:nth-child(3) {
    grid-column: span 3;
    grid-row: 2;
    padding-inline: calc(85 * var(--rate));
    z-index: 1;
  }
  .mainContents__block--introduction {
    width: calc(910 * var(--rate));
    grid-template-columns: calc(410 * var(--rate)) calc(40 * var(--rate)) calc(460 * var(--rate));
  }
  .mainContents__block--introduction .mainContents__cell:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1;
    z-index: 1;
  }
  .mainContents__block--introduction .mainContents__cell:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 1;
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
  }
  .mainContents__block--footer {
    grid-template-columns: 100%;
    row-gap: calc(35 * var(--rate));
  }
  .mainContents__block--footer .mainContents__cell:nth-child(1) {
    width: calc(480 * var(--rate));
    margin-inline: auto;
  }
  .mainContents__introduction-details {
    -webkit-padding-before: calc(58 * var(--rate));
            padding-block-start: calc(58 * var(--rate));
    -webkit-padding-after: calc(54 * var(--rate));
            padding-block-end: calc(54 * var(--rate));
    -webkit-padding-start: calc(80 * var(--rate));
            padding-inline-start: calc(80 * var(--rate));
    -webkit-padding-end: calc(60 * var(--rate));
            padding-inline-end: calc(60 * var(--rate));
  }
  .mainContents__introduction-details dt {
    font-size: calc(22 * var(--rate));
  }
  .mainContents__introduction-details dd {
    -webkit-margin-before: calc(12 * var(--rate));
            margin-block-start: calc(12 * var(--rate));
    font-size: calc(14 * var(--rate));
    line-height: 2;
  }
  .mainContents__footer-title {
    font-size: calc(30 * var(--rate));
    line-height: 1.25;
  }
  .mainContents__prices {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
    font-size: calc(16 * var(--rate));
    line-height: 1.75;
  }
  .mainContents__prices > * {
    margin-inline: 0.4em;
  }
  .mainContents__article-summary {
    -webkit-margin-before: calc(48 * var(--rate));
            margin-block-start: calc(48 * var(--rate));
    font-size: calc(14 * var(--rate));
    line-height: 2;
    letter-spacing: 0.025em;
  }
  .mainContents__button {
    width: calc(460 * var(--rate));
    -webkit-margin-before: calc(92 * var(--rate));
            margin-block-start: calc(92 * var(--rate));
  }
  .mainContents__staff-credit {
    -webkit-margin-before: calc(120 * var(--rate));
            margin-block-start: calc(120 * var(--rate));
    -webkit-padding-before: calc(25 * var(--rate));
            padding-block-start: calc(25 * var(--rate));
    font-size: calc(14 * var(--rate));
    line-height: 1.6428571429;
  }
  .mainContents__staff-credit p {
    width: calc(1260 * var(--rate));
    margin-inline: auto;
  }
}
/**
 * animation
 */
.js-animation-trigger.anim-zoom-in {
  overflow: hidden;
}
.js-animation-trigger.anim-zoom-in .mainContents__styling {
  overflow: hidden;
}
.js-animation-trigger.anim-zoom-in img {
  opacity: 0;
  transform: scale(1.1);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-zoom-in.is-active img {
  opacity: 1;
  transform: scale(1);
}
.js-animation-trigger.anim-fade-toLeft {
  opacity: 0;
  transform: translateX(10%);
}
.js-animation-trigger.anim-fade-toLeft.is-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-fade-toRight {
  opacity: 0;
  transform: translateX(-10%);
}
.js-animation-trigger.anim-fade-toRight.is-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-fade-toTop {
  opacity: 0;
  transform: translateY(10%);
}
.js-animation-trigger.anim-fade-toTop.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}