@charset "UTF-8";

/*
 * Figma node 16:462 (1920 × 7798)
 * Load this file after five-perspectives.css.
 */
.philosophy-five-stories {
  position: relative;
  width: 100%;
  height: 7573px;
  min-height: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Noto Serif JP", serif;
}

.philosophy-five-stories::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 1920px;
  height: 7104px;
  transform: translateX(-50%);
  --line-mask:
    /* 16:522 */
    linear-gradient(41deg, transparent 49.94%, rgba(231,194,75,.3) 50%, transparent 50.06%) -646px -76px / 984px 760px no-repeat,
    linear-gradient(139deg, transparent 49.95%, rgba(57,52,36,.5) 50%, transparent 50.05%) -349px -212px / 866px 966px no-repeat,
    linear-gradient(17deg, transparent 49.96%, rgba(231,194,75,.22) 50%, transparent 50.04%) -94px -29px / 962px 728px no-repeat,
    /* 16:530 */
    linear-gradient(38deg, transparent 49.94%, rgba(231,194,75,.34) 50%, transparent 50.06%) -703px 282px / 1512px 1050px no-repeat,
    linear-gradient(142deg, transparent 49.95%, rgba(57,52,36,.52) 50%, transparent 50.05%) -115px 55px / 1187px 1262px no-repeat,
    linear-gradient(18deg, transparent 49.96%, rgba(231,194,75,.25) 50%, transparent 50.04%) 304px 360px / 1604px 1147px no-repeat,
    /* 16:515 */
    linear-gradient(40deg, transparent 49.94%, rgba(231,194,75,.34) 50%, transparent 50.06%) 953px 2210px / 1107px 1103px no-repeat,
    linear-gradient(140deg, transparent 49.95%, rgba(57,52,36,.52) 50%, transparent 50.05%) 1361px 2365px / 1184px 860px no-repeat,
    linear-gradient(20deg, transparent 49.96%, rgba(231,194,75,.24) 50%, transparent 50.04%) 1493px 2868px / 1184px 380px no-repeat,
    /* 16:504 */
    linear-gradient(38deg, transparent 49.94%, rgba(231,194,75,.34) 50%, transparent 50.06%) -1089px 3759px / 1420px 1613px no-repeat,
    linear-gradient(142deg, transparent 49.95%, rgba(57,52,36,.5) 50%, transparent 50.05%) -274px 3986px / 1447px 1115px no-repeat,
    linear-gradient(18deg, transparent 49.96%, rgba(231,194,75,.24) 50%, transparent 50.04%) 409px 4720px / 1539px 628px no-repeat,
    /* 16:510 */
    linear-gradient(40deg, transparent 49.94%, rgba(231,194,75,.34) 50%, transparent 50.06%) 825px 5272px / 1095px 1181px no-repeat,
    linear-gradient(140deg, transparent 49.95%, rgba(0,0,0,.5) 50%, transparent 50.05%) 1133px 5625px / 1439px 740px 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 -1090 5353.3 L -1089.84 5352.48 L 510.5 5724.91 L 510.34 5725.73 Z M -864.56 5039.59 L -864.31 5038.8 L 772.98 5634.5 L 772.73 5635.29 Z M 1170.9 5353.5 L -274.71 4009.46 L -273.56 4008 L 1172.06 5352.04 Z M 978.29 5422.88 L -777.28 4250.72 L -776.56 4249.45 L 979.01 5421.61 Z M 409.48 5702.63 L 1949.71 5033.09 L 1950 5033.86 L 409.76 5703.41 Z M 2575.94 6660.52 L 2575.88 6660.2 L 1649.94 6875.68 L 1650 6876 Z M 2401.58 6418.13 L 2401.39 6417.51 L 1134.65 6878.4 L 1134.84 6879.01 Z M 826.78 6660.99 L 1945.22 5621.13 L 1944.34 5620 L 825.88 6659.87 Z M 975.79 6714.67 L 2334.05 5807.79 L 2333.5 5806.8 L 975.24 6713.69 Z M 2909.5 3276.24 L 2909.39 3275.69 L 1814.68 3530.44 L 1814.79 3531 Z M 2755.28 3061.65 L 2755.11 3061.11 L 1635.14 3468.6 L 1635.3 3469.14 Z M 1362.94 3276.38 L 2351.8 2357 L 2351.02 2356 L 1362.15 3275.39 Z M 1494.69 3323.84 L 2695.58 2522.03 L 2695.09 2521.16 L 1494.2 3322.97 Z M 2065.32 3472.51 L 961.29 2636.28 L 960.88 2636.91 L 2064.91 3473.15 Z M 2060.17 3455.23 L 2060.64 3454.56 L 954.28 2578.17 L 953.81 2578.86 Z M -838 580.95 L -837.9 580.46 L 121.3 803.68 L 121.2 804.17 Z M -702.88 392.92 L -702.73 392.45 L 278.62 749.49 L 278.48 749.97 Z M 517.13 581.07 L -349.34 -224.51 L -348.65 -225.39 L 517.82 580.2 Z M 401.68 622.66 L -650.56 -79.91 L -650.13 -80.67 L 402.11 621.9 Z M -98.31 752.93 L 869.07 20.2 L 869.42 20.76 L -97.95 753.49 Z M -93.81 737.79 L -94.21 737.19 L 875.21 -30.72 L 875.61 -30.11 Z M 60.75 790.33 L 983.93 389.02 L 984.1 389.49 L 60.92 790.8 Z M -930 1404.74 L -929.84 1403.92 L 670.5 1776.35 L 670.34 1777.17 Z M -704.56 1091.03 L -704.31 1090.24 L 932.98 1685.94 L 932.73 1686.73 Z M 1330.9 1404.94 L -114.71 60.9 L -113.56 59.44 L 1332.06 1403.49 Z M 1138.29 1474.32 L -617.28 302.16 L -616.56 300.89 L 1139.01 1473.05 Z M 304.1 1691.67 L 1918.08 469.18 L 1918.67 470.11 L 304.69 1692.6 Z M 311.62 1666.41 L 310.94 1665.41 L 1928.32 384.23 L 1929 385.24 Z M 569.48 1754.07 L 2109.71 1084.53 L 2110 1085.3 L 569.76 1754.85 Z");
  /* Figma: layer opacity 60% × vector fill opacity 60% */
  opacity: .24;
  pointer-events: none;
}

