@charset "UTF-8";

/*
 * Figma node 16:380 — 03 THE MUSEUM AS COMMUNITY
 * PC reference: 1920 × 1500
 */
.philosophy-feature--03 {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.philosophy-feature--03__top {
  display: flex;
  flex: 0 0 820px;
  align-items: flex-end;
  gap: 80px;
  width: 100%;
  height: 820px;
}

.philosophy-feature--03 .philosophy-feature__kanji--thought {
  display: flex;
  flex: 0 0 420px;
  flex-direction: column;
  justify-content: center;
  width: 420px;
  height: 820px;
  padding: 10px;
  overflow: hidden;
  color: transparent;
  font-family: "Noto Serif JP", serif;
  font-size: 400px;
  font-weight: 400;
  font-feature-settings: "vkrn" 1;
  line-height: 400px;
  letter-spacing: 3px;
  word-break: break-word;
  background: linear-gradient(
    180deg,
    rgba(231, 194, 75, 0.6) 0%,
    rgba(57, 52, 36, 0.6) 100%
  );
  background-clip: text;
  opacity: 0.4;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.philosophy-feature--03__copy {
  display: flex;
  flex: 0 0 1156px;
  align-items: flex-start;
  width: 1156px;
}

.philosophy-feature--03__copy .philosophy-feature__content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 798px;
  color: #c9c4b8;
  letter-spacing: 3px;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
  text-shadow: 0 0 20px #000;
}

.philosophy-feature--03__copy .philosophy-feature__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 798px;
}

.philosophy-feature--03__copy .philosophy-feature__en {
  margin: 0;
  font-family: Cinzel, serif;
  font-weight: 400;
  line-height: 40px;
  white-space: nowrap;
  display: flex;
  gap:8px;
}

.philosophy-feature--03__copy .philosophy-feature__en span:first-child{
  color: #811704;
}

.philosophy-feature--03__copy .philosophy-feature__heading h2 {
  width: 100%;
  margin: 0;
  color: #c9c4b8;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  line-height: 24px；
}

.philosophy-feature--03__copy .philosophy-feature__body {
  width: 100%;
  margin: 0;
  color: #c9c4b8;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
}

.philosophy-feature--03__image {
  display: block;
  flex: 0 0 603px;
  width: 100%;
  height: 603px;
  margin: 0;
  object-fit: cover;
}

/*
 * Keep the picture wrapper in the 603px slot as well.  Without this explicit
 * size, a later shared picture rule can let the intrinsic image height take
 * part in flex sizing and make the section taller than Figma's 1463px frame.
 */
.philosophy-feature--03 > .philosophy-responsive-picture {
  position: relative;
  display: block;
  width: 100%;
  height: 603px;
  overflow: hidden;
}

@media (min-width: 769px) {
  .philosophy-feature--03 {
    flex: 0 0 1463px;
    min-height: 1463px;
    max-height: 1463px;
  }

  .philosophy-feature--03 > .philosophy-responsive-picture {
    flex: 0 0 603px;
    width: 100%;
    height: 603px;
  }

  /*
   * Figma nodes 67:44 / 16:391:
   * 1922 x 603 clipping frame with the image rendered at 100.05% x 106.3%.
   * The frame, not the oversized image, owns the section's 603px flow height.
   */
  .philosophy-feature--03 > .philosophy-responsive-picture[data-node-id="16:391"]
    > .philosophy-feature--03__image {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: none;
    object-fit: fill;
  }
}

@media (min-width: 769px) and (max-width: 1919px) {
  .philosophy-feature--03[data-node-id="16:380"] {
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__top {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    align-items: end;
    width: 100%;
    height: 820px;
    gap: 80px;
    flex: initial;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__copy {
    width: 100%;
    min-width: 0;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__copy .philosophy-feature__content,
  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__copy .philosophy-feature__heading {
    width: min(100%, 798px);
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature__en {
    font-size: 40px;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature__heading h2 {
    font-size: 24px;
  }

  .philosophy-feature--03[data-node-id="16:380"] > .philosophy-responsive-picture {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1922 / 603;
  }

  .philosophy-feature--03[data-node-id="16:380"] > .philosophy-responsive-picture[data-node-id="16:391"]
    > .philosophy-feature--03__image {
    width: 100%;
    height: 106.3%;
  }
}

@media (min-width: 769px) and (max-width: 1500px) {
  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__top {
    grid-template-columns: 315px minmax(0, 1fr);
    height: 680px;
    gap: 56px;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature__kanji--thought {
    width: 315px;
    height: 620px;
    flex-basis: 315px;
    font-size: 300px;
    line-height: 300px;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__copy {
    padding-right: 32px;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__copy .philosophy-feature__content {
    gap: 56px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__top {
    grid-template-columns: 252px minmax(0, 1fr);
    height: 600px;
    gap: 32px;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature__kanji--thought {
    width: 252px;
    height: 500px;
    flex-basis: 252px;
    font-size: 240px;
    line-height: 240px;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__copy {
    padding-right: 24px;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature--03__copy .philosophy-feature__content {
    gap: 40px;
  }

  .philosophy-feature--03[data-node-id="16:380"] .philosophy-feature__en {
    font-size: 32px;
    line-height: 1.15;
  }
}

@media (min-width: 769px) and (max-width: 1600px) {
  .philosophy-feature--03 .philosophy-feature__en .mobile-only-break {
    display: block !important;
  }

}