@charset "UTF-8";

@layer foundation, layout, component, project, utility;

@layer foundation {
  :root {
    /* Color */
    --color-primary: #E50112;
    --color-primary-dark: #B3000D;
    --color-primary-pale: rgb(229 1 18 / 0.16);
    --color-text: #241F1B;
    --color-text-sub: #514944;
    --color-text-muted: #7A706A;
    --color-text-light: #F8F6F3;
    --color-bg: #FFFFFF;
    --color-bg-soft: #F7F3F0;
    --color-bg-deep: #1E1715;
    --color-surface: #FFFFFF;
    --color-surface-glass: rgb(255 255 255 / 0.1);
    --color-border: #DDD4CF;
    --color-border-light: #EEE8E3;
    --color-border-glass: rgb(255 255 255 / 0.18);
    --color-white: #FFFFFF;
    --color-focus: #2456F5;
    --color-shadow-soft: rgb(31 18 12 / 0.08);
    --color-shadow-strong: rgb(31 18 12 / 0.18);

    /* Gradient */
    --gradient-hero-mask: linear-gradient(90deg, rgb(0 0 0 / 0.68) 0%, rgb(0 0 0 / 0.46) 42%, rgb(0 0 0 / 0.2) 72%, rgb(0 0 0 / 0.18) 100%);
    --gradient-brand-mask: linear-gradient(180deg, rgb(229 1 18 / 0.18) 0%, rgb(229 1 18 / 0.08) 42%, rgb(0 0 0 / 0.12) 100%);
    --gradient-future-mask: linear-gradient(90deg, rgb(0 0 0 / 0.66) 0%, rgb(0 0 0 / 0.36) 45%, rgb(0 0 0 / 0.15) 100%);

    /* Font Family */
    --font-family-base: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    --font-family-en: "Times New Roman", Georgia, serif;

    /* Font Size */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-body: 1.0625rem;
    --font-size-lg: 1.1875rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.875rem;
    --font-size-3xl: clamp(2rem, 4vw, 3.4rem);
    --font-size-hero: clamp(2.75rem, 7vw, 5.5rem);
    --font-size-year: clamp(2.4rem, 6vw, 5rem);

    /* Font Weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Line Height */
    --line-height-tight: 1.35;
    --line-height-base: 1.95;
    --line-height-loose: 2.1;

    /* Letter Spacing */
    --letter-spacing-sm: 0.04em;
    --letter-spacing-md: 0.08em;
    --letter-spacing-lg: 0.14em;

    /* Spacing */
    --space-0: 0;
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-28: 1.75rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-56: 3.5rem;
    --space-64: 4rem;
    --space-72: 4.5rem;
    --space-80: 5rem;
    --space-96: 6rem;
    --space-120: 7.5rem;
    --space-section-sm: clamp(4.5rem, 9vw, 7rem);
    --space-section-md: clamp(5.5rem, 11vw, 9rem);
    --space-section-lg: clamp(6rem, 13vw, 11rem);

    /* Radius */
    --radius-xl: 0.8rem;
    --radius-2xl: 0.4rem;
    --radius-pill: 999rem;

    /* Shadow */
    --shadow-sm: 0 0.5rem 2rem var(--color-shadow-soft);
    --shadow-md: 0 1rem 3rem var(--color-shadow-strong);

    /* Border */
    --border-width: 1px;
    --border-width-focus: 2px;

    /* Container */
    --container-width: 88rem;
    --container-wide-width: 94rem;
    --container-narrow-width: 48rem;
    --container-padding: clamp(1rem, 3vw, 2rem);

    /* Layout */
    --header-height: 5rem;
    --page-min-width: 20rem;
    --hero-min-height: min(62rem, 100svh);
    --z-index-header: 10;
    --z-index-content: 2;

    /* Image */
    --aspect-ratio-wide: 16 / 10;
    --aspect-ratio-landscape: 4 / 3;
    --photo-set-main-height: clamp(18rem, 36vw, 32rem);
    --photo-set-sub-height: clamp(9rem, 16vw, 15rem);
    --photo-set-single-height: clamp(20rem, 42vw, 34rem);

    /* Timeline */
    --timeline-rail-width: 0.0625rem;
    --timeline-dot-size: 0.875rem;
    --timeline-date-width: 11rem;
    --timeline-line-offset: 7rem;
    --timeline-column-gap: 13rem;
    --timeline-line-mobile-left: 0.5rem;
    --timeline-mobile-content-padding: 3.5rem;

    /* Transition */
    --duration-fast: 0.2s;
    --duration-normal: 0.35s;
    --duration-slow: 0.8s;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Motion */
    --motion-distance-y: 1.5rem;
    --motion-lift-y: -0.125rem;

    /* Effect */
    --blur-glass: 0.5rem;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    min-inline-size: var(--page-min-width);
    margin: var(--space-0);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    background-color: var(--color-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  p,
  figure,
  ul,
  ol {
    margin: var(--space-0);
  }

  ul,
  ol {
    padding: var(--space-0);
    list-style: none;
  }

  img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  :focus-visible {
    outline: var(--border-width-focus) solid var(--color-focus);
    outline-offset: var(--space-4);
  }

  ::selection {
    color: var(--color-white);
    background-color: var(--color-primary);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scroll-behavior: auto;
    }
  }
}

@layer layout {
  .l-header,
  .l-main {
    inline-size: 100%;
  }

  .l-container {
    inline-size: min(calc(100% - (var(--container-padding) * 2)), var(--container-width));
    margin-inline: auto;
  }

  .l-container--wide {
    inline-size: min(calc(100% - (var(--container-padding) * 2)), var(--container-wide-width));
  }

  .l-container--narrow {
    max-inline-size: var(--container-narrow-width);
  }
}

@layer component {
  .c-skip-link {
    position: fixed;
    inset-block-start: var(--space-16);
    inset-inline-start: var(--space-16);
    z-index: var(--z-index-header);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-16);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
    transform: translateY(-180%);
    transition: transform var(--duration-normal) var(--ease-standard);
  }

  .c-skip-link:focus-visible {
    transform: translateY(0);
  }

  .c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-block-size: var(--space-56);
    padding: var(--space-12) var(--space-28);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-sm);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);
    transition:
      color var(--duration-normal) var(--ease-standard),
      background-color var(--duration-normal) var(--ease-standard),
      border-color var(--duration-normal) var(--ease-standard),
      transform var(--duration-normal) var(--ease-standard);
  }

  .c-button--primary {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }

  .c-button--light {
    color: var(--color-primary);
    background-color: var(--color-white);
    border-color: var(--color-white);
  }

  .c-button__icon {
    transition: transform var(--duration-normal) var(--ease-standard);
  }

  .c-section-header {
    display: grid;
    gap: var(--space-12);
  }

  .c-section-header--center {
    justify-items: center;
    text-align: center;
  }

  .c-section-header--light {
    color: var(--color-white);
  }

  .c-section-header__label {
    color: var(--color-primary);
    font-family: var(--font-family-en);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-lg);
    text-transform: uppercase;
  }

  .c-section-header--light .c-section-header__label {
    color: var(--color-white);
  }

  .c-section-header__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-sm);
  }

  .c-image-frame {
    overflow: hidden;
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
  }

  .c-image-frame--wide {
    aspect-ratio: var(--aspect-ratio-wide);
  }

  .c-image-frame--landscape {
    aspect-ratio: var(--aspect-ratio-landscape);
  }

  .c-image-frame__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .c-info-card {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-24);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border-light);
    border-radius: var(--radius-xl);
  }

  .c-info-card__label {
    color: var(--color-primary);
    font-family: var(--font-family-en);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-lg);
    text-transform: uppercase;
  }

  .c-info-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
  }

  .c-info-card__text {
    color: var(--color-text-sub);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
  }

  @media (hover: hover) {
    .c-button:hover {
      transform: translateY(var(--motion-lift-y));
    }

    .c-button:hover .c-button__icon {
      transform: translateX(var(--space-4));
    }

    .c-button--primary:hover {
      background-color: var(--color-primary-dark);
      border-color: var(--color-primary-dark);
    }

    .c-button--light:hover {
      color: var(--color-primary-dark);
    }
  }
}

