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

  創業者の想い (/founder/)

  Loaded only by page-founder.php. The page styles come from the client's HTML
  (founder-responsive-web.zip, 2026-10-09) and are scoped to the .founder-page wrapper; the
  hamburger rules at the end are not scoped, because the hamburger lives in footer.php,
  outside the wrapper.

==========================================================================================*/
@font-face {
  font-family: "Founder Serif";
  src: url("../fonts/founder-serif-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Founder Serif";
  src: url("../fonts/founder-serif-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* The client's design assumed browser defaults on <body>; the theme's body sets font-size 15px and
   line-height 1.5em, which children inherit as a fixed 22.5px. */
.founder-page {
  --founder-navy: #04142d;
  --founder-ink: #14264a;
  --founder-gold: #c8a54c;
  --founder-paper: #fffefa;
  color: var(--founder-ink);
  background: var(--founder-paper);
  font-family: "Founder Serif", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  font-synthesis: none;
  line-break: strict;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}
.founder-page *, .founder-page *::before, .founder-page *::after { box-sizing: border-box; }
.founder-page h1, .founder-page h2, .founder-page p, .founder-page figure { margin: 0; }
.founder-page h1, .founder-page h2 { font-weight: 700; }
.founder-hero-photo img, .founder-section figure img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder-section figure { position: relative; min-width: 0; overflow: hidden; }
.founder-mobile-break { display: none; }
/* The end of a title, kept on one line: where the column is too narrow for the whole line, the title breaks before
   it instead of leaving one or two characters on a line of their own. reset.css sets every span to normal weight. */
.founder-nobreak { display: inline-block; font-weight: inherit; }
.founder-container { width: min(100%, 1200px); padding-inline: 64px; margin-inline: auto; }
.founder-dark { background: var(--founder-navy); color: var(--founder-paper); }
.founder-masthead { color: var(--founder-paper); background: var(--founder-navy); border-bottom: 1.5px solid var(--founder-gold); padding: 22px 0 21px; }
.founder-brand { font-size: 22px; line-height: 1.5; }
.founder-masthead h1 { font-size: 40px; line-height: 1.5; margin-top: 2px; }
.founder-eyebrow { color: var(--founder-gold); font-family: Arial, sans-serif; font-size: 13px; line-height: 1.5; letter-spacing: .17em; margin-top: 12px !important; }
.founder-hero { position: relative; isolation: isolate; min-height: 590px; }
.founder-hero > .founder-container { position: relative; z-index: 2; }
.founder-hero-copy { padding-block: 74px 72px; }
.founder-hero h2 { font-size: 40px; line-height: 1.5; margin-bottom: 30px; }
.founder-hero .founder-copy { max-width: 555px; font-size: 18px; }
.founder-hero-photo { position: absolute; inset: 0 0 0 auto; width: 47.5%; z-index: 0; }
.founder-hero-photo img { object-position: 50% 8%; }
.founder-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--founder-navy), transparent 43%); }
.founder-section { padding-block: 40px; }
.founder-heading { position: relative; font-size: 31px; line-height: 1.55; padding-bottom: 34px; margin-bottom: 20px !important; }
.founder-heading::after { content: ""; position: absolute; bottom: 11px; left: 0; width: 135px; height: 1px; background: var(--founder-gold); }
.founder-heading::before { content: ""; position: absolute; z-index: 1; bottom: 7px; left: 63px; width: 9px; height: 9px; background: var(--founder-gold); clip-path: polygon(50% 0, 59% 34%, 85% 15%, 67% 42%, 100% 50%, 67% 58%, 85% 85%, 59% 66%, 50% 100%, 41% 66%, 15% 85%, 33% 58%, 0 50%, 33% 42%, 15% 15%, 41% 34%); }
.founder-heading-centered { text-align: center; font-size: 32px; }
.founder-heading-centered::after { left: calc(50% - 67.5px); }
.founder-heading-centered::before { left: calc(50% - 4.5px); }
.founder-copy { font-size: 17.5px; line-height: 1.85; }
.founder-copy p + p { margin-top: 16px; }
.founder-framed { border: 1px solid var(--founder-gold); }
.founder-beginning { min-height: 520px; }
.founder-beginning-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 48px; grid-template-areas: "heading photo" "copy photo"; grid-template-rows: auto 1fr; }
.founder-beginning h2 { grid-area: heading; }
.founder-beginning .founder-copy { grid-area: copy; }
.founder-beginning-photo { grid-area: photo; min-height: 420px; align-self: stretch; margin-block: 10px !important; }
.founder-pyramid { padding-top: 35px; min-height: 710px; }
.founder-pyramid-grid { display: grid; grid-template-columns: minmax(0, 450fr) minmax(0, 588fr); gap: 18px 34px; grid-template-areas: "tower pair" "tower first" "tower last"; grid-template-rows: 160px auto 1fr; }
.founder-pyramid-photo { grid-area: tower; min-height: 565px; }
.founder-pyramid-photo img { object-position: 50% 44%; }
.founder-photo-pair { grid-area: pair; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.founder-pyramid-first { grid-area: first; }
.founder-pyramid-last { grid-area: last; }
.founder-world { min-height: 548px; padding-block: 36px; }
.founder-world-grid { display: grid; grid-template-columns: minmax(0, 605fr) minmax(0, 418fr); column-gap: 49px; grid-template-rows: auto auto 1fr; grid-template-areas: "heading photos" "first photos" "last photos"; }
.founder-world h2 { grid-area: heading; }
.founder-world-photos { grid-area: photos; display: grid; gap: 12px; grid-template-rows: repeat(2, 232px); }
.founder-world-market img { object-position: 50% 36%; }
.founder-world-toys img { object-position: 50% 43%; }
.founder-world-first { grid-area: first; }
.founder-world-last { grid-area: last; margin-top: 18px; }
.founder-venue-grid { display: grid; grid-template-columns: minmax(0, 450fr) minmax(0, 586fr); column-gap: 36px; grid-template-areas: "photo heading" "photo copy"; grid-template-rows: auto 1fr; }
.founder-venue-grid h2 { grid-area: heading; font-size: 29px; }
.founder-venue-grid .founder-copy { grid-area: copy; }
.founder-venue-photo { grid-area: photo; align-self: stretch; min-height: 310px; }
.founder-current { min-height: 405px; }
.founder-current .founder-venue-photo img { object-position: 55% 50%; }
.founder-future { min-height: 395px; padding-block: 36px; }
.founder-future .founder-venue-photo { min-height: 323px; }
.founder-footer { padding-block: 64px 40px; text-align: center; }
.founder-footer-rule { position: relative; height: 1px; background: var(--founder-gold); margin-bottom: 16px; }
.founder-footer-rule span { display: block; position: absolute; inset: -4px auto auto calc(50% - 4.5px); width: 9px; height: 9px; background: var(--founder-gold); clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%); }
.founder-footer a { color: inherit; text-underline-offset: .25em; font-size: 13px; }
.founder-footer a:focus-visible { outline: 2px solid var(--founder-gold); outline-offset: 6px; }
.founder-footer p { margin-top: 20px; color: var(--founder-gold); font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .33em; }
/* The ticket banner (common.css .btn-ticket-fixed: 180px wide, 30px from the right edge) and the page-top icon
   (100px wide, 20px from the right) float over the right side of the page. From 1101px the content keeps 240px
   from both edges, 30px clear of the banner, but stays at least 664px wide (at 1101px with a 17px scrollbar that
   still clears the banner); the container's 64px padding is part of the 240px. Below 1101px the client's layout
   is kept. */
