/* Top-page entries to the LPs, one card each: ドイツのクリスマスマーケットの伝統, 東京クリスマスマーケットの軌跡, 創業者の想い
   (the client's docs of 2026-10-15: 伝統 left of 軌跡, 軌跡 left of 創業者 on PC; above them on phones). Side by side
   from 981px, one column per card (another LP is one more <li>); one under the other below, photo beside the text on
   tablets and above it on phones.
   The card styling is the client's founder-entry.css (founder-entry-pc.zip, one horizontal card) turned into a
   vertical card, with #contents in front of every selector: common.css styles every #contents section (cream box,
   padding, rounded corners) and the body sets a gothic font and a fixed 22.5px line height. The block stays a
   <section> for the theme's section spacing, which also places the next section (今年の見どころ). The font is the
   今年の見どころ Mincho stack (the client's preview is Mincho; their CSS says inherit). The section opens with its own
   heading, クリスマスマーケットとは, styled like the 今年の見どころ title. */
#contents .tcm-lp-entry,
#contents .tcm-lp-entry * {
  box-sizing: border-box;
}

#contents .tcm-lp-entry {
  width: 100%;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #07172f;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-size: 16px;
  line-height: normal;
  text-align: left;
}

/* As .tophighlights__title (top.css), with the spacing of its section's top and head. */
#contents .tcm-lp-entry .tcm-lp-entry__heading {
  margin: 0 0 30px;
  padding: 30px 0 0;
  color: #fff9e9;
  font-family: inherit;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}

#contents .tcm-lp-entry .tcm-lp-entry__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The card is the positioned ancestor of its link's ::after (below), so each card opens its own LP. */
#contents .tcm-lp-entry .tcm-lp-entry__card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px;
  background: #fff9ee;
  list-style: none;
}

#contents .tcm-lp-entry .tcm-lp-entry__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1.9 / 1;
  object-fit: cover;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* A column, so the links sit at the bottom of their cards whatever the length of the text above. */
#contents .tcm-lp-entry .tcm-lp-entry__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

#contents .tcm-lp-entry .tcm-lp-entry__title {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #07172f;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

#contents .tcm-lp-entry .tcm-lp-entry__title::before,
#contents .tcm-lp-entry .tcm-lp-entry__title::after {
  content: none;
}

#contents .tcm-lp-entry .tcm-lp-entry__description {
  margin: 0 0 24px;
  padding: 0;
  color: #27344a;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* A narrow column breaks before the phrase instead of leaving its last characters on a line of their own.
   reset.css sets every span to normal weight. */
#contents .tcm-lp-entry .tcm-lp-entry__nobreak {
  display: inline-block;
  font-weight: inherit;
}

/* align-self: the underline stays under the text instead of spanning the column. */
#contents .tcm-lp-entry a.tcm-lp-entry__link {
  display: inline-flex;
  align-self: flex-start;
  align-items: baseline;
  max-width: 100%;
  margin: auto 0 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: #a52a37;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  text-decoration: none;
  box-shadow: none;
}

#contents .tcm-lp-entry a.tcm-lp-entry__link:visited {
  color: #a52a37;
}

#contents .tcm-lp-entry a.tcm-lp-entry__link:hover {
  color: #7f1f2b;
}

#contents .tcm-lp-entry a.tcm-lp-entry__link:focus-visible {
  outline: 2px solid #a52a37;
  outline-offset: 5px;
}

/* The whole card opens the LP: the link's ::after covers its card, so it stays one real link (new tab, screen
   readers) and hovering anywhere on the card turns it the hover colour. The link itself must stay unpositioned.
   No z-index: the fixed ticket banner (z-index 1), PAGE TOP (10) and the phone MENU (10) stay on top where they
   float over a card. top/right/bottom/left rather than inset, for Safari before 14.1. */
#contents .tcm-lp-entry a.tcm-lp-entry__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* The client's 16px flex gap, as a margin: Safari before 14.1 has no gap in flex layout. */
#contents .tcm-lp-entry .tcm-lp-entry__arrow {
  flex-shrink: 0;
  margin-left: 16px;
  font-size: 1em;
}

@media (max-width: 980px) {
  #contents .tcm-lp-entry .tcm-lp-entry__list {
    gap: 16px;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__card {
    padding: 20px;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__image {
    margin-bottom: 20px;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__title {
    font-size: 21px;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__description {
    font-size: 15px;
    line-height: 1.85;
  }
}

/* Tablets: three columns would leave about 200px per card, so the cards go one under the other, photo beside the
   text, as the client's founder card was laid out (founder-entry-pc.zip). */
@media (min-width: 679px) and (max-width: 980px) {
  #contents .tcm-lp-entry .tcm-lp-entry__list {
    grid-auto-flow: row;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__card {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 52fr);
    align-items: center;
    column-gap: 28px;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__image {
    margin-bottom: 0;
  }
}

/* Phones: one card under the other, each laid out as the founder card was (the client's zip has PC only). */
@media (max-width: 678px) {
  #contents .tcm-lp-entry .tcm-lp-entry__heading {
    margin-bottom: 20px;
    padding-top: 20px;
    font-size: 26px;
    letter-spacing: 0.04em;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__list {
    grid-auto-flow: row;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__title {
    margin-bottom: 14px;
    font-size: 22px;
  }

  #contents .tcm-lp-entry .tcm-lp-entry__description {
    margin-bottom: 18px;
  }

  #contents .tcm-lp-entry a.tcm-lp-entry__link {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  #contents .tcm-lp-entry .tcm-lp-entry__heading {
    font-size: 23px;
  }
}