@charset "UTF-8";
/*==========================================================================================

  東京クリスマスマーケットの軌跡 (/history/)

  Loaded only by page-history.php, after founder.css: the client asked for the 創業者の想い LP's
  look, so masthead, sections, headings, copy, frames, footer and the PC hamburger come from
  founder.css unchanged. This file sets the page's font and dark colour and lays out its own
  sections. Its rules come after founder.css, so a rule here that founder.css also sets inside a
  media query wins at every width unless it is repeated in the matching query below.

==========================================================================================*/
/* Noto Serif JP (Google Fonts, OFL) cut to the characters of this page, like the founder page's font. After any
   wording change run tools/check_lp_font.py; a missing character falls back to Yu Mincho / Hiragino Mincho. */
@font-face {
  font-family: "History Serif";
  src: url("../fonts/history-serif-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "History Serif";
  src: url("../fonts/history-serif-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* 「背景カラー：紺➡#8C211F」 in the client's doc: the founder LP's navy becomes this red. founder.css names the
   variable after its own colour. */
.history-page {
  --founder-navy: #8c211f;
  font-family: "History Serif", "Yu Mincho", "Hiragino Mincho ProN", serif;
}
.history-page figure::before { content: ""; display: block; }

/*-------------- 東京の冬に、クリスマスの風景を --------------*/
.history-intro { padding-block: 64px 72px; }
/* The title column is as wide as its longer line, 「クリスマスの風景を」 (9 characters); the copy takes the rest. */
.history-intro-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 48px; align-items: start; }
.history-intro h2 { font-size: 40px; line-height: 1.5; }
.history-intro .founder-copy { font-size: 18px; }
/* The sign spans 9-95% of the photo's width, so the photo keeps its full width and loses rows only: 2:1 from row
   4% shows the pyramid's top and the sign. */
.history-page .history-intro-photo { margin-top: 48px; }
.history-intro-photo::before { padding-top: 50%; }
.history-intro-photo img { object-position: 50% 16%; }

/*-------------- 始まりは、2015年の日比谷公園 --------------*/
.history-beginning { padding-block: 64px; }
.history-beginning-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; grid-template-areas: "photo heading" "photo copy"; grid-template-rows: auto 1fr; }
.history-beginning h2 { grid-area: heading; }
.history-beginning .founder-copy { grid-area: copy; }
/* 4:3 as shot: a narrower box would cut the 2015 sign (8-80% of the width). */
.history-beginning-photo { grid-area: photo; align-self: start; }
.history-beginning-photo::before { padding-top: 75%; }

/*-------------- 街とともに、開催の場を広げて --------------*/
.history-steps { padding-block: 56px 64px; }
.history-steps-lead, .history-timeline { max-width: 760px; margin-inline: auto; }
/* A gold line down the year column's right edge, with a star on it at each year. The line starts and ends at the
   first and last star's centre: its top plus half its size (20px + 7px; 15px + 6px on phones). */
.history-timeline { --history-line: 144px; list-style: none; margin-top: 36px; padding: 0; }
.history-timeline li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 48px; align-items: baseline; padding-block: 12px; }
.history-timeline li::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--history-line); width: 1px; background: var(--founder-gold); }
.history-timeline li:first-child::before { top: 27px; }
.history-timeline li:last-child::before { bottom: calc(100% - 27px); }
.history-timeline li::after { content: ""; position: absolute; top: 20px; left: calc(var(--history-line) - 7px); width: 15px; height: 15px; background: var(--founder-gold); clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%); }
.history-timeline time { color: var(--founder-gold); font-size: 26px; font-weight: 700; line-height: 1.4; text-align: right; white-space: nowrap; }
.history-timeline p { font-size: 17.5px; line-height: 1.7; }