@media (min-width: 1101px) {
  .founder-container { width: clamp(792px, 100% - 352px, 1200px); }
  /* The hero photo starts at 52.5% of the width, whatever the container does: the copy and the title must still end
     left of it. The title's first line is 11 characters, so it gets (52.5vw - 240px - 12px gap) / 11, at most the
     client's 40px (from about 1320px). */
  .founder-hero .founder-copy { max-width: min(555px, 52%); }
  .founder-hero h2 { font-size: clamp(30px, (52.5vw - 252px) / 11, 40px); }
}
/* Below about 1280px the capped copy is narrower than the client's first line 「ドイツのクリスマスマーケットで感じた
   雰囲気を、」 (23 characters, 414px), and their line break after it would leave a word fragment on a line of its own.
   Without it the line wraps before 「雰囲気を、」. Up to 1299px, so a 17px scrollbar is covered too. */
@media (min-width: 1101px) and (max-width: 1299px) {
  .founder-hero .founder-desktop-break { display: none; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .founder-container { padding-inline: 36px; }
  .founder-hero h2 { font-size: 34px; }
  .founder-hero .founder-copy { max-width: 53%; font-size: 16px; }
  .founder-heading, .founder-heading-centered { font-size: 26px; }
  .founder-venue-grid h2 { font-size: 25px; }
  .founder-copy { font-size: 16px; }
  .founder-beginning-grid, .founder-world-grid { column-gap: 28px; }
  .founder-pyramid-grid, .founder-venue-grid { column-gap: 28px; }
  .founder-pyramid-grid { grid-template-rows: 140px auto 1fr; }
  .founder-pyramid-photo { min-height: 520px; }
}
@media (max-width: 767px) {
  .founder-mobile-break { display: initial; }
  .founder-desktop-break { display: none; }
  .founder-container { padding-inline: 24px; }
  .founder-masthead { padding-block: 18px 22px; }
  .founder-brand { font-size: 13px; }
  .founder-masthead h1 { font-size: 29px; line-height: 1.5; margin-top: 7px; }
  .founder-eyebrow { font-size: 8.5px; letter-spacing: .17em; margin-top: 14px !important; }
  .founder-hero { min-height: 0; }
  .founder-hero-copy { padding-block: 29px 24px; }
  .founder-hero h2 { font-size: clamp(21px, 6.4vw, 29px); line-height: 1.55; margin-bottom: 24px; }
  .founder-hero .founder-copy { max-width: none; font-size: 14.5px; }
  .founder-hero-photo { position: relative; width: 100%; height: auto; }
  .founder-hero-photo::before { content: ""; display: block; padding-top: 101.2821%; }
  .founder-hero-photo::after { background: linear-gradient(var(--founder-navy), transparent 16%); }
  .founder-hero-photo img { position: absolute; inset: 0; }
  .founder-section { padding-block: 29px 33px; min-height: 0; }
  .founder-copy { font-size: 14.5px; line-height: 1.88; }
  .founder-copy p + p { margin-top: 16px; }
  .founder-heading, .founder-heading-centered, .founder-venue-grid h2 { font-size: 23px; line-height: 1.55; padding-bottom: 34px; margin-bottom: 20px !important; text-align: left; }
  .founder-heading-centered::after { left: 0; }
  .founder-heading-centered::before { left: 63px; }
  .founder-beginning h2 { font-size: clamp(18px, 5.38vw, 23px); }
  .founder-beginning-grid { display: flex; flex-direction: column; }
  .founder-beginning-photo { min-height: 0; margin-block: 0 22px !important; }
  .founder-section figure::before { content: ""; display: block; }
  .founder-beginning-photo::before { padding-top: 66.6667%; }
  .founder-pyramid-grid { display: flex; flex-direction: column; gap: 22px; }
  .founder-pyramid-photo { min-height: 0; order: 0; }
  .founder-pyramid-photo::before { padding-top: 116.3743%; }
  .founder-pyramid-photo img { object-position: 50% 38%; }
  .founder-pyramid-first { order: 1; }
  .founder-photo-pair { order: 2; gap: 12px; }
  .founder-photo-pair figure::before { padding-top: 71.5152%; }
  .founder-pyramid-last { order: 3; }
  .founder-world-grid { display: flex; flex-direction: column; }
  .founder-world-grid h2 { order: 0; }
  .founder-world-photos { display: contents; }
  .founder-world-market { order: 1; margin-bottom: 22px !important; }
  .founder-world-market::before { padding-top: 59.4872%; }
  .founder-world-market img { object-position: 50% 25%; }
  .founder-world-first { order: 2; margin-bottom: 20px; }
  .founder-world-toys { order: 3; }
  .founder-world-toys::before { padding-top: 52.5641%; }
  .founder-world-last { order: 4; margin-top: 22px; }
  .founder-world-market, .founder-world-toys { margin-inline: -24px !important; width: calc(100% + 48px); }
  .founder-venue-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "photo" "copy"; grid-template-rows: auto auto auto; }
  .founder-venue-photo { order: 1; min-height: 0; margin-bottom: 22px !important; }
  .founder-venue-photo::before { padding-top: 66.6667%; }
  .founder-current .founder-venue-photo { width: calc(100% + 48px); margin-inline: -24px !important; }
  .founder-current .founder-venue-photo::before { padding-top: 60.7692%; }
  .founder-future .founder-venue-photo { min-height: 0; }
  .founder-footer { padding-block: 32px 32px; }
  .founder-footer a { font-size: 10px; }
  .founder-footer p { font-size: 7px; letter-spacing: .25em; margin-top: 20px; }
}

