/* Figma node 54:70, crop y=6942..10910 — 375 × 3968 */
.sp-perspectives-history {
  position: relative;
  box-sizing: border-box;
  width: 375px;
  height: 3894px;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  padding-bottom: 24px;
}

.sp-perspectives-history p,
.sp-perspectives-history h2 {
  margin: 0;
}

.sp-perspectives-history::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1038px;
  left: 0;
  width: 375px;
  height: 2930px;
  --line-mask:
    /* 59:250 */
    linear-gradient(41deg, transparent 49.86%, rgba(231,194,75,.42) 50%, transparent 50.14%) -297px 0 / 794px 449px no-repeat,
    linear-gradient(139deg, transparent 49.88%, rgba(57,52,36,.55) 50%, transparent 50.12%) -238px 62px / 735px 386px no-repeat,
    /* 59:258 */
    linear-gradient(139deg, transparent 49.86%, rgba(231,194,75,.42) 50%, transparent 50.14%) -421px 517px / 794px 449px no-repeat,
    linear-gradient(41deg, transparent 49.88%, rgba(57,52,36,.55) 50%, transparent 50.12%) -363px 579px / 736px 386px no-repeat,
    /* 59:266 */
    linear-gradient(41deg, transparent 49.86%, rgba(231,194,75,.42) 50%, transparent 50.14%) -75px 1028px / 794px 449px no-repeat,
    linear-gradient(139deg, transparent 49.88%, rgba(57,52,36,.55) 50%, transparent 50.12%) -16px 1091px / 735px 386px no-repeat,
    /* 59:274 */
    linear-gradient(139deg, transparent 49.86%, rgba(231,194,75,.42) 50%, transparent 50.14%) -397px 1749px / 794px 449px no-repeat,
    linear-gradient(41deg, transparent 49.88%, rgba(57,52,36,.55) 50%, transparent 50.12%) -338px 1812px / 735px 386px no-repeat,
    /* 59:282 */
    linear-gradient(41deg, transparent 49.86%, rgba(231,194,75,.42) 50%, transparent 50.14%) -282px 2481px / 794px 449px no-repeat,
    linear-gradient(139deg, transparent 49.88%, rgba(0,0,0,.55) 50%, transparent 50.12%) -223px 2544px / 735px 386px no-repeat;
  background: linear-gradient(135deg, #e7c24b 0%, #393424 100%);
  -webkit-mask: var(--line-mask);
  mask: var(--line-mask);
  -webkit-mask: none;
  mask: none;
  clip-path: path("M -297 351.37 L -296.96 351.16 L 121.03 448.43 L 120.98 448.64 Z M -238.12 269.44 L -238.06 269.23 L 189.57 424.82 L 189.51 425.02 Z M 293.51 351.42 L -84.06 0.38 L -83.76 0 L 293.81 351.04 Z M 243.2 369.54 L -215.33 63.39 L -215.14 63.06 L 243.39 369.21 Z M 25.33 426.31 L 446.87 107.02 L 447.03 107.26 L 25.48 426.56 Z M 27.29 419.71 L 27.11 419.46 L 449.55 84.83 L 449.72 85.09 Z M 94.64 442.61 L 496.93 267.74 L 497 267.94 L 94.72 442.81 Z M 373 868.37 L 372.96 868.16 L -45.03 965.43 L -44.98 965.64 Z M 314.13 786.44 L 314.06 786.23 L -113.57 941.82 L -113.51 942.02 Z M -217.51 868.42 L 160.06 517.38 L 159.76 517 L -217.81 868.04 Z M -167.2 886.54 L 291.33 580.39 L 291.14 580.06 L -167.39 886.21 Z M 50.67 943.31 L -370.87 624.02 L -371.03 624.26 L 50.52 943.56 Z M 48.71 936.71 L 48.89 936.46 L -373.54 601.83 L -373.72 602.09 Z M -18.64 959.61 L -420.93 784.74 L -421 784.94 L -18.72 959.81 Z M -75 1379.37 L -74.96 1379.16 L 343.03 1476.43 L 342.98 1476.64 Z M -16.12 1297.44 L -16.06 1297.23 L 411.57 1452.82 L 411.51 1453.02 Z M 515.51 1379.42 L 137.94 1028.38 L 138.24 1028 L 515.81 1379.04 Z M 465.2 1397.54 L 6.67 1091.39 L 6.86 1091.06 L 465.39 1397.21 Z M 247.33 1454.31 L 668.87 1135.02 L 669.03 1135.26 L 247.48 1454.56 Z M 249.29 1447.71 L 249.11 1447.46 L 671.55 1112.83 L 671.72 1113.09 Z M 316.64 1470.61 L 718.93 1295.74 L 719 1295.94 L 316.72 1470.81 Z M 397 2100.37 L 396.96 2100.16 L -21.03 2197.43 L -20.98 2197.64 Z M 338.13 2018.44 L 338.06 2018.23 L -89.57 2173.82 L -89.51 2174.02 Z M -193.51 2100.42 L 184.06 1749.38 L 183.76 1749 L -193.81 2100.04 Z M -143.2 2118.54 L 315.33 1812.39 L 315.14 1812.06 L -143.39 2118.21 Z M 74.67 2175.31 L -346.87 1856.02 L -347.03 1856.26 L 74.52 2175.56 Z M 72.71 2168.71 L 72.89 2168.46 L -349.54 1833.83 L -349.72 1834.09 Z M 5.36 2191.61 L -396.93 2016.74 L -397 2016.94 L 5.28 2191.81 Z M -282 2832.37 L -281.96 2832.16 L 136.03 2929.43 L 135.98 2929.64 Z M -223.12 2750.44 L -223.06 2750.23 L 204.57 2905.82 L 204.51 2906.02 Z M 308.51 2832.42 L -69.06 2481.38 L -68.76 2481 L 308.81 2832.04 Z M 258.2 2850.54 L -200.33 2544.39 L -200.14 2544.06 L 258.39 2850.21 Z M 40.33 2907.31 L 461.87 2588.02 L 462.03 2588.26 L 40.48 2907.56 Z M 42.29 2900.71 L 42.11 2900.46 L 464.55 2565.83 L 464.72 2566.09 Z M 109.64 2923.61 L 511.93 2748.74 L 512 2748.94 L 109.72 2923.81 Z");
  /* Figma: group opacity 60% × vector fill opacity 60% */
  opacity: .36;
  pointer-events: none;
}

