/**
 * hub-intro.css — ハブページ共通ヘッダー（ヒーロー＋イントロ）
 */
:root {
  --hub-gutter: clamp(1.25rem, 4.5vw, 5rem);
  --hub-wide: min(72rem, 100%);
  --hub-r15: 1.5rem;
  --hub-r2: 2rem;
  --hub-r5: 5rem;
  --hub-r6: 6rem;
  --hub-hero-size: clamp(2.125rem, 3.6vw, 2.875rem);
  --hub-line-body: 2;
  --hub-lead-max: min(38rem, calc(100% - 2 * var(--hub-gutter)));
}

.hub-page,
.hub-mosaic-page {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

/* —— カルーセルヒーロー —— */
.hub-hero-carousel .carousel-inner,
.about-us-hero-carousel .carousel-inner,
.hub-page #carousel1 .carousel-inner,
.hub-mosaic-page #carousel1 .carousel-inner,
.hub-page #gallery-main > #carousel1 .carousel-inner {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 720px;
}
.hub-hero-carousel .carousel-inner > .item,
.about-us-hero-carousel .carousel-inner > .item,
.hub-page #carousel1 .carousel-inner > .item,
.hub-mosaic-page #carousel1 .carousel-inner > .item,
.hub-page #gallery-main > #carousel1 .carousel-inner > .item {
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
}
.hub-hero-carousel .carousel-inner > .item.active:not(.left):not(.right),
.about-us-hero-carousel .carousel-inner > .item.active:not(.left):not(.right),
.hub-page #carousel1 .carousel-inner > .item.active:not(.left):not(.right),
.hub-mosaic-page #carousel1 .carousel-inner > .item.active:not(.left):not(.right) {
  position: relative;
  transform: translate3d(0, 0, 0);
}
.hub-hero-carousel .carousel-inner > .item > img,
.hub-hero-carousel .carousel-inner > .item > a > img,
.about-us-hero-carousel .carousel-inner > .item > img,
.about-us-hero-carousel .carousel-inner > .item > a > img,
.hub-page #carousel1 .carousel-inner > .item > img,
.hub-page #carousel1 .carousel-inner > .item > a > img,
.hub-mosaic-page #carousel1 .carousel-inner > .item > img,
.hub-mosaic-page #carousel1 .carousel-inner > .item > a > img,
.hub-page #gallery-main > #carousel1 .carousel-inner > .item > img,
.hub-page #gallery-main > #carousel1 .carousel-inner > .item > a > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.hub-hero-carousel .carousel-inner > .item::after,
.about-us-hero-carousel .carousel-inner > .item::after,
.hub-page #carousel1 .carousel-inner > .item::after,
.hub-mosaic-page #carousel1 .carousel-inner > .item::after,
.hub-page #gallery-main > #carousel1 .carousel-inner > .item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.55) 100%);
  pointer-events: none;
}
.hub-hero-carousel .carousel-caption,
.about-us-hero-carousel .carousel-caption,
.hub-page #carousel1 .carousel-caption,
.hub-mosaic-page #carousel1 .carousel-caption,
.hub-page #gallery-main > #carousel1 .carousel-caption {
  bottom: 20%;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  background: none !important;
  z-index: 2;
}
.hub-hero-carousel .carousel-caption h3,
.about-us-hero-carousel .carousel-caption h3,
.hub-page #carousel1 .carousel-caption h3,
.hub-mosaic-page #carousel1 .carousel-caption h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(0.8rem, 1.8vw, 1rem) !important;
  letter-spacing: 0.28em !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin-bottom: 6px;
  color: #fff !important;
}
.hub-hero-carousel .carousel-caption p,
.about-us-hero-carousel .carousel-caption p,
.hub-page #carousel1 .carousel-caption p,
.hub-mosaic-page #carousel1 .carousel-caption p {
  font-size: 0.56rem !important;
  letter-spacing: 0.22em !important;
  line-height: 1.3 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-transform: uppercase;
}
.hub-hero-carousel .carousel-indicators li,
.about-us-hero-carousel .carousel-indicators li {
  border-color: rgba(255, 255, 255, 0.5);
}
.hub-hero-carousel .carousel-indicators li.active,
.about-us-hero-carousel .carousel-indicators li.active {
  background-color: var(--accent);
  border-color: var(--accent);
}
.hub-hero-carousel .carousel-control,
.about-us-hero-carousel .carousel-control,
.hub-page #carousel1 .carousel-control,
.hub-mosaic-page #carousel1 .carousel-control {
  background: none !important;
}
.hub-hero-carousel .carousel-control .index-carousel-arrow,
.about-us-hero-carousel .carousel-control .index-carousel-arrow {
  color: rgba(255, 255, 255, 0.85);
}
.hub-page #carousel1,
.hub-mosaic-page #carousel1,
.hub-page #gallery-main > #carousel1,
.hub-hero-carousel,
.about-us-hero-carousel {
  margin-bottom: 0 !important;
}

/* —— 静止ヒーロー（Workflow 等） —— */
.hub-hero-static {
  width: 100%;
  overflow: hidden;
  background: var(--gray-100);
}
.hub-hero-static__frame {
  position: relative;
  aspect-ratio: 16 / 7;
  max-height: 720px;
  width: 100%;
  margin: 0;
}
.hub-hero-static__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hub-hero-static__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.55) 100%);
  pointer-events: none;
}