@layer project {
  .p-site-header {
    position: absolute;
    inset-block-start: var(--space-0);
    inset-inline: var(--space-0);
    z-index: var(--z-index-header);
    padding-block: var(--space-24);
  }

  .p-site-header__brand {
    max-width: 220px;
    color: var(--color-text-light);
    font-size: var(--font-size-md);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-md);
  }

  .p-history-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-block-size: var(--hero-min-height);
    color: var(--color-text-light);
    background-color: var(--color-bg-deep);
  }

  .p-history-hero__media,
  .p-history-hero__overlay {
    position: absolute;
    inset: var(--space-0);
  }

  .p-history-hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .p-history-hero__overlay {
    background: var(--gradient-hero-mask), var(--gradient-brand-mask);
  }

  .p-history-hero__container {
    position: relative;
    z-index: var(--z-index-content);
    padding-block: calc(var(--header-height) + var(--space-40)) var(--space-72);
  }

  .p-history-hero__body {
    max-inline-size: 38rem;
  }

  .p-history-hero__label {
    margin-block-end: var(--space-24);
    font-family: var(--font-family-en);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-lg);
    text-transform: uppercase;
  }

  .p-history-hero__title {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    letter-spacing: var(--letter-spacing-sm);
  }

  .p-history-hero__lead {
    max-inline-size: 34rem;
    margin-block-start: var(--space-24);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
  }

  .p-history-bridge {
    padding-block: var(--space-section-md);
    background-color: var(--color-bg-soft);
  }

  .p-history-bridge__container {
    display: grid;
    gap: var(--space-40);
    align-items: center;
  }

  .p-history-bridge__body {
    display: grid;
    gap: var(--space-24);
  }

  .p-history-bridge__text {
    display: grid;
    gap: var(--space-16);
    color: var(--color-text-sub);
  }

  .p-history-timeline {
    padding-block: var(--space-section-lg);
    background-color: var(--color-bg);
  }

  .p-history-timeline__list {
    position: relative;
    display: grid;
    gap: var(--space-96);
    margin-block-start: var(--space-64);
  }

  .p-history-timeline__list::before {
    position: absolute;
    inset-block: var(--space-8);
    inset-inline-start: calc(var(--timeline-date-width) + var(--timeline-line-offset));
    inline-size: var(--timeline-rail-width);
    background-color: var(--color-primary-pale);
    content: "";
  }

  .p-history-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--timeline-date-width) minmax(0, 1fr);
    gap: var(--timeline-column-gap);
  }

  .p-history-timeline__item::before {
    position: absolute;
    inset-block-start: var(--space-24);
    inset-inline-start: calc(var(--timeline-date-width) + var(--timeline-line-offset));
    inline-size: var(--timeline-dot-size);
    block-size: var(--timeline-dot-size);
    background-color: var(--color-primary);
    border: var(--space-4) solid var(--color-bg);
    border-radius: var(--radius-pill);
    content: "";
    transform: translateX(-50%);
  }

  .p-history-timeline__date {
    position: sticky;
    inset-block-start: var(--space-24);
    align-self: start;
    padding-block-start: var(--space-4);
  }

  .p-history-timeline__year {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-family-en);
    font-size: var(--font-size-year);
    line-height: 1;
    letter-spacing: var(--letter-spacing-sm);
  }

  .p-history-timeline__era {
    margin-block-start: var(--space-8);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-sm);
  }

  .p-history-timeline__article {
    display: grid;
    gap: var(--space-32);
  }

  .p-history-timeline__body {
    max-inline-size: var(--container-narrow-width);
  }

  .p-history-timeline__label {
    color: var(--color-primary);
    font-family: var(--font-family-en);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-lg);
    text-transform: uppercase;
  }

  .p-history-timeline__heading {
    margin-block-start: var(--space-8);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-sm);
  }

  .p-history-timeline__text {
    display: grid;
    gap: var(--space-12);
    margin-block-start: var(--space-20);
    color: var(--color-text-sub);
  }

  .p-history-photo-set {
    inline-size: 100%;
  }

  .p-history-photo-set--three {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(12rem, 0.55fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-20);
    align-items: stretch;
  }

  .p-history-photo-set--single {
    display: block;
  }

  .p-history-photo-set__item {
    overflow: hidden;
    background-color: var(--color-bg-soft);
    border: var(--border-width) solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--duration-normal) var(--ease-standard),
      box-shadow var(--duration-normal) var(--ease-standard);
  }

  .p-history-photo-set__item--main {
    grid-row: span 2;
    block-size: var(--photo-set-main-height);
  }

  .p-history-photo-set__item--sub {
    block-size: var(--photo-set-sub-height);
  }

  .p-history-photo-set__item--single {
    block-size: var(--photo-set-single-height);
  }

  .p-history-photo-set__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .p-history-future {
    position: relative;
    padding-block: var(--space-section-lg);
    color: var(--color-text-light);
    background-color: var(--color-bg-deep);
  }

  .p-history-future__media,
  .p-history-future__overlay {
    position: absolute;
    inset: var(--space-0);
  }

  .p-history-future__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .p-history-future__overlay {
    background: var(--gradient-future-mask);
  }

  .p-history-future__container {
    position: relative;
    z-index: var(--z-index-content);
    display: grid;
    align-items: center;
    min-block-size: 40rem;
  }

  .p-history-future__card {
    max-inline-size: 38rem;
    padding: var(--space-56);
    background-color: var(--color-surface-glass);
    border: var(--border-width) solid var(--color-border-glass);
    border-radius: var(--radius-2xl);
    backdrop-filter: blur(var(--blur-glass));
  }

  .p-history-future__text {
    display: grid;
    gap: var(--space-16);
    margin-block-start: var(--space-24);
    font-size: var(--font-size-lg);
  }


  .p-history-closing {
    padding-block: var(--space-section-sm);
    color: var(--color-white);
    background-color: var(--color-primary);
  }

  .p-history-closing__container {
    display: grid;
    justify-items: center;
    gap: var(--space-20);
    text-align: center;
  }

  .p-history-closing__label {
    font-family: var(--font-family-en);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-lg);
    text-transform: uppercase;
  }

  .p-history-closing__copy {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
  }

  .p-history-closing__action {
    margin-block-start: var(--space-8);
  }

  @media (hover: hover) {
    .p-history-photo-set__item:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(var(--motion-lift-y));
    }
  }

  @media (min-width: 48rem) {

    .p-history-current__cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .p-history-bridge__container {
      grid-template-columns: minmax(22rem, 0.82fr) minmax(0, 1.18fr);
      gap: var(--space-56);
    }

    .p-history-future__container {
      justify-content: end;
    }
  }

  @media (max-width: 79.9375rem) {
    .p-history-timeline__item {
      gap: calc(var(--timeline-column-gap) - var(--space-32));
    }
  }

  @media (max-width: 63.9375rem) {
    .p-history-timeline__list {
      gap: var(--space-72);
    }

    .p-history-timeline__list::before {
      inset-inline-start: var(--timeline-line-mobile-left);
    }

    .p-history-timeline__item {
      grid-template-columns: 1fr;
      gap: var(--space-20);
      padding-inline-start: var(--timeline-mobile-content-padding);
    }

    .p-history-timeline__item::before {
      inset-inline-start: var(--timeline-line-mobile-left);
    }

    .p-history-timeline__date {
      position: static;
    }

    .p-history-photo-set--three {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
      gap: var(--space-16);
    }
  }

  @media (max-width: 47.9375rem) {
    .p-site-header {
      padding-block: var(--space-16);
    }

    .p-site-header__brand {
      width: 40%;
      font-size: var(--font-size-sm);
    }

    .p-history-hero__container {
      padding-block: calc(var(--header-height) + var(--space-24)) var(--space-48);
    }

    .p-history-timeline__list {
      gap: var(--space-64);
      margin-block-start: var(--space-48);
    }

    .p-history-timeline__item {
      padding-inline-start: var(--space-32);
    }

    .p-history-timeline__heading {
      font-size: var(--font-size-xl);
    }

    .p-history-photo-set--three {
      grid-template-columns: 1fr;
    }

    .p-history-photo-set__item--main,
    .p-history-photo-set__item--sub,
    .p-history-photo-set__item--single {
      block-size: auto;
      aspect-ratio: var(--aspect-ratio-landscape);
    }

    .p-history-hero__lead,
    .p-history-future__text {
      font-size: var(--font-size-md);
    }

    .p-history-future__card {
      padding: var(--space-24);
    }
  }
}

@layer utility {
  .u-br-pc {
    display: inline;
  }

  @media (max-width: 47.9375rem) {
    .u-br-pc {
      display: none;
    }
  }

  .u-fade-in {
    opacity: 1;
    transform: none;
  }

  :where(.is-animation-ready) .u-fade-in {
    opacity: 0;
    transform: translateY(var(--motion-distance-y));
    transition:
      opacity var(--duration-slow) var(--ease-standard),
      transform var(--duration-slow) var(--ease-standard);
    will-change: opacity, transform;
  }

  :where(.is-animation-ready) .u-fade-in.is-visible {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.is-animation-ready) .u-fade-in {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}