.sp-perspectives-history__intro {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 360px;
}

.sp-perspectives-history__english {
  position: absolute;
  top: -5px;
  left: 8px;
  color: rgba(255,255,255,.2);
  font-family: "Cinzel", serif;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 8px;
  text-align: right;
}

.sp-perspectives-history__vertical {
  position: absolute;
  top: 108px;
  right: 80px;
  height: 225px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 3px;
  writing-mode: vertical-rl;
}

.sp-perspective-story {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 375px;
}

.sp-perspective-story > img {
  position: absolute;
  display: block;
  filter: grayscale(1);
}

.sp-perspective-story__copy {
  position: absolute;
  left: 24px;
  width: 327px;
  letter-spacing: 3px;
  text-shadow: 0 0 20px #000;
}

.sp-perspective-story h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}

.sp-perspective-story p {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: justify;
}
.sp-perspective-story--01.sp-perspective-story p {
  line-height: 24px;
}

.sp-perspective-story--01 { top: 383px; height: 635px; }
.sp-perspective-story--01 > img { top: 0; width:375px;height: 266px; object-position: bottom; }
.sp-perspective-story--01 .sp-perspective-story__copy { top: 202px; }

.sp-perspective-story--02 { top: 1025px; height: 557px; }
.sp-perspective-story--02 > img { top: 0; width:438px !important; height: 297px; object-position: center; }
.sp-perspective-story--02 .sp-perspective-story__copy { top: 200px; }
.sp-perspective-story--02 h2 { text-align: right; }

.sp-perspective-story--03 { top: 1600px; height: 533px; }
.sp-perspective-story--03 > img { top: 0; right:0;width:262px !important; height: 402px; object-fit: contain; }
.sp-perspective-story--03 .sp-perspective-story__copy { top: 230px; }

.sp-perspective-story--04 { top: 2196px; height: 614px; }
.sp-perspective-story--04 > img { top: 0; width:285px !important; height: 378px; object-position: center; }
.sp-perspective-story--04 .sp-perspective-story__copy { top: 200px; }
.sp-perspective-story--04 h2 { text-align: right; }

.sp-perspective-story--05 { top: 2848px; height: 552px; }
.sp-perspective-story--05 > img { top: 0; right:-48px; width:345px !important;height: 458px; object-position: center; }
.sp-perspective-story--05 .sp-perspective-story__copy { top: 200px; }

.sp-perspectives-history__history {
  position: absolute;
  z-index: 2;
  top: 3480px;
  left: 0;
  width: 384px;
  height: 384px;
  padding: 0;
}

.sp-perspectives-history__history-title {
  margin-left: 79px !important;
  color: rgba(255,255,255,.2);
  font-family: "Cinzel", serif;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 3px;
}

.sp-perspectives-history__history-copy {
  margin-top: 0 !important;
  position: absolute;
  top: 104px !important;
  right: 24px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 244px;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 3px;
  writing-mode: vertical-rl;
}

.sp-perspectives-history__history-copy > p {
  height: 244px;
}

.sp-perspectives-history__history-lead {
  margin-left: 8px !important;
  font-size: 16px;
  line-height: 20px;
}

@media (max-width: 374px) {
  .sp-perspectives-history {
    transform-origin: top left;
    transform: scale(calc(100vw / 375));
  }
}