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

  ドイツのクリスマスマーケットの伝統 (/traditions/)

  Loaded only by page-traditions.php, after founder.css: like /history/, the page takes the
  創業者の想い LP's look from founder.css (masthead, sections, headings, copy, frames, footer,
  the PC hamburger). This file sets the page's font and 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 other LP fonts. After any wording
   change rebuild it (tools/build_lp_font.py) and run tools/check_lp_font.py; a missing character falls back to
   Yu Mincho / Hiragino Mincho. ?20261015: the subset was rebuilt for the client's text under the same file name. */
@font-face {
  font-family: "Tradition Serif";
  src: url("../fonts/tradition-serif-regular.woff2?20261015") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tradition Serif";
  src: url("../fonts/tradition-serif-bold.woff2?20261015") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* The client's doc: 背景カラー：紺➡#015830 (founder.css paints the masthead, dark sections and footer with it). */
.tradition-page { --founder-navy: #015830; font-family: "Tradition Serif", "Yu Mincho", "Hiragino Mincho ProN", serif; }
.tradition-page figure::before { content: ""; display: block; }

/*-------------- クリスマスを待つ時間も、大切なひととき --------------*/
.tradition-intro { padding-block: 64px 72px; }
/* The title column is as wide as its longest line, 「大切なひととき」 (7 characters); the copy takes the rest. */
.tradition-intro-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 48px; align-items: start; }
.tradition-intro h2 { font-size: 40px; line-height: 1.5; }
.tradition-intro .founder-copy { font-size: 18px; }
/* The client's photo is a 640x380 file: whole, and never wider than that. */
.tradition-page .tradition-intro-photo { max-width: 640px; margin: 48px auto 0; }
.tradition-intro-photo::before { padding-top: 59.375%; }

/*-------------- 街の広場から続く、冬の伝統 / あたたかな一杯と、伝統のお菓子を --------------*/
/* Title | copy, then the section's two photos side by side. */
.tradition-origin, .tradition-taste { padding-block: 64px; }
.tradition-origin-grid, .tradition-taste-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 48px; grid-template-areas: "heading copy" "photos photos"; }
/* start: a stretched heading would carry its gold rule (founder.css ::after, bottom 11px) down to the copy's end. */
.tradition-origin h2, .tradition-taste h2 { grid-area: heading; align-self: start; }
.tradition-origin .founder-copy, .tradition-taste .founder-copy { grid-area: copy; }
.tradition-photo-pair { grid-area: photos; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.tradition-photo-pair figure::before { padding-top: 66.4167%; }

/*-------------- 街ごとに出会う、クリスマスの風景 --------------*/
.tradition-cities { padding-block: 56px 64px; }
/* Dresden's picture is portrait, Munich's and Seiffen's landscape: Dresden fills the left column, the other two stack
   on the right. 455:489 makes the two columns about the same height (1538/1023 against twice 733/1100 plus the gap). */
.tradition-cities-grid { display: grid; grid-template-columns: minmax(0, 455fr) minmax(0, 489fr); column-gap: 32px; align-items: start; margin-top: 8px; }
.tradition-cities-column { display: grid; row-gap: 32px; }
/* Shown whole at their own ratios (1023x1538, 1100x733): the names are part of the pictures. */
.tradition-city-dresden::before { padding-top: 150.3421%; }
.tradition-cities-column figure::before { padding-top: 66.6364%; }
.tradition-cities-copy { max-width: 760px; margin: 40px auto 0; }

/*-------------- 手仕事のぬくもりを、クリスマスの飾りに --------------*/
.tradition-craft { padding-block: 64px; }
.tradition-craft-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; grid-template-areas: "heading photo" "copy photo"; grid-template-rows: auto 1fr; }
.tradition-craft h2 { grid-area: heading; }
.tradition-craft .founder-copy { grid-area: copy; }
.tradition-craft-photo { grid-area: photo; align-self: start; }
.tradition-craft-photo::before { padding-top: 66.4167%; }

/*-------------- 子どもから大人まで、心待ちにする季節 --------------*/
.tradition-closing { padding-block: 64px 72px; }
.tradition-closing-photo::before { padding-top: 50%; }
.tradition-closing-photo img { object-position: 50% 40%; }
.tradition-closing-copy { max-width: 760px; margin: 40px auto 0; }

/* From 1101px the content is 100vw - 480px wide (founder.css); the intro title keeps to 40% of it, at most 40px. */
@media (min-width: 1101px) {
  .tradition-intro h2 { font-size: clamp(28px, (100vw - 480px) * 0.4 / 7, 40px); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  /* The 17-character title at 40px would run under MENU (founder.css: 72px, 28px from the right, 36px of it inside
     the container's padding): it wraps between its phrases instead. From 1101px the side margins clear MENU. */
  .founder-masthead h1 { max-width: calc(100% - 64px); }
  .tradition-intro h2 { font-size: 34px; }
  .tradition-intro .founder-copy { font-size: 16px; }
  .tradition-intro-grid, .tradition-origin-grid, .tradition-taste-grid, .tradition-craft-grid { column-gap: 28px; }
  .tradition-cities-grid { column-gap: 24px; }
  .tradition-cities-column { row-gap: 24px; }
}
@media (max-width: 767px) {
  /* The title's first line, 「ドイツのクリスマス」 (9 characters), must end left of MENU (54px, 15px from the right). */
  .founder-masthead h1 { font-size: clamp(22px, (100vw - 96px) / 9, 29px); line-height: 1.4; }
  .tradition-intro, .tradition-origin, .tradition-cities, .tradition-taste, .tradition-craft, .tradition-closing { padding-block: 29px 33px; }
  .tradition-intro-grid { display: block; }
  .tradition-intro h2 { font-size: clamp(21px, 6.4vw, 29px); line-height: 1.55; margin-bottom: 20px; }
  .tradition-intro .founder-copy { font-size: 14.5px; }
  /* Inside the side padding like the other photos: edge to edge it would pass 640px from about 640px wide. */
  .tradition-page .tradition-intro-photo { margin-top: 24px; }
  .tradition-origin-grid, .tradition-taste-grid, .tradition-craft-grid { display: flex; flex-direction: column; }
  /* align-self: start (above) would shrink these to their 0-width content in a flex column. */
  .tradition-craft-photo, .tradition-photo-pair { align-self: stretch; }
  .tradition-page .tradition-craft-photo { margin-bottom: 22px; }
  .tradition-photo-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
  .tradition-cities-grid { display: block; margin-top: 4px; }
  .tradition-cities-column { row-gap: 12px; margin-top: 12px; }
  .tradition-cities-copy { margin-top: 22px; }
  .tradition-closing-photo::before { padding-top: 66.4286%; }
  .tradition-closing-copy { margin-top: 22px; }
}