/*-------------- Hamburger at every width --------------*/
/* This page has no header nav: the site's SP hamburger (common.css, ≤678px only) is its menu on PC
   too. At ≤678px common.css applies unchanged; above that the same menu is redrawn with px sizes and
   its content centred, since the SP rules use vw paddings. */
@media (min-width: 679px) {
  .hamburger__button,
  .hamburger__button__close {
    display: block;
    width: 72px;
    position: fixed;
    top: 28px;
    right: 28px;
    z-index: 10;
    cursor: pointer;
  }
  /* MENU stays at the top of the page instead of following the scroll; CLOSE is inside the fixed menu. */
  .hamburger__button {
    position: absolute;
  }
  .hamburger__button img,
  .hamburger__button__close img {
    display: block;
    width: 100%;
    height: auto;
  }
  .hamburger__menu {
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #015830;
    /* style.js opens the menu with an inline overflow: scroll, which draws both scrollbars on Windows. */
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .hamburger__menu__inner {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 0;
  }
  .hamburger__menu__logo {
    width: 150px;
    margin: 0 auto 24px;
  }
  .hamburger__menu__logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .hamburger__menu__list {
    margin: 0 auto 32px;
  }
  .hamburger__menu__list li a {
    text-decoration: none;
    position: relative;
    display: block;
    padding: 18px 48px 18px 24px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    border-top: 1px solid #ddc45d;
  }
  .hamburger__menu__list li:last-child a {
    border-bottom: 1px solid #ddc45d;
  }
  .hamburger__menu__list li a:hover {
    background-color: rgba(255, 255, 255, .08);
  }
  .hamburger__menu__list li a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: solid 2px #ddc45d;
    border-right: solid 2px #ddc45d;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .hamburger__sns__list {
    display: flex;
    justify-content: center;
  }
  .hamburger__sns__list li {
    flex: 0 0 40px;
    margin: 0 8px;
  }
  .hamburger__sns__list li a {
    text-decoration: none;
  }
  .hamburger__sns__list li a img {
    display: block;
    width: 100%;
    height: auto;
  }
}