/* —— イントロ —— */
.hub-bleed,
.about-us-bleed,
.wf-bleed {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
.hub-inner,
.about-us-inner,
.wf-inner {
  width: 100%;
  max-width: var(--hub-wide);
  margin: 0 auto;
  padding-left: var(--hub-gutter);
  padding-right: var(--hub-gutter);
  box-sizing: border-box;
}
.hub-intro,
.about-us-intro,
.wf-intro {
  padding: var(--hub-r6) 0 var(--hub-r5);
  text-align: center;
  border-bottom: 1px solid var(--gray-100);
  scroll-margin-top: var(--nav-content-offset, 72px);
}
.hub-intro h1,
.about-us-intro h1,
.wf-intro h1 {
  font-family: var(--font-display) !important;
  font-size: var(--hub-hero-size) !important;
  font-weight: 300 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.15 !important;
  color: var(--black) !important;
  margin: 0 0 var(--hub-r15) !important;
}
.hub-intro-dek,
.about-us-intro-dek,
.wf-intro-dek {
  display: block;
  max-width: var(--hub-lead-max);
  margin: 0 auto var(--hub-r2) !important;
  text-align: center;
  font-family: var(--font-jp) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  color: var(--gray-500) !important;
  line-break: strict;
  word-break: keep-all;
}
.hub-intro-dek__phrase,
.about-us-intro-dek__phrase,
.wf-intro-dek__phrase {
  display: block;
}
.hub-page-lead,
.about-us-page-lead,
.wf-page-lead {
  display: block;
  max-width: var(--hub-lead-max) !important;
  margin: 0 auto var(--hub-r2) !important;
  padding: 0 !important;
  text-align: center;
  font-family: var(--font-jp) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  line-height: var(--hub-line-body) !important;
  color: var(--gray-600) !important;
  line-break: strict;
  word-break: keep-all;
  text-wrap: pretty;
}
.hub-page-lead__axes,
.hub-page-lead__rest,
.about-us-page-lead__axes,
.about-us-page-lead__rest,
.wf-page-lead__axes,
.wf-page-lead__rest {
  display: block;
}
.hub-link,
.about-us-concept-link,
.wf-contact-link,
.hub-mosaic-link {
  font-family: var(--font-jp) !important;
  font-size: 0.6875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  color: var(--gray-500) !important;
  text-align: center !important;
  margin: 0 !important;
}
.hub-link a,
.about-us-concept-link a,
.wf-contact-link a,
.hub-mosaic-link a {
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent-dim, rgba(201, 169, 98, 0.15));
  padding-bottom: 2px;
}

/* jumbotron 置換：旧スタイルを無効化 */
.hub-page .jumbotron,
.hub-mosaic-page .jumbotron {
  display: none !important;
}

@media (min-width: 640px) {
  .hub-intro-dek__phrase,
  .about-us-intro-dek__phrase,
  .wf-intro-dek__phrase {
    display: inline;
  }
  .hub-intro-dek__label::after,
  .about-us-intro-dek__label::after,
  .wf-intro-dek__label::after {
    content: "—";
    margin-left: 0.5em;
    color: var(--gray-300);
    font-weight: 300;
  }
  .hub-page-lead__axes,
  .hub-page-lead__rest,
  .about-us-page-lead__axes,
  .about-us-page-lead__rest {
    display: inline;
  }
  .hub-page-lead__axes::after,
  .about-us-page-lead__axes::after {
    content: "——";
    margin: 0 0.2em;
    letter-spacing: 0;
  }
  .hub-mosaic-page .hub-page-lead__en,
  .hub-mosaic-page .hub-page-lead__ja {
    display: inline;
  }
  .hub-mosaic-page .hub-page-lead__en::after {
    content: "—";
    margin: 0 0.5em;
    color: var(--gray-300);
    font-weight: 300;
    letter-spacing: 0;
  }
}

@media (max-width: 768px) {
  .hub-hero-carousel .carousel-inner,
  .about-us-hero-carousel .carousel-inner,
  .hub-page #carousel1 .carousel-inner,
  .hub-mosaic-page #carousel1 .carousel-inner,
  .hub-page #gallery-main > #carousel1 .carousel-inner {
    height: 58vh;
    min-height: 220px;
    max-height: 480px;
    aspect-ratio: auto;
  }
  .hub-hero-carousel .carousel-inner > .item,
  .about-us-hero-carousel .carousel-inner > .item,
  .hub-page #carousel1 .carousel-inner > .item,
  .hub-mosaic-page #carousel1 .carousel-inner > .item {
    height: 58vh;
    min-height: 220px;
    max-height: 480px;
  }
  .hub-hero-carousel .carousel-inner > .item::after,
  .about-us-hero-carousel .carousel-inner > .item::after,
  .hub-page #carousel1 .carousel-inner > .item::after,
  .hub-mosaic-page #carousel1 .carousel-inner > .item::after {
    display: none;
  }
  .hub-hero-static__frame {
    aspect-ratio: auto;
    height: 58vh;
    min-height: 220px;
    max-height: 480px;
  }
  .hub-hero-static__frame::after {
    display: none;
  }
  .hub-intro,
  .about-us-intro,
  .wf-intro {
    padding: var(--hub-r5) 0 var(--hub-r2);
  }
  .hub-intro h1,
  .about-us-intro h1,
  .wf-intro h1 {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
    letter-spacing: 0.08em !important;
  }
  .hub-page-lead,
  .about-us-page-lead,
  .wf-page-lead {
    font-size: 0.875rem !important;
    line-height: 1.95 !important;
  }
}

.hub-link a:hover,
.about-us-concept-link a:hover,
.wf-contact-link a:hover,
.hub-mosaic-link a:hover {
  opacity: 0.75;
}