:root {
      --accent: #111;
      --deep: #000;
      --paper: #fff;
      --light: #f4f4f4;
      --white: #fff;
      --ink: #111;
      --muted: #666;
      --green: #2c8c72;
      --yellow: #f4c95d;
      --coral: #e96d51;
      --key-blue: #42a0d9;
      --key-pink: #f0af98;
      --modal-blue: #5c8dcf; /* モーダル背景の青（20%の色乗せ・スクリーン合成で共通） */
      --line: rgba(0, 0, 0, .14);
      --shadow: 0 18px 54px rgba(0, 0, 0, .12);
      --content-inset: max(clamp(36px, 10vw, 144px), calc((100vw - 1468px) / 2 + clamp(36px, 10vw, 144px)));
    }

    * {
      box-sizing: border-box;
    }

    html {
      /* SPA内のページ遷移はスクロール位置を瞬時にリセットしたいので、CSSの
         smoothスクロールはグローバルには適用しない（openPageRoute/openCompanyRoute
         側で明示的にinstantを指定している）。 */
      scroll-padding-top: 96px;
      /* スクロールバーの出入り（モーダル表示時のスクロール固定や、短いページへの
         遷移）で本文の幅が変わり、左右にガタつくのを防ぐ。スクロールバーの分の
         余白を常に確保しておく。 */
      scrollbar-gutter: stable;
    }

    body {
      background: var(--white);
      border: 1px solid transparent;
      color: var(--ink);
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.7;
      letter-spacing: 0;
      margin: 0;
      overflow-x: hidden;
    }

    a {
      border-radius: 4px;
      color: inherit;
      text-decoration: none;
    }

    img {
      display: block;
      max-width: 100%;
    }

    button {
      font: inherit;
      letter-spacing: 0;
    }

    p,
    h1,
    h2,
    h3 {
      margin: 0;
    }

    .contents {
      align-items: start;
      background: var(--white);
      display: flex;
      flex-direction: column;
      overflow-x: clip;
      position: relative;
      width: 100%;
    }

    #app {
      width: 100%;
    }

    .site-header {
      align-items: start;
      color: var(--ink);
      display: grid;
      gap: 18px;
      grid-template-columns: auto minmax(0, 1fr);
      min-height: 88px;
      left: 0;
      padding: clamp(12px, calc(3vw + 3vh), 50px) clamp(12px, calc(3vw + 3vh), 50px) 0;
      pointer-events: none;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 20000;
    }

    /* ヘッダー自体はクリックを透過させ（背景グラデーションが領域が広いため下の
       要素のタップを邪魔しないように）、実際に操作するロゴとナビだけ有効化する。 */
    .site-logo,
    .site-nav {
      pointer-events: auto;
    }

    .site-header::before {
      background: linear-gradient(to bottom, rgba(200, 210, 220, 1) 0%, rgba(200, 210, 220, 0) 100%);
      content: "";
      height: 40vh;
      left: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 0;
      transition: background .28s ease, height .5s ease;
      z-index: -1;
    }

    body.is-header-over-visual .site-header::before {
      background: linear-gradient(to bottom, rgba(51, 51, 51, .5) 0%, rgba(51, 51, 51, 0) 100%);
    }

    .site-logo img {
      height: auto;
      object-fit: contain;
      transition: filter .28s ease, width .28s ease;
      width: calc(12vw + 12vh);
    }

    body.is-header-over-visual .site-logo img {
      filter: brightness(0) invert(1);
    }

    .site-nav {
      align-items: center;
      align-self: start;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: flex-end;
      justify-self: end;
      min-width: 0;
      padding-top: 0;
      transform-origin: top right;
      transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .site-nav a {
      background: var(--white);
      color: var(--ink);
      cursor: pointer;
      font-size: 1rem;
      font-weight: 900;
      padding: 9px 18px;
      box-shadow: none;
      text-align: center;
      border-radius: 24px;
      transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
      white-space: nowrap;
    }

    body.is-header-over-visual .site-nav a {
      background: var(--white);
      color: var(--ink);
    }

    .site-nav a:hover,
    .site-nav a.is-active {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--white);
    }

    body.is-header-over-visual .site-nav a:hover,
    body.is-header-over-visual .site-nav a.is-active {
      background: var(--ink);
      border-color: rgba(255, 255, 255, .2);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
      color: var(--white);
    }

    .site-nav__label {
      display: inline-block;
      opacity: 1;
      transition: opacity .3s ease;
    }

    .site-nav a.site-nav__social {
      align-items: center;
      background: var(--white);
      border-radius: 999px;
      box-sizing: border-box;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      height: 42px;
      justify-content: center;
      padding: 9px 9px;
      transition: background-color .2s ease;
      width: 42px;
    }

    .site-nav a.site-nav__social:hover {
      background: var(--ink);
    }

    .site-nav__socialIcon {
      display: block;
      height: 18px;
      width: 18px;
    }

    .site-nav__social:hover .site-nav__socialIcon {
      filter: invert(1);
    }

    body.is-header-over-visual .site-nav__socialIcon {
      filter: none;
    }

    body.is-header-over-visual .site-nav__social:hover .site-nav__socialIcon {
      filter: invert(1);
    }

    .fixed-bottom-nav {
      align-items: flex-end;
      --tool-nav-icon-height: 200px;
      --tool-nav-overlap: 40px;
      bottom: -40px;
      display: flex;
      gap: 0;
      justify-content: center;
      pointer-events: auto;
      position: fixed;
      right: 18px;
      z-index: 20010;
    }

    .fixed-bottom-nav a {
      align-items: center;
      display: flex;
      flex: 0 0 auto;
      height: var(--tool-nav-icon-height);
      justify-content: center;
      position: relative;
      transition: transform .42s cubic-bezier(.65, 0, .35, 1);
    }

    .fixed-bottom-nav a + a {
      margin-left: calc(var(--tool-nav-overlap) * -1);
    }

    .fixed-bottom-nav__icon {
      display: block;
      height: var(--tool-nav-icon-height);
      max-width: none;
      position: relative;
      transform: translateY(30px);
      width: auto;
      z-index: 1;
    }

    .fixed-bottom-nav__title {
      display: block;
      height: auto;
      left: 50%;
      max-width: none;
      position: absolute;
      top: 100px;
      transform: translateX(-50%);
      width: 92px;
      z-index: 2;
    }

    .app-refresh-button {
      background: rgba(255,255,255,.94);
      border: 0;
      border-radius: 999px;
      bottom: max(18px, env(safe-area-inset-bottom));
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
      color: var(--ink);
      cursor: pointer;
      display: none;
      font-size: .82rem;
      font-weight: 900;
      left: max(18px, env(safe-area-inset-left));
      padding: 9px 14px;
      position: fixed;
      z-index: 20020;
    }

    body.is-standalone-app.is-menu-open .app-refresh-button {
      display: block;
    }

    @media screen and (max-width: 720px) {
      .fixed-bottom-nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
      }

      body.is-standalone-app.is-menu-open .fixed-bottom-nav a:first-child {
        transform: translateX(34px);
      }
    }

    body.is-company-detail .visual,
    body.is-page-view .visual {
      display: none;
    }

    body.is-company-detail .site-header::before,
    body.is-page-view .site-header::before {
      background: linear-gradient(to bottom, rgba(200, 210, 220, 1) 0%, rgba(200, 210, 220, 0) 100%);
      height: clamp(140px, 36vw, 360px);
    }

    body.is-header-over-visual .site-header::before {
      background: linear-gradient(to bottom, rgba(80, 80, 80, 0.8) 0%, rgba(80, 80, 80, 0) 100%);
    }

    body.is-company-detail .site-logo img,
    body.is-page-view .site-logo img {
      width: calc(12vw + 12vh);
    }

    body.is-company-detail #app
    {
      padding-top: 0;
    }
    body.is-page-view #app {
      padding-top: var(--header-height, 260px);
    }

    .visual {
      background-color: var(--white);
      display: flex;
      flex-direction: column;
      height: calc(30vw + 30vh);
      margin-bottom: 0;
      min-height: 720px;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .visual__image {
      height: 100%;
      inset: 0;
      opacity: 1;
      object-fit: cover;
      position: absolute;
      width: 100%;
    }

    .visual__slideshow {
      height: 100%;
      inset: 0;
      overflow: hidden;
      position: absolute;
      width: 100%;
    }

    .visual__slide {
      height: 100%;
      inset: 0;
      object-fit: cover;
      opacity: 0;
      position: absolute;
      transform: scale(1.08);
      transition: opacity 1s ease, transform 5s ease-in-out;
      width: 100%;
      z-index: 0;
    }

    .visual__slide.is-active {
      opacity: 1;
      transform: scale(1);
      z-index: 1;
    }

    .visual__gradient {
      background: linear-gradient(to top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
      height: 100%;
      inset: 0;
      pointer-events: none;
      position: absolute;
      width: 100%;
      z-index: 5;
    }

    .visual .title {
      align-items: end;
      bottom: 96px;
      box-sizing: border-box;
      color: var(--ink);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      left: 0;
      bottom:0;
      max-width: calc(1360px + 25%);
      padding: 10% 10% calc(10% + 10px);
      position: absolute;
      width: 100%;
      z-index: 9;
    }

    .visual .title__wrap {
      display: flex;
      flex-direction: column;
      gap: 18px;
      width: 100%;
    }

    .visual .title .txt-anm {
      color: var(--ink);
      display: block;
      font-size: clamp(36px, 5.2vw, 72px);
      font-weight: 900;
      letter-spacing: 0;
      line-height: .96;
      max-width: 1120px;
      text-align: left;
      width: fit-content;
    }

    .visual .title .txt-anm span {
      display: block;
      white-space: nowrap;
    }

    .hero-word {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 4px;
      width: fit-content;
    }

    .hero-word {
      align-items: flex-start;
      font-size: 31.2px;
      text-align: left;
    }

    .hero-word span {
      color: var(--white);
      font-family: "Plus Jakarta Sans", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
    }

    .hero-word .hero-word__year {
      font-size: 1em;
      line-height: 1;
    }

    .hero-word .hero-word__dates {
      font-size: calc(3vw + 3vh);
      line-height: .95;
    }

    .hero-word .hero-word__weekday {
      font-size: .5em;
    }

    .arch {
      bottom: -1px;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 10;
    }

    .arch path {
      fill: var(--white);
    }

    .element-marquee {
      --element-tile-width: 1154px;
      animation: elementBandScroll 36s linear infinite;
      background-image: url("../img/element.svg");
      background-position: 0 100%;
      background-repeat: repeat-x;
      background-size: var(--element-tile-width) 100%;
      bottom: -58px;
      height: clamp(220px, 19vw, 320px);
      left: 0;
      overflow: hidden;
      pointer-events: none;
      position: absolute;
      right: 0;
      z-index: 7;
    }

    .element-marquee__track {
      display: none;
    }

    .concept-element-marquee {
      bottom: auto;
      height: clamp(150px, 15vw, 240px);
      margin-top: clamp(18px, 4vw, 54px);
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
    }

    @keyframes elementBandScroll {
      from {
        background-position: 0 100%;
      }

      to {
        background-position: var(--element-tile-width) 100%;
      }
    }

    .detail {
      box-sizing: border-box;
      color: var(--ink);
      margin: 0 auto;
      max-width: 1468px;
      padding: clamp(56px, 8vw, 116px) clamp(36px, 10vw, 144px) clamp(58px, 8vw, 112px);
      width: 100%;
    }

    .section_intro {
      padding-top: clamp(40px, 7vw, 92px);
    }

    .titleHead {
      align-items: baseline;
      color: var(--ink);
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      font-size: clamp(34px, 6vw, 72px);
      font-weight: 900;
      line-height: 1;
      margin: 0 0 28px;
    }

    .titleHead span:first-child {
      font-family: "Plus Jakarta Sans", sans-serif;
      letter-spacing: 0;
    }

    .titleHead .subTitle {
      color: var(--muted);
      font-size: clamp(14px, 1.6vw, 18px);
      line-height: 1.5;
    }

    .concept {
      align-items: start;
      display: grid;
      gap: clamp(64px, 10vw, 150px);
      grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
    }

    .concept-copy {
      align-items: flex-start;
      display: block;
      justify-content: flex-start;
      min-height: 420px;
      padding-top: .15em;
    }

    .concept-copy span {
      color: var(--ink);
      display: block;
      font-size: clamp(32px, 4vw, 58px);
      font-weight: 900;
      letter-spacing: .08em;
      line-height: 1.52;
      writing-mode: vertical-rl;
    }

    .concept-copy__break {
      display: none;
    }

    .concept .theme {
      background: var(--light);
      border-radius: 8px;
      color: var(--ink);
      display: inline-grid;
      font-size: clamp(42px, 8vw, 106px);
      font-weight: 900;
      letter-spacing: 0;
      line-height: .9;
      margin-top: 24px;
      padding: 22px 24px 18px;
    }

    .lead {
      color: var(--ink);
      font-size: clamp(16px, 2vw, 20px);
      font-weight: 800;
      line-height: 2;
    }

    .lead p + p {
      margin-top: 1em;
    }

    .concept .lead {
      font-size: clamp(14px, 1.45vw, 17px);
      font-weight: 600;
      line-height: 2.05;
    }

    .detail.light {
      background: var(--white);
      color: var(--ink);
      max-width: none;
      padding-left: clamp(36px, 10vw, 144px);
      padding-right: clamp(36px, 10vw, 144px);
      width: 100%;
    }

    .detail.light .section-inner {
      margin: 0 auto;
      max-width: 1180px;
    }

    .detail.light .titleHead {
      color: var(--ink);
    }

    .detail.light .titleHead .subTitle,
    .detail.light .lead {
      color: var(--muted);
    }

    .photo-grid {
      display: grid;
      gap: 14px;
      grid-template-columns: 1.3fr .85fr .85fr;
      margin-top: 34px;
    }

    .photo-grid .img {
      aspect-ratio: 4 / 3;
      background: var(--light);
      border-radius: 8px;
      min-height: 180px;
      object-fit: cover;
      overflow: hidden;
      width: 100%;
    }

    .photo-grid .img:first-child {
      grid-row: span 2;
      height: 100%;
    }

    .overview-list {
      display: grid;
      gap: 1px;
      margin-top: 30px;
    }

    .overview-row {
      border-top: 1px solid var(--line);
      display: grid;
      gap: 18px;
      grid-template-columns: 160px minmax(0, 1fr);
      padding: 18px 0;
    }

    .overview-row dt {
      color: var(--ink);
      font-weight: 900;
    }

    .overview-row dd {
      color: var(--ink);
      font-weight: 800;
      margin: 0;
    }

    .text-button {
      appearance: none;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink);
      cursor: pointer;
      flex-shrink: 0;
      font-weight: 900;
      min-height: 44px;
      padding: 10px 14px;
      white-space: nowrap;
    }

    .text-button.dark {
      background: var(--ink);
      color: var(--white);
    }

    .section-titlebar {
      align-items: start;
      display: flex;
      gap: 18px;
      justify-content: space-between;
    }

    .section-titlebar .titleHead {
      margin-bottom: 28px;
    }

    .companyCarousel {
      display: grid;
      gap: 14px;
      margin-left: calc(50% - 50vw);
      margin-top: clamp(28px, 5vw, 58px);
      overflow: hidden;
      width: 100vw;
    }

    .companyCarousel__row {
      padding-left: var(--content-inset);
    }

    #companies .companyCarousel {
      gap: 28px;
    }

    .companyCarousel__row {
      cursor: grab;
      overflow: hidden;
      touch-action: pan-y;
      user-select: none;
      white-space: nowrap;
    }

    .companyCarousel__row.is-dragging {
      cursor: grabbing;
    }

    .companyCarousel__track {
      display: inline-flex;
      min-width: max-content;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }

    .companyList_item,
    .program-card,
    .news-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink);
      overflow: hidden;
    }

    a.companyList_item {
      display: block;
      text-decoration: none;
    }

    .program-card .img {
      aspect-ratio: 16 / 10;
      background: var(--light);
      object-fit: cover;
      width: 100%;
    }

    .companyList_item .txt,
    .program-card .txt,
    .news-card {
      display: grid;
      gap: 8px;
      padding: 18px;
    }

    .companyList_item .txt {
      align-content: stretch;
      grid-template-rows: auto 1fr;
      min-height: 132px;
    }

    .companyCarousel:not(.photoCarousel) .companyList_item .txt {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;
    }

    .companyCarousel:not(.photoCarousel) .companyList_item .title {
      width: 100%;
    }

    .company-card__bottom {
      align-items: stretch;
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(0, 1fr) auto;
      width: 100%;
    }

    .companyList_item .title,
    .program-card .title,
    .news-card .title {
      color: var(--ink);
      font-size: 20px;
      font-weight: 900;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .companyList_item {
      flex: 0 0 clamp(220px, 24vw, 330px);
      white-space: normal;
    }

    .company-calendar {
      --company-calendar-color: var(--key-blue);
      align-self: end;
      display: grid;
      gap: 2px;
      grid-template-columns: repeat(7, 5px);
      grid-template-rows: repeat(3, 6px);
      justify-self: end;
    }

    .company-calendar.is-pink {
      --company-calendar-color: var(--key-pink);
    }

    .company-calendar__day {
      background: color-mix(in srgb, var(--company-calendar-color) 32%, transparent);
      border-radius: 2px;
      display: block;
      height: 100%;
      width: 5px;
    }

    .company-calendar__day.is-open {
      background: var(--company-calendar-color);
    }

    .company-calendar__day.is-empty {
      background: transparent;
    }

    .photo-card {
      aspect-ratio: auto;
      height: 132px;
    }

    .photo-card .img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    .event-card .txt {
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      gap: 12px;
      height: 100%;
      justify-content: space-between;
      min-height: 172px;
      padding-left: 56px;
      position: relative;
    }

    .event-card__body {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: 8px;
      justify-content: space-between;
      min-height: 0;
    }

    .event-card__timeRow {
      align-items: flex-end;
      display: flex;
      gap: 12px;
      justify-content: space-between;
      margin-top: auto;
    }

    .event-card__media {
      flex: 0 0 auto;
    }

    .event-card .date {
      color: var(--ink);
      font-size: 32px;
      font-weight: 900;
      line-height: 1;
    }

    .event-card .time {
      color: var(--muted);
      display: flex;
      flex: 1 1 auto;
      flex-wrap: wrap;
      font-size: 13px;
      font-weight: 900;
      gap: 4px 12px;
      line-height: 1.45;
      margin-top: 0;
      min-width: 0;
    }

    .event-card__date {
      color: var(--ink);
      flex-basis: 100%;
      font-size: 15px;
      font-weight: 900;
      margin-bottom: 2px;
    }

    .event-card .title {
      align-self: start;
      display: -webkit-box;
      font-size: 17px;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 1.45;
      max-height: calc(1.45em * 2);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .event-card .meta {
      align-self: stretch;
      border-bottom: 1px solid rgba(0, 0, 0, .12);
      padding-bottom: 10px;
      width: 100%;
    }

    .event-card .place {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.45;
    }

    .event-card .type-label {
      align-items: center;
      background: rgba(0, 0, 0, .2);
      border-bottom-right-radius: 8px;
      color: var(--ink);
      display: flex;
      font-size: 12px;
      font-weight: 800;
      height: fit-content;
      left: 0;
      justify-content: center;
      letter-spacing: 0;
      line-height: 1.1;
      padding: 13px 8px;
      position: absolute;
      top: 0;
      width: 34px;
      writing-mode: vertical-rl;
    }

    .event-card .type-label.is-tour {
      background: color-mix(in srgb, var(--key-pink) 72%, transparent);
    }

    .event-card .type-label.is-blue {
      background: color-mix(in srgb, var(--key-blue) 72%, transparent);
    }

    .event-card.is-clickable {
      cursor: pointer;
      transition: border-color .2s ease;
    }

    .event-card.is-clickable:hover,
    .event-card.is-clickable:focus-visible {
      border-color: #777;
      box-shadow: none;
      
    }

    .event-card__thumb {
      aspect-ratio: 1 / 1;
      background: var(--light);
      border-radius: 6px;
      display: block;
      object-fit: cover;
      width: 32px;
    }

    .eventManual {
      --event-card-width: clamp(240px, 27vw, 360px);
      margin-left: calc(50% - 50vw);
      margin-top: clamp(28px, 5vw, 58px);
      overflow: hidden;
      width: 100vw;
    }

    .eventManual__dates,
    .eventManual__cards {
      cursor: grab;
      overflow-x: auto;
      position: relative;
      scrollbar-width: none;
      touch-action: pan-y;
      user-select: none;
    }

    .eventManual__dates::-webkit-scrollbar,
    .eventManual__cards::-webkit-scrollbar {
      display: none;
    }

    .eventManual__dates.is-dragging,
    .eventManual__cards.is-dragging {
      cursor: grabbing;
    }

    .eventManual__dateTrack,
    .eventManual__cardTrack {
      display: flex;
      gap: 42px;
      min-width: max-content;
      padding: 0 var(--content-inset);
    }

    .eventManual__cardTrack {
      will-change: transform;
    }

    .eventManual__dateTrack {
      align-items: flex-end;
      padding-bottom: clamp(56px, 6vw, 76px);
    }

    .eventManual__divider {
      background: var(--ink);
      height: 28px;
      opacity: .45;
      width: 1px;
    }

    .eventManual__date {
      --event-date-size: clamp(15px, 2.1vw, 25px);
      appearance: none;
      background: transparent;
      border: 0;
      border-bottom: 2px solid transparent;
      color: var(--muted);
      cursor: pointer;
      display: inline-flex;
      align-items: flex-end;
      gap: .34em;
      font-size: var(--event-date-size);
      font-weight: 600;
      line-height: 1;
      opacity: .4;
      padding: 0 0 8px;
      transition: color .2s ease, opacity .2s ease;
      white-space: nowrap;
    }

    .eventManual__date.is-active {
      --event-date-size: clamp(45px, 6.3vw, 75px);
      border-color: var(--ink);
      color: var(--ink);
      gap: .11em;
      opacity: 1;
    }

    .eventManual__weekday {
      align-items: center;
      background: transparent;
      border-radius: 0;
      color: var(--ink);
      display: none;
      font-size: calc(var(--event-date-size) * .84);
      font-weight: 700;
      height: auto;
      justify-content: center;
      line-height: 1;
      margin-bottom: .26em;
      width: auto;
    }

    .eventManual__date.is-active .eventManual__weekday {
      background: transparent;
      border-radius: 0;
      display: inline-flex;
      font-size: calc(var(--event-date-size) * .36);
      height: auto;
      width: auto;
    }

    .eventManual__cards {
      padding-bottom: 8px;
    }

    .eventManual__dots {
      display: flex;
      gap: 4px;
      justify-content: flex-start;
      left: 0;
      min-height: 12px;
      padding: 0;
      pointer-events: none;
      position: absolute;
      top: calc(100% - clamp(34px, 4vw, 46px));
      transform: translateX(calc(var(--event-dots-x, 50vw) - 50%));
      z-index: 1;
    }

    .eventManual__dotColumn {
      display: grid;
      gap: 4px;
      grid-template-rows: repeat(2, 4px);
    }

    .eventManual__dot {
      background: rgba(0, 0, 0, .2);
      border-radius: 999px;
      display: block;
      height: 4px;
      transition: background-color .2s ease;
      width: 6px;
    }

    .eventManual__dot.is-empty {
      opacity: 0;
    }

    .eventManual__dot.is-visible {
      background: rgba(0, 0, 0, .5);
    }

    .eventManual__cardTrack {
      align-items: stretch;
      gap: 14px;
      padding-left: var(--content-inset);
      padding-right: var(--content-inset);
    }

    .eventManual__column {
      display: grid;
      flex: 0 0 var(--event-card-width);
      gap: 14px;
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .eventManual .event-card {
      border-color: rgba(0, 0, 0, .16);
      min-width: 0;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .eventManual .event-card.is-active {
      border-color: rgba(0, 0, 0, .16);
      box-shadow: none;
    }

    .companyList_item .subTitle,
    .program-card .subTitle,
    .news-card .subTitle {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
    }

    .companyList_item .meta {
      align-self: end;
      color: var(--muted);
      display: grid;
      font-size: 13px;
      font-weight: 900;
      gap: 2px;
      line-height: 1.55;
      margin-top: 4px;
    }

    .companyCarousel:not(.photoCarousel) .companyList_item .meta {
      overflow: hidden;
    }

    .companyCarousel:not(.photoCarousel) .companyList_item .meta span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @keyframes companySlideLeft {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @keyframes companySlideRight {
      from {
        transform: translateX(-50%);
      }

      to {
        transform: translateX(0);
      }
    }

    .program-grid,
    .news-grid {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 28px;
    }

    .companyList {
      display: grid;
      gap: 28px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: clamp(28px, 5vw, 58px);
    }


    .eventAreaFilter {
      align-items: center;
      background: var(--light);
      border-radius: 10px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      margin-top: clamp(20px, 3.5vw, 36px);
      overflow: hidden;
      padding: 6px 8px;
      position: relative;
      scrollbar-width: none;
      width: 100%;
    }

    .eventAreaFilter::after {
      background: linear-gradient(to right, rgba(245, 246, 247, 0), var(--light));
      bottom: 0;
      content: "";
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 0;
      width: clamp(42px, 8vw, 92px);
      z-index: 2;
    }

    .eventAreaFilter::-webkit-scrollbar {
      display: none;
    }

    .eventAreaFilter__btn {
      appearance: none;
      background: none;
      border: none;
      color: var(--ink);
      cursor: pointer;
      flex: 0 0 auto;
      font-family: inherit;
      padding: 10px 12px;
      text-decoration: none;
      white-space: nowrap;
    }

    .eventAreaFilter__track {
      align-items: center;
      display: flex;
      min-width: max-content;
      will-change: transform;
    }

    .eventAreaFilter__place {
      padding-left: 6px;
      padding-right: 6px;
    }

    .eventAreaFilter__btnLabel {
      border-bottom: 2px solid rgba(0, 0, 0, 0);
      display: inline-block;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: -.03em;
      padding-bottom: 2px;
    }

    .eventAreaFilter__btn:hover .eventAreaFilter__btnLabel,
    .eventAreaFilter__btn.is-active .eventAreaFilter__btnLabel {
      border-bottom: 2px solid var(--ink);
    }

    .eventAreaFilter__divider {
      background: var(--line);
      flex: 0 0 auto;
      height: 20px;
      width: 1px;
    }

    .eventDateGroups {
      margin-top: clamp(28px, 5vw, 58px);
    }

    .eventDateGroup {
      border-top: 1px solid var(--line);
      display: grid;
      gap: 20px;
      grid-template-columns: 100px minmax(0, 1fr);
      padding-top: 28px;
    }

    .eventDateGroup:first-child {
      border-top: none;
      padding-top: 0;
    }

    .eventDateGroup + .eventDateGroup {
      margin-top: 28px;
    }

    .eventDateGroup__rail {
      position: relative;
    }

    .eventDateGroup__date {
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: sticky;
      top: calc(var(--header-height, clamp(96px, 12vw, 150px)) + 32px);
    }

    .eventDateGroup__day {
      color: var(--ink);
      font-size: 40px;
      font-weight: 900;
      line-height: 1.2;
    }

    .eventDateGroup__weekday {
      color: var(--muted);
      font-size: 25px;
      font-weight: 700;
    }

    .eventDateGroup__cards {
      margin-top: 0;
    }

    .contact-panel {
      align-items: center;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      gap: 28px;
      grid-template-columns: .85fr 1.15fr;
      overflow: hidden;
    }

    .contact-panel .img {
      height: 100%;
      min-height: 320px;
      object-fit: cover;
      width: 100%;
    }

    .contact-panel .txt {
      color: var(--ink);
      display: grid;
      gap: 16px;
      padding: clamp(22px, 4vw, 48px);
    }

    .contact-panel .title {
      color: var(--ink);
      font-size: clamp(26px, 4vw, 44px);
      font-weight: 900;
      line-height: 1.2;
    }

    .link-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      list-style: none;
      margin: 8px 0 0;
      padding: 0;
    }

    .link-list a {
      background: var(--ink);
      color: var(--white);
      display: inline-flex;
      font-weight: 900;
      padding: 10px 14px;
    }

    .company-detail {
      min-height: 72vh;
      padding-top: 0;
    }

    .company-detail__head {
      display: grid;
      gap: 22px;
      margin-bottom: clamp(34px, 5vw, 68px);
    }

    .company-detail__head:not(.company-detail__head--body) {
      margin-bottom: 0;
    }

    .company-detail__head--body {
      margin-top: 22px;
    }

    .company-detail__visual + .company-detail__stickyTitle {
      margin-top: 22px;
    }

    .company-detail__head + .company-detail__stickyTitle {
      margin-top: 22px;
    }

    .company-detail__visual {
      background: var(--light);
      height: calc(30vw + 30vh);
      margin: 0 0 0 calc(50% - 50vw);
      min-height: 400px;
      overflow: hidden;
      position: relative;
      width: 100vw;
      background-color: #ddd;
    }

    .company-detail__visual > img {
      height: 100%;
      object-fit: cover;
      position: relative;
      width: 100%;
      z-index: 0;
    }

    .company-detail__visual .element-marquee {
      opacity: .96;
      z-index: 2;
    }

    .company-detail__visual .arch {
      z-index: 3;
    }

    .company-detail__stickyTitle {
      background: rgba(255, 255, 255, .92);
      border-bottom: 1px solid rgba(0, 0, 0, .08);
      display: grid;
      gap: 16px;
      margin-left: calc(var(--content-inset) * -1);
      margin-right: calc(var(--content-inset) * -1);
      padding: 12px var(--content-inset) 24px;
      position: sticky;
      top: calc(var(--site-header-height) + 10px);
      z-index: 80;
    }

    @supports (backdrop-filter: blur(10px)) {
      .company-detail__stickyTitle {
        backdrop-filter: blur(10px);
      }
    }

    .company-detail__title {
      color: var(--ink);
      font-size: clamp(36px, 5vw, 48px);
      font-weight: 900;
      line-height: 1.05;
    }

    .company-detail__meta {
      color: var(--ink);
      display: flex;
      flex-wrap: wrap;
      font-weight: 700;
      gap: 8px;
    }

    .company-detail__meta span,
    .company-detail__metaLink {
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink);
      display: inline-flex;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      padding: 8px 12px;
      white-space: nowrap;
    }

    .company-detail__info {
      margin-top: clamp(28px, 4vw, 48px);
    }

    .company-detail__gallery {
      margin: clamp(22px, 3vw, 36px) 0;
    }

    .company-detail__galleryGrid {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      margin-top: 18px;
    }

    .company-detail__photoCard {
      aspect-ratio: 4 / 3;
      background: var(--light);
      border-radius: 8px;
      display: block;
      margin: 0;
      overflow: hidden;
      position: relative;
    }

    .company-detail__photoCard img {
      display: block;
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    .company-detail__photoLabel {
      background: rgba(255, 255, 255, .86);
      border-radius: 8px 0 8px 0;
      color: var(--ink);
      font-size: 10px;
      font-weight: 900;
      left: 0;
      line-height: 1;
      padding: 6px 8px;
      position: absolute;
      top: 0;
    }

    /* 開発用: 画像ファイルID表示（SETTINGSでON/OFF） */
    .photoIdLabel__id {
      display: none;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-weight: 700;
      letter-spacing: 0;
    }

    .photoIdLabel.is-idOnly {
      display: none;
    }

    body.is-show-photo-id .photoIdLabel.is-idOnly {
      display: block;
    }

    body.is-show-photo-id .photoIdLabel__text {
      display: none;
    }

    body.is-show-photo-id .photoIdLabel__id {
      display: inline;
    }

    body.is-show-photo-id .photoIdLabel {
      z-index: 2;
    }

    .photo-card,
    .company-detail__modalPhoto {
      position: relative;
    }

    @media (max-width: 1180px) {
      .company-detail__galleryGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }

    @media (max-width: 920px) {
      .company-detail__galleryGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    .company-calendar-lg {
      margin-top: 4px;
      width: 100%;
    }

    .company-map {
      display: grid;
      gap: 18px;
    }

    .factory-map {
      margin-top: clamp(42px, 7vw, 88px);
    }

    .eventAreaMap {
      margin: clamp(34px, 5vw, 64px) 0 clamp(36px, 6vw, 72px);
    }

    .eventAreaMap .factory-map {
      margin-top: 0;
    }

    /* 予定と地域: サブナビ下のマップは10:4 */
    .eventAreaMap .company-map__canvas {
      aspect-ratio: 10 / 4;
      height: auto;
      min-height: 0;
    }

    .company-map__canvas {
      background: var(--light);
      border-radius: 14px;
      height: min(58vw, 540px);
      min-height: 360px;
      overflow: hidden;
      width: 100%;
    }

    .company-map__empty {
      align-items: center;
      background: var(--light);
      border-radius: 14px;
      color: var(--muted);
      display: flex;
      font-size: 13px;
      font-weight: 800;
      min-height: 240px;
      padding: 24px;
    }

    .company-map-marker {
      background: transparent;
      border: 0;
      height: auto !important;
      overflow: visible;
      width: auto !important;
    }

    .company-map-marker__body {
      border: 1px solid rgba(0, 0, 0, .7);
      border-radius: 999px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
      cursor: pointer;
      display: grid;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      overflow: hidden;
      padding: 8px 10px;
      position: relative;
      transform: translate(-50%, -50%);
      transition: border-radius .2s ease, padding .2s ease, transform .2s ease;
      white-space: nowrap;
      width: max-content;
    }

    .company-map-marker--main .company-map-marker__body {
      background: var(--white);
      color: var(--ink);
    }

    .company-map-marker--near .company-map-marker__body {
      background: var(--ink);
      color: var(--white);
    }

    .company-map-dot {
      background: transparent;
      border: 0;
      height: 10px !important;
      overflow: visible;
      width: 10px !important;
    }

    .company-map-dot::before {
      background: var(--white);
      border: 1px solid rgba(0, 0, 0, .45);
      border-radius: 50%;
      box-shadow: 0 3px 12px rgba(0, 0, 0, .24);
      content: "";
      display: block;
      height: 10px;
      transform: translate(-50%, -50%);
      width: 10px;
    }

    /* 点マーカーのタップ判定を広げる（見た目は10pxのまま、判定は約32px） */
    .company-map-dot::after {
      content: "";
      height: 32px;
      left: -16px;
      position: absolute;
      top: -16px;
      width: 32px;
    }

    .company-map-marker__image {
      display: none;
      height: 68px;
      object-fit: cover;
      aspect-ratio: 16 / 9;
      width: 100%;
    }

    /* 予定と地域: 選択中の市町名。マップ左上に固定（地図を動かしても動かない） */
    .leaflet-control.areaBoundaryLabel {
      clear: none;
      color: #fff;
      font-size: clamp(16px, 2.2vw, 24px);
      font-weight: 900;
      letter-spacing: .08em;
      line-height: 1.2;
      margin: 14px 0 0 16px;
      pointer-events: none;
      text-shadow: 0 0 6px rgba(0, 0, 0, .75), 0 1px 2px rgba(0, 0, 0, .6);
      white-space: nowrap;
    }

    .company-map-marker__label {
      align-items: center;
      display: inline-flex;
      gap: 8px;
      justify-content: space-between;
    }

    .company-map-marker__arrow {
      display: none;
      font-size: 14px;
      line-height: .8;
    }

    .company-map-marker.is-active {
      z-index: 1000 !important;
    }

    .company-map-marker.is-active .company-map-marker__body {
      background: var(--white);
      border-radius: 10px;
      color: var(--ink);
      min-width: 120px;
      overflow: hidden;
      padding: 0;
      transform: translate(-50%, calc(-100% - 28px));
      width: 120px;
    }

    .company-map-marker.is-active::after {
      background: var(--white);
      content: "";
      display: block;
      height: 28px;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      transform: translate(-50%, -28px);
      width: 2px;
    }

    .company-map-marker.is-active .company-map-marker__image {
      border-radius: 9px 9px 0 0;
      display: block;
    }

    .company-map-marker.is-active .company-map-marker__label {
      padding: 9px 10px;
    }

    .company-map-marker.is-active .company-map-marker__arrow {
      display: inline-block;
    }

    /* スマホ: 1本指はページスクロール、2本指で地図操作（Googleマップ風） */
    .company-map__canvas.leaflet-container.leaflet-touch-zoom:not(.leaflet-touch-drag) {
      touch-action: pan-x pan-y;
    }

    .mapTouchHint {
      align-items: center;
      background: rgba(0, 0, 0, .5);
      color: #fff;
      display: flex;
      font-size: 15px;
      font-weight: 700;
      inset: 0;
      justify-content: center;
      opacity: 0;
      padding: 16px;
      pointer-events: none;
      position: absolute;
      text-align: center;
      transition: opacity .3s ease;
      z-index: 1000;
    }

    .mapTouchHint.is-visible {
      opacity: 1;
    }

    .company-map .leaflet-control-attribution {
      font-size: 10px;
    }

    .company-calendar-lg__head {
      display: grid;
      gap: 1px;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      margin-bottom: 6px;
    }

    .company-calendar-lg__head span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }

    .company-calendar-lg__grid {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .company-calendar-lg__cell {
      background: rgba(0, 0, 0, .1);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-height: 84px;
      padding: 8px 6px;
    }

    .company-calendar-lg__cell.is-empty {
      background: transparent;
    }

    .company-calendar-lg__cell.is-open {
      background: var(--white);
      border: 1px solid rgba(0, 0, 0, .35);
    }

    .company-calendar-lg__date {
      color: var(--ink);
      font-size: 12px;
      font-weight: 900;
    }

    .company-calendar-lg__cell.is-open .company-calendar-lg__date {
      color: var(--ink);
    }

    .company-calendar-lg__time-block {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .company-calendar-lg__time {
      color: var(--ink);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.4;
    }

    .company-calendar-lg__cell.is-open .company-calendar-lg__time {
      color: var(--ink);
    }

    .company-calendar-lg__peers-self {
      color: var(--ink);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.4;
    }

    .company-calendar-lg__cell.is-open .company-calendar-lg__peers-self {
      color: var(--ink);
    }

    .company-calendar-lg__peers {
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow: visible;
    }

    .company-calendar-lg__peers.has-self {
      margin-top: 10px;
    }

    .company-calendar-lg__peers a {
      color: var(--muted);
      cursor: pointer;
      display: inline-block;
      font-size: 10px;
      line-height: 1.4;
      opacity: .7;
      overflow: hidden;
      overflow-wrap: anywhere;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .company-calendar-lg__peers a:hover,
    .company-calendar-lg__peers a:focus-visible {
      opacity: 1;
      text-decoration: underline;
    }

    .company-calendar-lg__cell.is-open .company-calendar-lg__peers a {
      color: var(--ink);
      opacity: .7;
    }

    .company-calendar-lg__cell.is-open .company-calendar-lg__peers a:hover,
    .company-calendar-lg__cell.is-open .company-calendar-lg__peers a:focus-visible {
      opacity: 1;
    }

    @media (max-width: 680px) {
      .company-detail__galleryGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .company-detail__csv-row {
        gap: 8px;
        grid-template-columns: 1fr;
      }

      .company-detail__csv dd {
        width: 100%;
      }

      .company-calendar-lg__head span {
        font-size: 10px;
      }

      .company-calendar-lg__grid {
        gap: 5px;
      }

      .company-calendar-lg__cell {
        border-radius: 7px;
        min-height: 60px;
        padding: 5px 4px;
      }

      .company-calendar-lg__date {
        font-size: 10px;
      }

      .company-calendar-lg__time {
        font-size: 9px;
      }

      .company-calendar-lg__peers-self {
        font-size: 9px;
      }

      .company-calendar-lg__peers.has-self {
        margin-top: 6px;
      }

      .company-calendar-lg__peers a {
        font-size: 8px;
      }
    }

    .company-detail__events {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 28px;
    }

    .company-detail__event {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      gap: 10px;
      padding: 18px;
    }

    .company-detail__event-date {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
    }

    .company-detail__csv {
      display: grid;
      gap: 1px;
      margin-top: 28px;
    }

    .company-detail__csv-row {
      border-top: 1px solid var(--line);
      display: grid;
      gap: 18px;
      /* dtの最小幅を140pxに縮小し、比率も0.25fr程度に小さくする */
      grid-template-columns: minmax(140px, .25fr) minmax(0, 1fr);
      padding: 14px 0;
    }

    .company-detail__csv dt {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.5;
    }

    .company-detail__csv dd {
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.7;
      margin: 0;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
      width:70%;
    }

    .company-detail__csv dd a {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    @media (max-width: 680px) {
      .company-detail__csv-row {
        gap: 8px;
        grid-template-columns: 1fr;
      }

      .company-detail__csv dd {
        width: 100%;
      }
    }

    .company-detail__divider {
      background: var(--line);
      border: 0;
      height: 1px;
      margin: clamp(36px, 6vw, 64px) 0;
      width: 100%;
    }

    .company-detail__block {
      scroll-margin-top: 120px;
    }

    .company-detail__blockTitle {
      color: var(--ink);
      font-size: clamp(26px, 3.4vw, 40px);
      font-weight: 900;
      line-height: 1.3;
    }

    .company-detail__blockTitle--sub {
      font-size: clamp(20px, 2.4vw, 28px);
    }

    .company-detail__blockDesc {
      margin-top: 14px;
    }

    .company-detail__modalCompany {
      color: var(--ink);
      display: inline-block;
      font-size: clamp(16px, 2vw, 20px);
      font-weight: 800;
      line-height: 1.7;
      margin: 10px 0 0;
    }

    .company-detail__modalCompany:hover,
    .company-detail__modalCompany:focus-visible {
      text-decoration: underline;
    }

    .modalSheet .company-detail__blockDesc {
      font-size: clamp(13px, 1.35vw, 15px);
      font-weight: 600;
      line-height: 1.9;
    }

    /* Keep one text line of space between the catchphrase and description. */
    .modalSheet .company-detail__catchCopy + .company-detail__blockDesc {
      margin-top: 1.9em;
      margin-top: 1lh;
    }

    .company-detail__modalHero {
      aspect-ratio: 10 / 4;
      background: var(--light);
      display: block;
      left: 50%;
      margin: 0 0 clamp(28px, 5vw, 44px);
      overflow: hidden;
      position: relative;
      transform: translateX(-50%);
      width: min(90vw, 700px);
    }

    .modalSheet__inner:has(.company-detail__modalHero) {
      padding-top: 0;
    }

    .modalSheet__inner:has(.company-detail__modalHero) .modalSheet__closeWrap {
      height: 40px;
      margin: 0;
      position: absolute;
      right: clamp(14px, 2vw, 20px);
      top: clamp(14px, 2vw, 20px);
      z-index: 3;
    }

    .company-detail__modalHero img,
    .company-detail__modalPhoto img {
      display: block;
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    .company-detail__modalPhotos {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-start;
      margin-top: clamp(24px, 4vw, 36px);
    }

    .company-detail__modalPhoto {
      aspect-ratio: 4 / 3;
      background: var(--light);
      border-radius: 8px;
      flex: 0 0 calc((100% - 16px) / 3);
      margin: 0;
      overflow: hidden;
    }

    @media (max-width: 680px) {
      .company-detail__modalPhoto {
        flex-basis: calc((100% - 8px) / 2);
      }
    }

    .company-detail__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }

    .company-detail__tag {
      background: var(--light);
      border-radius: 999px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 900;
      padding: 6px 14px;
    }

    .company-detail__note {
      background: var(--light);
      border-radius: 10px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.8;
      margin-top: 18px;
      padding: 16px 18px;
    }

    .company-detail__table {
      margin-top: 24px;
    }

    .company-detail__reserveBanner {
      align-items: center;
      background: var(--light);
      border: 1px solid rgba(0, 0, 0, 0);
      border-radius: 14px;
      color: var(--ink);
      display: grid;
      gap: clamp(16px, 3vw, 32px);
      grid-template-columns: clamp(84px, 12vw, 128px) minmax(0, 1fr) auto;
      margin-top: 24px;
      padding: clamp(14px, 2vw, 20px) clamp(22px, 3vw, 32px) clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px);
      text-decoration: none;
      transition: border-color .2s ease;
    }

    a.company-detail__reserveBanner:hover,
    a.company-detail__reserveBanner:focus-visible {
      border-color: rgba(0, 0, 0, .2);
    }

    .company-detail__reserveThumb {
      aspect-ratio: 1 / 1;
      background: var(--white);
      border-radius: 10px;
      display: block;
      overflow: hidden;
      width: 100%;
    }

    .company-detail__reserveThumb img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    .company-detail__reserveBody {
      display: flex;
      flex-direction: column;
    }

    .company-detail__reserveLabel {
      color: var(--ink);
      font-size: clamp(20px, 2.6vw, 28px);
      font-weight: 900;
      line-height: 1.25;
    }

    .company-detail__reserveDeadline {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      margin-top: 6px;
    }

    .company-detail__reserveCta {
      color: var(--ink);
      font-size: 13px;
      font-weight: 900;
      margin-top: 10px;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .company-detail__reserveArrow {
      border: 2px solid var(--ink);
      border-left: 0;
      border-top: 0;
      display: block;
      height: 12px;
      width: 12px;
      transform: rotate(-45deg);
    }

    .company-detail__contact {
      display: grid;
      gap: 6px;
      margin-top: 20px;
    }

    .company-detail__contact p {
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
    }

    .company-detail__contact a {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .company-detail__dev {
      margin-top: clamp(36px, 6vw, 64px);
    }

    /* モーダルの背景：後ろのページをぼかし、その上に青（--modal-blue）を薄く乗せる。
       ぼかしの強さは --modal-backdrop-blur、青の濃さは --modal-backdrop-tint の
       パーセント値で調整する。 */
    .modalBackdrop {
      --modal-backdrop-blur: 0px; /* ぼかしなし。戻す場合は 14px */
      --modal-backdrop-tint: color-mix(in srgb, var(--modal-blue) 20%, transparent);
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
      background: color-mix(in srgb, var(--modal-blue) 0%, transparent);
      inset: 0;
      position: fixed;
      transition: backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease, background-color .4s ease;
      z-index: 40000;
    }

    .modalBackdrop.is-open {
      -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
      backdrop-filter: blur(var(--modal-backdrop-blur));
      background: var(--modal-backdrop-tint);
    }

    /* さらにその上に、同じ青（--modal-blue）を「カラー」合成で重ねる。
       背景の明るさはそのままに、色相と彩度だけを青に揃える。
       .modalBackdrop（ぼかし＋青20%）と同じ重なり順で、DOM上あとに来る
       body::after に置くことで、ぼかして色を乗せた画面に対して合成される。
       効き具合は opacity で調整する。 */
    body::after {
      background: var(--modal-blue);
      content: "";
      inset: 0;
      mix-blend-mode: color;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      transition: opacity .4s ease;
      z-index: 40000;
    }

    body:has(.modalBackdrop.is-open)::after {
      opacity: 1;
    }

    /* backdrop-filter 非対応ブラウザでは、青みのある白いベールで背景と区別する。 */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .modalBackdrop.is-open {
        background: color-mix(in srgb, color-mix(in srgb, var(--modal-blue) 20%, white) 80%, transparent);
      }
    }

    .modalSheet {
      background: transparent;
      box-sizing: border-box;
      inset: 0;
      overflow-y: auto;
      position: fixed;
      transform: translateY(100%);
      transition: transform .48s cubic-bezier(.16, 1, .3, 1);
      z-index: 40001;
      /* ページ側のスクロールバー用の余白を常に確保しているため、モーダル自身の
         スクロールバーまで出すと右端に帯が2本並ぶ。モーダル側は非表示にする
         （スクロール操作そのものは従来どおり可能）。 */
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .modalSheet::-webkit-scrollbar {
      display: none;
    }

    .modalSheet.is-open {
      transform: translateY(0);
    }

    .modalSheet__closeWrap {
      /* 閉じるボタンの分だけ実際に高さを確保しておくことで、カード側の
         paddingの値に関わらず本文（見出し等）とボタンが重ならないようにする。
         スクロールした際は sticky で画面上部付近に留まり続ける。 */
      display: flex;
      height: 40px;
      justify-content: flex-end;
      margin-bottom: 16px;
      position: sticky;
      top: 20px;
      z-index: 2;
    }

    .modalSheet__close {
      align-items: center;
      appearance: none;
      background: var(--light);
      border: 0;
      border-radius: 999px;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      flex-shrink: 0;
      font-size: 16px;
      font-weight: 900;
      height: 40px;
      justify-content: center;
      width: 40px;
    }

    .modalSheet__inner {
      background: var(--white);
      border-radius: 24px;
      box-sizing: border-box;
      overflow: hidden;
      /* 開いた直後は画面の下2/5ほどだけカードの先頭が見える「ボトムシート」的な
         出方にする。上側の余白はカードのボックスに含まれないマージンなので、
         そのままタップすれば従来どおり.modalSheet（背景）へのクリックとして
         閉じる操作になる。もっと見たい場合はそのままスクロールしていけば
         カード全体を読める。 */
      margin: 60vh auto clamp(48px, 8vw, 96px);
      max-width: 700px;
      padding: 5% ;
      position: relative;
      width: 90%;
    }

    .modalSheet .company-detail__block:first-of-type .company-detail__blockTitle {
      margin-top: 20px;
    }

    .modalSheet--settings .modalSheet__inner {
      padding-top: 76px;
    }

    .devSettings {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 24px;
    }

    .devSettings__row {
      align-items: center;
      border-top: 1px solid var(--line);
      display: flex;
      gap: 24px;
      justify-content: space-between;
      padding: 20px 0;
    }

    .devSettings__label {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .devSettings__title {
      font-size: 15px;
      font-weight: 700;
    }

    .devSettings__desc {
      color: var(--gray, #777);
      font-size: 13px;
    }

    .devSettings__control {
      align-items: center;
      display: flex;
      flex-shrink: 0;
      gap: 8px;
    }

    .devSettings__switch {
      appearance: none;
      background: var(--line);
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      height: 30px;
      padding: 3px;
      transition: background-color .2s ease;
      width: 52px;
    }

    .devSettings__switch.is-on {
      background: var(--ink);
    }

    .devSettings__switchKnob {
      background: var(--white);
      border-radius: 50%;
      display: block;
      height: 24px;
      transition: transform .2s ease;
      width: 24px;
    }

    .devSettings__switch.is-on .devSettings__switchKnob {
      transform: translateX(22px);
    }

    .footer {
      background: var(--white);
      color: var(--ink);
      padding: 36px clamp(18px, 5vw, 72px);
      width: 100%;
    }

    .footer__inner {
      align-items: center;
      display: flex;
      gap: 18px;
      justify-content: space-between;
      margin: 0 auto;
      max-width: 1180px;
    }

    .loading,
    .error {
      color: var(--ink);
      font-weight: 900;
      min-height: 240px;
      padding: 8vw 0;
      text-align: center;
    }

    /* スライドごとのレイアウト計算を独立させ、ブラウザの再描画負荷を劇的に下げる */
    .swiper-slide {
      contain: layout style paint;
    }

    /* ドラッグ中はカード内の当たり判定（リンクやホバーエフェクト等）を無効化して負荷を下げる */
    .is-dragging .swiper-slide {
      pointer-events: none;
    }

    @media screen and (max-width: 1399px) {
      .companyList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media screen and (min-width: 1400px) {
      .companyList {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media screen and (max-width: 980px) {
      /* ハンバーガーメニューは廃止。ナビ自体が縦並びに切り替わり、さらに縮小して
         「メニューらしき見た目」のトリガーになり、タップで実寸へ展開する
         （詳細はJS側のnav collapse制御）。 */
      .site-nav {
        align-items: flex-end;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        transform: scale(.3333);
      }

      .site-nav a {
        background: #728ca6;
      }

      body:not(.is-menu-open) .site-nav a,
      body:not(.is-menu-open) .site-nav a:hover,
      body:not(.is-menu-open) .site-nav a.is-active {
        color: var(--ink);
        pointer-events: none;
      }

      body:not(.is-menu-open) .site-nav__social:hover .site-nav__socialIcon {
        filter: none;
      }

      body.is-header-over-visual:not(.is-menu-open) .site-nav__socialIcon,
      body.is-header-over-visual:not(.is-menu-open) .site-nav__social:hover .site-nav__socialIcon {
        filter: none;
      }

      .site-nav__label {
        opacity: 0;
      }

      body.is-menu-open .site-nav {
        transform: scale(1);
      }

      body.is-menu-open .site-nav a {
        background: var(--white);
      }

      body.is-menu-open .site-nav a:hover,
      body.is-menu-open .site-nav a.is-active {
        background: var(--ink);
        color: var(--white);
      }

      body.is-menu-open .site-nav__label {
        opacity: 1;
        transition: opacity .4s ease .12s;
      }

      /* ナビを展開した際、背景グラデーションを画面全体の縦幅まで広げる。
         閉じた時は.site-header::beforeのtransitionでふわっと元の高さへ戻る。 */
      body.is-menu-open .site-header::before {
        height: 100vh;
      }

      .detail,
      .detail.light,
      .footer {
        padding-left: clamp(24px, 8vw, 96px);
        padding-right: clamp(24px, 8vw, 96px);
        width: 100%;
      }


      .concept-copy {
        min-height: 300px;
      }

      .companyList,
      .program-grid,
      .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media screen and (max-width: 680px) {
      .visual {
        min-height: 400px;
      }

      .home-visual .title {
        align-items: center;
        justify-content: center;
        padding-left: var(--content-inset);
        padding-right: var(--content-inset);
      }

      .home-visual .title__wrap {
        align-items: center;
      }

      .visual .title .txt-anm {
        font-size: clamp(18px, 4.9vw, 19px);
        margin-left: auto;
        margin-right: auto;
      }

      .hero-word {
        align-items: flex-start;
        font-size: 24px;
        gap: 6px;
      }

      .concept,
      .contact-panel {
        grid-template-columns: 1fr;
      }

      .concept-copy {
        justify-self: center;
        min-height: 260px;
        width: fit-content;
      }

      .concept-copy span {
        font-size: clamp(26px, 8vw, 42px);
      }

      .concept-copy__break {
        display: block;
      }

      .site-header {
        grid-template-columns: auto auto;
        min-height: 72px;
      }

      .site-logo img {
        height: auto;
        width: calc(12vw + 12vh);
      }

      .photo-grid,
      .companyList,
      .program-grid,
      .news-grid {
        grid-template-columns: 1fr;
      }

      .photo-grid .img:first-child {
        grid-row: auto;
      }

      .eventDateGroup {
        gap: 10px;
        grid-template-columns: 64px minmax(0, 1fr);
      }

      .eventDateGroup__date {
        top: calc(var(--header-height, clamp(96px, 12vw, 150px)) + 20px);
      }

      .eventDateGroup__day {
        font-size: 1.5rem;
      }

      .eventDateGroup__weekday {
        font-size: 1rem;
      }

      .overview-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }

      .footer__inner {
        align-items: start;
        flex-direction: column;
      }
    }

/* Photo management controls appear only with the image-ID setting. */
.photoVisibility{display:none}
.company-detail__photoCard.is-photo-hidden{display:none}
body.is-show-photo-id .company-detail__photoCard.is-photo-hidden{display:block}
body.is-show-photo-id .company-detail__photoCard.is-photo-hidden img{opacity:.3}
body.is-show-photo-id .photoVisibility{display:grid;place-items:center;position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;padding:0;border:1px solid #fff;border-radius:50%;background:#fff;color:#333;cursor:pointer;font-size:18px;line-height:1}
body.is-show-photo-id .photoVisibility[aria-pressed="true"]{background:#b63232;color:#fff}
.devSettings .photoAdmin{font-size:12px;white-space:nowrap}
.photoAdmin button{padding:9px 14px;border:0;border-radius:6px;background:#246345;color:white;cursor:pointer}

.photoAdmin button:disabled{opacity:.45;cursor:default}

/* FACTORIES shares the CALENDAR & MAP subnavigation styles. */
.factory-categories { overflow-x: auto; margin-bottom: 24px; }
.factory-categories::after { display: none; }
.factory-categories .eventAreaFilter__btn { padding-left: 24px; padding-right: 24px; }
.factory-categories .eventAreaFilter__place { padding-left: 12px; padding-right: 12px; }
.factory-categories__number { margin-left: 8px; font-size: .75em; opacity: .65; }
.factory-categories .eventAreaFilter__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.company-detail__csv-group + .company-detail__csv-group { margin-top: 108px; }
.company-detail__csv-group {
  display: grid;
  grid-template-columns: clamp(36px, 5vw, 64px) minmax(0, 1fr);
  column-gap: clamp(12px, 2vw, 28px);
  align-items: start;
}
.company-detail__csv-heading {
  position: sticky;
  top: calc(var(--header-height, clamp(96px, 12vw, 150px)) + 32px);
  justify-self: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .12em;
}
.company-detail__csv-group > .company-detail__csv { min-width: 0; margin-top: 0; }
.company-detail__csv-empty { color: #777; }

.company-detail__csv > .company-detail__csv-row:last-child { border-bottom: 1px solid var(--line); }

.company-detail__dev > .titleHead + .company-detail__csv-group { margin-top: 108px; }

@media screen and (max-width: 680px) {
  .company-detail__csv-heading { top: calc(var(--header-height, clamp(96px, 12vw, 150px)) + 20px); }
}

.company-detail__dev .company-detail__csv dd { position: relative; width: 100%; padding-right: 52px; min-height: 28px; }
.company-csv-edit { position: absolute; right: 0; top: 0; border: 1px solid #ddd; background: transparent; color: #888; border-radius: 4px; padding: 3px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.company-csv-edit:hover, .company-csv-edit:focus-visible { color: #111; border-color: #777; }
.company-csv-editor label { display: block; margin: 24px 0 12px; }
.company-csv-editor textarea { display: block; width: 100%; padding: 12px; font: inherit; border: 1px solid #bbb; resize: vertical; }
.company-csv-editor button { padding: 8px 16px; margin-right: 12px; cursor: pointer; }
.company-csv-editor p { font-size: 13px; margin: 16px 0; }
.company-csv-editor [role="alert"] { color: #b32020; }

.news-link { color: inherit; text-decoration: none; display: block; }
.news-link .news-card { transition: border-color .2s ease; }
.news-link:hover .news-card, .news-link:focus-visible .news-card { border-color: #777; }
.news-detail { max-width: 960px; }
.news-detail time { color: var(--muted); }
.news-detail h1 { font-size: clamp(24px, 3.5vw, 40px); margin: 20px 0 32px; }
.news-detail__body { white-space: pre-wrap; line-height: 2; margin-bottom: 48px; }
/* 本文中の <hr>：本文の幅いっぱいのグレーの区切り線。 */
.news-detail__hr { border: 0; border-top: 1px solid #ccc; height: 0; margin: 2.5em 0; width: 100%; }

/* NEWS cards: reserve two lines even for short titles and summaries. */
.news-card { align-content: start; height: 100%; }
.news-card .title,
.news-card__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
}
.news-card .title { height: 2.7em; }
.news-card__summary { line-height: 1.7; height: 3.4em; overflow-wrap: anywhere; }
.news-card .subTitle { margin: 0; }

.news-detail__hero { display: block; width: 100%; height: auto; margin-bottom: 32px; }
.news-card__summaryRow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.news-card__summaryRow .news-card__summary { flex: 1; min-width: 0; }
.news-card__image { display: block; width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; border-radius: 4px; }

body.is-news-detail.is-page-view #app { padding-top: 0; }
.news-article:not(:has(.company-detail__visual)) { padding-top: var(--header-height, 260px); }

/* お知らせ詳細：本文まわりの幅を狭めて読みやすくする。
   メイン画像は画面幅いっぱいのまま、タイトル・本文・戻るボタンだけを
   --news-content-width の幅で中央に揃える。幅はこの値で調整する。 */
.news-article { --news-content-width: 760px; }
.news-article .company-detail__head--body {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--news-content-width);
}
.news-article .company-detail__stickyTitle {
  /* 帯は画面幅いっぱいのまま、中の文字だけ本文と同じ位置に揃える。 */
  padding-left: calc(var(--content-inset) + max(0px, (100% - var(--news-content-width)) / 2));
  padding-right: calc(var(--content-inset) + max(0px, (100% - var(--news-content-width)) / 2));
}
.news-article > .text-button {
  margin-left: max(0px, calc((100% - var(--news-content-width)) / 2));
}

.news-detail__link { margin: 0 0 32px; }
.news-detail__button { display: inline-block; padding: 16px 28px; background: var(--ink); color: var(--white); border-radius: 6px; text-decoration: none; font-weight: 700; }
.news-detail__button:hover { opacity: .8; }
.news-detail__button:focus-visible { outline: 3px solid #2777ba; outline-offset: 4px; }

.overview-area-links a { display: inline-block; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.overview-area-links a:hover { opacity: .65; }

/* Small actions and navigable cards share the NEWS border hover treatment. */
.text-button,
a.companyList_item,
.eventManual .event-card.is-clickable { transition: border-color .2s ease; }
.text-button:hover,
.text-button:focus-visible,
a.companyList_item:hover,
a.companyList_item:focus-visible,
.event-card.is-clickable:hover,
.event-card.is-clickable:focus-visible,
.eventManual .event-card.is-clickable:hover,
.eventManual .event-card.is-clickable:focus-visible {
  border-color: #777;
  box-shadow: none;
  text-decoration: none;
}

.company-detail__metaLink { text-decoration: none; transition: background-color .2s ease; }
.company-detail__metaLink:hover, .company-detail__metaLink:focus-visible { background-color: #fafafa; }