/*-------------- シンボルもまた、新しい歩みへ --------------*/
.history-symbol { padding-block: 64px; }
.history-symbol-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; grid-template-areas: "heading photos" "copy photos"; grid-template-rows: auto 1fr; }
.history-symbol h2 { grid-area: heading; }
.history-symbol .founder-copy { grid-area: copy; }
.history-symbol-photos { grid-area: photos; align-self: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* 2:3 crops of the 4:3 night shots keep half the width: 芝公園 with Tokyo Tower beside the pyramid (34-84%),
   神宮外苑 centred on its pyramid. */
.history-symbol-photos figure::before { padding-top: 150%; }
.history-symbol-shiba img { object-position: 68% 50%; }
.history-symbol-gaien img { object-position: 58% 50%; }

/*-------------- 大切にしてきたのは、文化とぬくもり --------------*/
.history-culture { padding-block: 64px; }
.history-culture-grid { display: grid; grid-template-columns: minmax(0, 470fr) minmax(0, 520fr); column-gap: 48px; grid-template-areas: "photos heading" "photos copy"; grid-template-rows: auto 1fr; }
.history-culture h2 { grid-area: heading; }
.history-culture .founder-copy { grid-area: copy; }
.history-culture-photos { grid-area: photos; align-self: start; display: grid; gap: 16px; }
.history-culture-photos figure::before { padding-top: 66.6667%; }

/*-------------- 2026年、「海」と「森」のクリスマスへ --------------*/
.history-future { padding-block: 64px 72px; }
/* The image carries text: shown whole, at its own ratio (1942x809). */
.history-future-photo::before { padding-top: 41.6581%; }
.history-future-copy { max-width: 760px; margin: 40px auto 0; }

/* From 1101px the content is 100vw - 480px wide (founder.css); the title keeps to 40% of it, at most the 40px above. */
@media (min-width: 1101px) {
  .history-intro h2 { font-size: clamp(28px, (100vw - 480px) * 0.4 / 9, 40px); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .history-intro h2 { font-size: 34px; }
  .history-intro .founder-copy { font-size: 16px; }
  .history-intro-grid, .history-beginning-grid, .history-symbol-grid, .history-culture-grid { column-gap: 28px; }
  .history-timeline { --history-line: 124px; }
  .history-timeline li { grid-template-columns: 100px minmax(0, 1fr); column-gap: 48px; }
  .history-timeline time { font-size: 23px; }
  .history-timeline p { font-size: 16px; }
}
@media (max-width: 767px) {
  /* The title's second line, 「マーケットの軌跡」 (8 characters), must end left of MENU (54px, 15px from the right). */
  .founder-masthead h1 { font-size: clamp(24px, (100vw - 96px) / 8, 29px); line-height: 1.4; }
  .history-intro, .history-beginning, .history-steps, .history-symbol, .history-culture, .history-future { padding-block: 29px 33px; }
  .history-intro-grid { display: block; }
  .history-intro h2 { font-size: clamp(21px, 6.4vw, 29px); line-height: 1.55; margin-bottom: 20px; }
  .history-intro .founder-copy { font-size: 14.5px; }
  /* Phones: the whole photo, edge to edge. */
  .history-page .history-intro-photo { margin: 24px -24px 0; border-inline: 0; }
  .history-intro-photo::before { padding-top: 66.7%; }
  .history-beginning-grid, .history-symbol-grid, .history-culture-grid { display: flex; flex-direction: column; }
  /* align-self: start (above) would shrink these to their 0-width content in a flex column. */
  .history-beginning-photo, .history-symbol-photos, .history-culture-photos { align-self: stretch; }
  .history-page .history-beginning-photo { margin-bottom: 22px; }
  .history-timeline { --history-line: 86px; margin-top: 24px; }
  .history-timeline li { grid-template-columns: 70px minmax(0, 1fr); column-gap: 32px; padding-block: 9px; }
  .history-timeline li:first-child::before { top: 21px; }
  .history-timeline li:last-child::before { bottom: calc(100% - 21px); }
  .history-timeline li::after { top: 15px; left: calc(var(--history-line) - 6px); width: 13px; height: 13px; }
  .history-timeline time { font-size: 17px; }
  .history-timeline p { font-size: 14.5px; line-height: 1.75; }
  .history-symbol-photos, .history-culture-photos { margin-top: 22px; gap: 12px; }
  .history-future-copy { margin-top: 22px; }
}