.philosophy-five-stories__photo,
.philosophy-five-story,
.philosophy-five-stories__history-block {
  z-index: 2;
}

.philosophy-five-stories__photo {
  position: absolute;
  margin: 0;
  filter: none;
  mask-image: none;
}

.philosophy-five-stories__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.philosophy-five-stories__photo--01 {
  top: 63px;
  left: 27px;
  width: 1680px;
  height: 1190px;
}

.philosophy-five-stories__photo--01 img {
}

.philosophy-five-stories__photo--02 {
  top: 1433px;
  left: 279px;
  width: 1682px;
  height: 1143px;
}

.philosophy-five-stories__photo--03 {
  top: 2761px;
  left: 285px;
  width: 854px;
  height: 1319px;
}

.philosophy-five-stories__photo--04 {
  top: 3978px;
  left: 667px;
  width: 1203px;
  height: 1597px;
}

.philosophy-five-stories__photo--05 {
  top: 5376px;
  left: 43px;
  width: 1227px;
  height: 1629px;
}

.philosophy-five-story {
  position: absolute;
  width: 480px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 3px;
  text-shadow: none;
}

.philosophy-five-story--01 {
  top: 687px;
  left: 1128px;
}

.philosophy-five-story--02 {
  top: 1975px;
  left: 400px;
}

.philosophy-five-story--03 {
  top: 3231px;
  left: 1128px;
}

.philosophy-five-story--04 {
  top: 4519px;
  left: 400px;
}

.philosophy-five-story--05 {
  top: 5871px;
  left: 1128px;
}

.philosophy-five-story h2 {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 500;
  line-height: 40px;
}

.philosophy-five-story p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  text-align: justify;
}

.philosophy-five-stories__history-block {
  position: absolute;
  top: 6877px;
  left: 0;
  width: 100%;
  height: 696px;
  background: #000;
}

.philosophy-five-stories__history {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.2);
  font-family: "Cinzel", serif;
  font-size: 160px;
  font-weight: 400;
  line-height: 160px;
  letter-spacing: 32px;
  white-space: nowrap;
}

.philosophy-five-stories__closing {
  position: absolute;
  top: 200px;
  left: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 120px;
  transform: translateX(-50%);
  color: #fff;
  letter-spacing: 3px;
  white-space: nowrap;
}

.philosophy-five-stories__closing p {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.philosophy-five-stories__closing-copy {
  display: flex;
  align-items: flex-start;
  width: 496px;
  height: 288px;
  gap: 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  writing-mode: horizontal-tb !important;
}

.philosophy-five-stories__closing-copy > span {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  line-height: 16px;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.philosophy-five-stories__closing-lead {
  width: 136px;
  height: 336px;
  font-size: 24px;
  font-weight: 500;
  line-height: 56px;
}

@media (min-width: 769px) and (max-width: 1919px) {
  .philosophy-five-stories[data-node-id="16:462"] {
    --story-side: max(32px, calc((100% - 1600px) / 2));
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto) auto;
    gap: 160px 64px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 64px var(--story-side) 0;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__photo,
  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story,
  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__history-block {
    position: relative;
    top: auto;
    left: auto;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__photo {
    align-self: center;
    width: 100%;
    height: auto;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__photo--01 {
    grid-area: 1 / 1;
    aspect-ratio: 1680 / 1190;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story--01 {
    grid-area: 1 / 2;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__photo--02 {
    grid-area: 2 / 2;
    aspect-ratio: 1682 / 1143;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story--02 {
    grid-area: 2 / 1;
    justify-self: end;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__photo--03 {
    grid-area: 3 / 1;
    justify-self: end;
    width: min(100%, 854px);
    aspect-ratio: 854 / 1319;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story--03 {
    grid-area: 3 / 2;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__photo--04 {
    grid-area: 4 / 2;
    aspect-ratio: 1203 / 1597;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story--04 {
    grid-area: 4 / 1;
    justify-self: end;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__photo--05 {
    grid-area: 5 / 1;
    justify-self: end;
    width: min(100%, 1227px);
    aspect-ratio: 1227 / 1629;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story--05 {
    grid-area: 5 / 2;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story {
    align-self: center;
    width: min(100%, 480px);
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story h2 {
    font-size: 24px;
    line-height: 40px;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-story p {
    font-size: 16px;
    line-height: 32px;
  }

  .philosophy-five-stories[data-node-id="16:462"] .philosophy-five-stories__history-block {
    grid-area: 6 / 1 / 7 / 3;
    margin-right: calc(-1 * var(--story-side));
    margin-left: calc(-1 * var(--story-side));
    margin: 0 auto;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .philosophy-five-stories[data-node-id="16:462"] {
    --story-side: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 44%);
    gap: 120px 32px;
    padding-right: 32px;
    padding-left: 32px;
  }
}