:root {
  --teal: #00b1c2;
  --teal-dark: #009aab;
  --teal-light: #7bbdd3;
  --teal-soft: #dbf3f5;
  --ink: #333;
  --cream: #fff4e3;
  --white: #feffff;
  --header-height: 96px;
  --content-max: 900px;
  --page-max: 1200px;
  --badge-esports: #7c6cf0;
  --badge-hado: #2f6fd6;
  --badge-dfp: #f08a24;
  --badge-immersia: #e579da;
  --badge-hotel: #3cb878;
  --badge-pochette: #0066b1;
  /* ギザギザの歯の大きさ（全ページ共通）。ウィンドウ幅に合わせて伸び縮みはさせず、
     ブレークポイントで段階的に切り替える: PC 1 倍 → タブレット 0.8 倍 → スマホ 0.6 倍（PC と同じくらいの見た目の比率に） */
  --jag-scale: 1;
  --jag-h: calc(26px * var(--jag-scale));
  --jag-w: calc(1366px * var(--jag-scale));
}
@media (max-width: 1100px) {
  :root { --jag-scale: .8; }
}
@media (max-width: 720px) {
  :root { --jag-scale: .6; }
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page-top {
  width: 100%;
  max-width: 100%;
  /* hidden だと body がスクロールコンテナになり、KV・ヘッダーの sticky が効かなくなる（PC 幅でずれる）ので clip */
  overflow-x: clip;
}
.page-top img.figma-second__hex,
.page-top img.figma-second__iroha,
.page-top img.figma-second__iroha-badge,
.page-top img.figma-second__slime04,
.page-top img.figma-kv__slime,
.page-top img.figma-news__diamonds,
.page-top img.figma-service__slime,
.page-top img.figma-contact__slime,
.page-top img.figma-contact__mail,
.page-top img.figma-contact__iroha,
.page-top img.footer-gallery-slider__jagged {
  max-width: none;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: relative;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 14px 22px;
  background: var(--white);
}
.brand img { width: 72px; height: auto; }
/* ロゴ（ヘッダー・メニュー内）はホバーで少し薄くする。登場アニメの opacity と干渉しないよう img に掛ける */
.brand img,
.global-nav__brand img { transition: opacity .4s cubic-bezier(0.22, 1, 0.36, 1); }
.brand:hover img,
.global-nav__brand:hover img { opacity: .6; }
/* フッターのロゴも TOP へのリンク。ホバーはヘッダーのロゴと同じく少し薄く */
.site-footer__logo { display: block; flex-shrink: 0; }
.site-footer__logo img { display: block; transition: opacity .4s cubic-bezier(0.22, 1, 0.36, 1); }
.site-footer__logo:hover img { opacity: .6; }
.global-nav { display: flex; align-items: center; height: 100%; }
.global-nav > a {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  transition: color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 今いるページのメニュー項目は色を変える。お問い合わせボタンだけは、どのページでも見た目を変えない */
.global-nav > a[aria-current="page"]:not(.contact-link) { color: var(--teal-dark); }
.global-nav > a:hover { color: var(--badge-dfp); }
.global-nav .contact-link {
  min-width: 228px;
  min-height: 70px;
  margin: 0 0 0 8px;
  padding: 0 16px 0 30px;
  color: var(--white);
  background: var(--teal);
  border-radius: 40px 0 0 40px;
  gap: 20px;
  grid-auto-flow: column;
  font-size: 20px;
}
.contact-link__icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.contact-link__icon-wrap .contact-link__icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 36px;
  height: 36px;
  transition: opacity .2s ease;
}
.contact-link__icon-wrap .contact-link__icon--hover {
  opacity: 0;
}
.global-nav .contact-link:hover .contact-link__icon-wrap .contact-link__icon:not(.contact-link__icon--hover) {
  opacity: 0;
}
.global-nav .contact-link:hover .contact-link__icon-wrap .contact-link__icon--hover {
  opacity: 1;
}
.arrow-glyph { transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1); }
a:hover .arrow-glyph,
button:hover .arrow-glyph { transform: translateX(2.5px); }
@media (prefers-reduced-motion: reduce) {
  .arrow-glyph { transition: none; }
  a:hover .arrow-glyph,
  button:hover .arrow-glyph { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .global-nav > a,
  .contact-link,
  .link-circle-arrow,
  .btn-contact,
  .btn-pill,
  .service-card a,
  .sub-crumb a,
  .biz-toc a,
  .news-more {
    transform-origin: center;
    transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), color .4s cubic-bezier(0.22, 1, 0.36, 1), background-color .4s cubic-bezier(0.22, 1, 0.36, 1), border-color .4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .global-nav > a:hover,
  .contact-link:hover,
  .link-circle-arrow:hover,
  .btn-contact:hover,
  .btn-pill:hover,
  .sub-crumb a:hover,
  .biz-toc a:hover,
  .news-more:hover {
    scale: 1.06;
  }
  .service-card a {
    transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), background-color .4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .service-card a:hover {
    scale: 1.025;
  }
}
.contact-link span:not(.sr-only) {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--teal);
  background: var(--white);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}
.global-nav .contact-link {
  transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), background-color .4s cubic-bezier(0.22, 1, 0.36, 1), color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.global-nav .contact-link:hover {
  opacity: 1;
  color: var(--white);
  background: var(--badge-dfp);
}
.menu-button { display: none; }
.global-nav__head,
.global-nav__backdrop,
.global-nav__iroha,
.global-nav__en,
.global-nav__sns,
.global-nav__slime { display: none; }

.btn-pill {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 6px 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: opacity .2s ease, transform .2s ease;
}
.btn-pill--dark { color: var(--white); background: var(--ink); }
.btn-pill--dark:hover { background: var(--teal); }
.btn-pill__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 18px;
  color: var(--ink);
  background: var(--white);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}

.section-vertical-title {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(56px, 8vw, 94px);
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: -.02em;
}

.top-hero {
  position: relative;
  padding: 24px 5vw 0;
  background: var(--cream);
  overflow: hidden;
}
.top-hero__spark,
.top-hero__mascot {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.top-hero__spark--tr { top: 8%; right: 4%; width: clamp(64px, 8vw, 120px); }
.top-hero__spark--br { top: 22%; right: 12%; width: clamp(48px, 6vw, 90px); }
.top-hero__mascot--yellow { top: 14%; right: 18%; width: clamp(48px, 6vw, 72px); }
.top-hero__mascot--blue { top: 6%; right: 28%; width: clamp(44px, 5vw, 64px); }
.top-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: end;
  padding-bottom: 48px;
}
.top-hero__title { margin: 0 0 20px; }
.top-hero__title img { width: min(100%, 447px); height: auto; }
.top-hero__lead {
  margin: 0;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
}
.top-hero__en {
  margin: 16px 0 0;
  color: var(--teal);
  font-family: Poppins, sans-serif;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.5;
}
.top-hero__photos {
  position: relative;
  min-height: clamp(240px, 32vw, 380px);
}
.top-hero__photo {
  position: absolute;
  width: min(68%, 468px);
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.top-hero__photo--1 { left: -4%; bottom: 0; z-index: 1; }
.top-hero__photo--2 { left: 28%; bottom: 8%; z-index: 2; }
.top-hero__photo--3 { right: -2%; top: 0; z-index: 3; }
.top-hero__wave {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}

.top-about {
  position: relative;
  padding: 72px 5vw 120px;
  background: var(--white);
}
.top-about__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.top-about__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 270px);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}
.top-about__text p {
  margin: 0 0 20px;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.5;
}
.top-about__vision-img { margin: 8px 0 20px; }
.top-about__vision-img img { width: min(100%, 646px); height: auto; }
.top-about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.link-circle-arrow {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  color: var(--teal);
  border: 2px solid var(--teal);
  border-radius: 50%;
  font-size: 36px;
  line-height: 1;
  transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), background .4s cubic-bezier(0.22, 1, 0.36, 1), color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-circle-arrow:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}
.top-about__character {
  margin: 0;
  position: relative;
}
.top-about__character img { width: 100%; height: auto; }
.top-about__character figcaption {
  position: absolute;
  right: 0;
  bottom: 18%;
  padding: 10px 18px;
  text-align: center;
  background: var(--white);
  border-radius: 19px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.top-about__character-label {
  display: block;
  color: var(--teal-light);
  font-size: 13px;
  font-weight: 700;
}
.top-about__character-name {
  display: block;
  color: var(--teal-light);
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
}

.home-news {
  position: relative;
  padding: 64px 5vw 88px;
  background: linear-gradient(180deg, #effcfe 0%, var(--white) 28%);
}
.home-news-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 5vw, 65px);
  align-items: start;
}
.home-news-body { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.home-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: var(--content-max);
}
.home-news-list a {
  display: grid;
  grid-template-columns: 6.5em max-content minmax(0, 1fr) 24px;
  gap: 12px 16px;
  align-items: center;
  padding: 14px 20px;
  min-height: 53px;
  border-bottom: 1px solid #e5e7eb;
}
.home-news-list .news-row-arrow {
  transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.home-news-list .news-row-arrow rect,
.news-more__icon rect {
  transition: fill .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-news-list a:hover .news-row-arrow rect { fill: var(--badge-dfp); }
@media (prefers-reduced-motion: no-preference) {
  .home-news-list a:hover .news-row-arrow {
    scale: 1.06;
  }
}
.home-news-list a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
.home-news-list time {
  color: #6b7280;
  font-size: 16px;
  font-weight: 700;
}
.news-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 4px 10px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--white);
}
.home-news-list strong {
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-row-arrow {
  color: var(--teal);
  font-size: 18px;
  line-height: 1;
}
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  color: var(--teal);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}
.news-more__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  /* 丸は SVG の円だけで描く（枠線を付けると、ホバーで円がオレンジになっても枠だけ緑に残る） */
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}
.news-more:hover { color: var(--badge-dfp); }
.news-more:hover .news-more__icon rect { fill: var(--badge-dfp); }

.top-service {
  position: relative;
  padding: 88px 5vw 120px;
  background: var(--teal-soft);
  overflow: hidden;
}
.top-service__deco {
  position: absolute;
  left: 5%;
  top: 42%;
  width: 72px;
  opacity: .9;
}
.top-service__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 334px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.top-service__heading {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
}
.top-service__lead {
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.top-service__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 335px));
  gap: 24px 20px;
  justify-content: end;
}
.service-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: 16px 16px 20px;
  background: var(--white);
  border-radius: 30px;
  transform-origin: center center;
  transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), background-color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card a:hover {
  background: var(--teal-soft);
}
@keyframes card-purun {
  0% { transform: rotate(0deg) scale(1, 1); }
  32% { transform: rotate(4.2deg) scale(1.018, 0.978); }
  58% { transform: rotate(1deg) scale(0.992, 1.014); }
  78% { transform: rotate(3deg) scale(1.008, 0.992); }
  100% { transform: rotate(2.4deg) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .service-card a { transition: none; }
  .service-card a:hover { animation: none; transform: none; }
}
.service-card__badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 53px;
  padding: 10px 22px;
  border-radius: 10px;
  color: var(--white);
  font-size: 24px;
  font-weight: 900;
  white-space: nowrap;
  z-index: 1;
}
.service-card__badge-e { font-size: 37px; line-height: 1; }
.service-card__badge--esports { background: var(--badge-esports); }
.service-card__badge--hado { background: var(--badge-hado); letter-spacing: .1em; }
.service-card__badge--dfp { background: var(--badge-dfp); font-size: 18px; }
.service-card__badge--immersia { background: var(--badge-immersia); }
.service-card__badge--hotel { background: var(--badge-hotel); }
.service-card__photo {
  width: 100%;
  height: 211px;
  object-fit: cover;
  border-radius: 14px;
}
.service-card__text {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  flex: 1;
}
.service-card__arrow {
  position: absolute;
  right: 16px;
  bottom: 108px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--white);
  font-size: 22px;
  line-height: 1;
}
.service-card__arrow--esports { background: var(--badge-esports); }
.service-card__arrow--hado { background: var(--badge-hado); }
.service-card__arrow--dfp { background: var(--badge-dfp); }
.service-card__arrow--immersia { background: var(--badge-immersia); }
.service-card__arrow--hotel { background: var(--badge-hotel); }

.top-contact {
  position: relative;
  padding: 80px 5vw 100px;
  background: var(--white);
  overflow: hidden;
}
.top-contact__watermark {
  margin: 0 0 24px;
  font-family: Poppins, sans-serif;
  font-size: clamp(40px, 8vw, 110px);
  font-weight: 700;
  line-height: 1;
  color: var(--teal-soft);
  white-space: nowrap;
}
.top-contact__watermark span { color: #ffeac9; }
.top-contact__panel {
  position: relative;
  max-width: 1046px;
  margin: 0 auto;
  padding: 56px 24px 64px;
  text-align: center;
  background: var(--cream);
  border-radius: 160px;
}
.top-contact__title {
  margin: 0 0 16px;
  font-family: Poppins, sans-serif;
  font-size: clamp(48px, 8vw, 94px);
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
}
.top-contact__lead {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 228px;
  min-height: 70px;
  padding: 0 30px;
  color: var(--white);
  background: var(--teal);
  border-radius: 40px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}
.btn-contact span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--teal);
  background: var(--white);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}
.btn-contact:hover { opacity: 1; }
.top-contact__mascot {
  position: absolute;
  pointer-events: none;
}
.top-contact__mascot--left { left: 4%; bottom: 12%; width: clamp(64px, 8vw, 100px); }
.top-contact__mascot--right { right: 6%; top: 8%; width: clamp(72px, 9vw, 120px); }
.top-contact__iroha {
  position: absolute;
  right: 8%;
  bottom: -20px;
  width: clamp(120px, 14vw, 192px);
  transform: rotate(9deg);
  pointer-events: none;
}

.site-footer {
  padding: 60px 8vw 34px;
  color: var(--white);
  background: var(--ink);
}
.site-footer--full {
  position: relative;
  padding: 72px 5vw 24px;
  background: var(--teal);
}
.site-footer__wave {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  width: 100%;
  height: auto;
  transform: rotate(180deg);
  pointer-events: none;
}
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 347px) minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.site-footer__brand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.site-footer--full img { width: 90px; filter: brightness(0) invert(1); }
.site-footer__address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
}
.site-footer__address strong { display: block; margin-bottom: 4px; font-size: 16px; }
.site-footer__social { margin-top: 40px; }
.site-footer__social-title {
  margin: 0 0 8px;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.site-footer__social-list {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__social-list a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.site-footer__nav {
  display: flex;
  gap: clamp(32px, 6vw, 80px);
}
.site-footer__nav ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.site-footer__nav li + li { margin-top: 5px; }
.site-footer__nav-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}
.site-footer__nav-main { font-size: 18px; font-weight: 700; line-height: 1.7; }
.site-footer__cta { text-align: right; }
.site-footer__contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--teal);
  background: var(--white);
  border-radius: 40px;
  font-size: 16px;
  font-weight: 700;
}
.site-footer__contact-icon {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.site-footer__privacy {
  display: inline-block;
  margin-top: 11px;
  font-size: 14px;
}
.site-footer__copy {
  max-width: var(--page-max);
  margin: 28px auto 0;
  text-align: right;
}
.site-footer__copy small { color: rgba(255, 255, 255, .85); }
.site-footer img { width: 95px; filter: brightness(0) invert(1); }
.site-footer p { font-family: Poppins, sans-serif; font-weight: 700; color: #89d6dc; }
.site-footer small { display: block; margin-top: 42px; color: #aaa; }

.page-sub {
  background: var(--white);
}
/* ─────────────────────────────────────────────────────────────
 * 下層ページ本文の共通パーツ（私たちについて・ニュース・会社概要・お問い合わせ・プライバシーポリシー）
 * ───────────────────────────────────────────────────────────── */
.sub-page {
  position: relative;
  width: min(1046px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 120px;
  /* 本文の太さは TOP の本文と同じ 500（太さを指定していない表・本文・注記もこれにそろう） */
  font-weight: 500;
}
.sub-page--narrow { width: min(880px, calc(100% - 40px)); }
.sub-section + .sub-section { margin-top: 104px; }
/* セクション見出し: 日本語がメイン、下に英字を小さく（ページ見出し帯と同じ組み方） */
.sub-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 44px;
  text-align: center;
}
.sub-heading__ja {
  font-size: clamp(24px, 1.6vw + 16px, 34px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
.sub-heading__en {
  color: var(--teal);
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}
.sub-lead {
  margin: 0 auto;
  max-width: 44em;
  font-size: 17px;
  font-weight: 500;
  line-height: 2;
  text-align: center;
  /* 改行は 1 文ごと（<br>）だけ。スマホでも消さない。それ以外は幅いっぱいで自然に折り返す */
}
/* 表組み（会社概要・プライバシーポリシーの窓口など）。事業紹介の施設情報と同じ罫線の表 */
.sub-table {
  margin: 0;
  border-top: 1px solid #e3e3e3;
  font-size: 16px;
  line-height: 1.8;
}
.sub-table > div {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 24px;
  padding: 22px 8px;
  border-bottom: 1px solid #e3e3e3;
}
.sub-table dt { color: var(--teal-dark); font-weight: 700; }
.sub-table dd { margin: 0; }
.sub-table ul { margin: 0; padding: 0; list-style: none; }
.sub-table li + li { margin-top: 6px; }
.sub-table a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; transition: opacity .3s ease; }
.sub-table a:hover { opacity: .6; }
.sub-center { margin-top: 48px; text-align: center; }
/* 装飾（スライム・星）は本文の外側の余白に置く。幅が足りない画面では出さない */
.sub-deco {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .sub-deco { display: none; }
}
@media (max-width: 800px) {
  .sub-page { padding: 48px 0 88px; }
  .sub-section + .sub-section { margin-top: 80px; }
}
/* スマホは見出し帯から本文までを詰める（帯の下端にまたがるスライムの分だけは空ける） */
@media (max-width: 600px) {
  .sub-page { padding-top: 36px; }
}
@media (max-width: 800px) {
  .sub-heading { margin-bottom: 32px; }
  .sub-lead { font-size: 16px; text-align: left; }
  .sub-table { font-size: 15px; }
  .sub-table > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 4px; }
}
/* 出現: .sub-reveal の子要素が順番に下からふわっと（top.js revealSiteSections が .is-in を付ける） */
@media (prefers-reduced-motion: no-preference) {
  .sub-reveal:not(.is-in) > * { opacity: 0; }
  .sub-reveal.is-in > * { animation: kv-copy-in 0.5s ease both; }
  .sub-reveal.is-in > :nth-child(2) { animation-delay: 0.08s; }
  .sub-reveal.is-in > :nth-child(3) { animation-delay: 0.16s; }
  .sub-reveal.is-in > :nth-child(4) { animation-delay: 0.24s; }
  .sub-reveal.is-in > :nth-child(n+5) { animation-delay: 0.32s; }
  .sub-reveal:not(.is-in) .sub-deco { opacity: 0; }
  .sub-reveal.is-in .sub-deco {
    animation:
      kv-star-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.3s both,
      kv-star-twinkle calc(5.6s + var(--i, 0) * 0.61s) ease-in-out calc(1.2s + var(--i, 0) * 0.53s) infinite;
  }
  .sub-reveal.is-in .sub-deco--slime {
    transform-origin: 50% 100%;
    animation:
      kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.3s both,
      kv-slime-double-hop 3.4s ease-in-out 1s infinite;
  }
}

/* 本文（会社概要・ニュース・お問い合わせ・プライバシーポリシー）: 下層ページのタイトル下は白で統一。枠や背景色は付けない */
.sub-stage { position: relative; background: var(--white); }
.sub-card { position: relative; }

/* 会社概要: 所在地の住所の下に地図（Google マップの埋め込み） */
.company-map { overflow: hidden; margin-top: 14px; aspect-ratio: 16 / 9; border-radius: 20px; background: var(--teal-soft); }
.company-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 800px) {
  .company-map { aspect-ratio: 4 / 3; border-radius: 16px; }
}

/* 私たちについて — TOP の次に「思い」を伝えるページ。
   構成は参考サイト（道の駅ウェルネスあらお「道の駅について」）にならう:
   メッセージ（大きな半円の背景）→ 写真スライダー（横幅いっぱい）→ ポイント（写真と文章を左右交互）→ 居場所 → FRONT RUNNERS（各事業の代表者のメッセージ） */

/* 1. メッセージ（ビジョン） */
.about-vision {
  position: relative;
  isolation: isolate;
  --map-w: min(100vw - 40px, 1080px);
  padding: 40px 0 48px;
  text-align: center;
}
/* 水玉の世界地図（about-map.js が描く）。文章の後ろに薄く */
.about-vision__map {
  position: absolute;
  left: 50%;
  /* 「our vision」は地図の上（外）に出し、地図はその下から始める */
  top: 92px;
  z-index: -1;
  display: block;
  width: var(--map-w);
  aspect-ratio: 144 / 52;
  translate: -50% 0;
  opacity: 0.7;
  pointer-events: none;
}
.about-vision__label {
  margin: 0 0 22px;
  color: var(--teal);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.about-vision__title {
  margin: 0 0 44px;
  color: var(--ink);
  /* スマホでも 1 行に収まるよう、画面幅に合わせて縮める（約 10 文字分＋左右の余白 20px ずつ） */
  font-size: min(clamp(36px, 4.6vw + 14px, 76px), calc((100vw - 48px) / 11.2));
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
/* 居場所（third place）の考え方: ビジョンの文章の続き。少し間を空けて、太字の小見出し＋文章 */
.about-vision__sub { margin: 56px 0 18px; font-size: clamp(21px, 1.4vw + 11px, 32px); font-weight: 900; line-height: 1.5; letter-spacing: 0.04em; }
/* 「Fun」だけロゴの色に */
.about-vision__fun { color: var(--teal); }
/* 本文は TOP のセカンドビュー（about）の本文と同じ大きさ（top.css .figma-second__frame-11 p） */
.about-vision__lead { font-size: clamp(14px, 0.9vw + 12px, 24px); line-height: 1.5; }

/* 2. 写真スライダー: TOP の KV と同じジグザグの写真の帯（見た目・流れる速さは top.css の .kv-slider）。
   画面の横幅いっぱいに広げ、写真は KV と同じく 1 枚 = 画面幅の 1/3 */
.about-slider {
  position: relative;
  width: 100vw;
  margin: 56px calc(50% - 50vw) 0;
}
.about-slider .kv-slider__viewport { height: calc(100vw / 3 * 356 / 468); }
/* 流れる速さ: 写真 4 枚（画面幅の 4/3）を 68 秒で流す＝1 秒あたり画面幅の約 2%（TOP より少しゆっくり）。
   （top.js initLoopSlider は、この秒数をもとに複製の枚数に合わせて周期を延ばす） */
.about-slider .kv-slider__track { animation-duration: 68s; }
/* 下端: TOP のセクション境界と同じギザギザを、下のセクション（ワクワクをともに）のクリーム色で重ねる */
/* top.css の .page-top .kv-slider__jagged（白）より後に読まれても負けないよう、.about-slider を足して強くする */
.page-top .about-slider .about-slider__jagged--bottom {
  margin-top: calc(-1 * var(--section-jagged-h));
  transform: translate(-50%, 1px);
  fill: var(--cream);
}
@media (max-width: 720px) {
  /* スマホは KV と同じく 1 枚 = 画面幅の 82%（top.css） */
  .about-slider .kv-slider__viewport { height: calc(82vw * 724 / 1126); }
}

/* 言葉の途中で改行させない（読点・文節の区切りでだけ折り返す。読ませる文章なので、どの画面幅でも区切りよく） */
.about-nowrap { display: inline-block; }

/* 4. ワクワクをともに: 地は画面の横幅いっぱいのクリーム色。上はスライダーの下端のギザギザ、下端もギザギザ（上下反転）で白へ */
.about-values {
  position: relative;
  isolation: isolate;
  padding: 80px 0 110px;
}
/* 模様は TOP の about（同じクリーム色のセクション）と同じ白い六角形。多すぎないよう上に 1 枚だけ */
.about-values::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background:
    url("/assets/ui/hexagons.svg") center 40px / min(1336px, 98vw) auto no-repeat,
    var(--cream);
}
.about-values__jagged {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--jag-h));
  z-index: -1;
  display: block;
  width: max(100vw, var(--jag-w));
  height: calc(var(--jag-h) + 1px);
  translate: -50% 0;
  scale: 1 -1;
  fill: var(--cream);
  pointer-events: none;
}
.about-values__jagged use { fill: inherit; }
/* 見出しの行: 左に KV と同じ見出しとスライム、右に「our values」と説明、いちばん右に IROHA */
.about-values__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 36px;
  /* 右端は IROHA の場所。IROHA は目の重ね画像（top.js）がぴったり重なるよう、並びの外（absolute）に置く */
  padding-right: clamp(150px, 15vw, 200px);
  margin-bottom: 64px;
}
.about-values__heading { position: relative; flex: none; margin: 0; }
/* 見出し: TOP の KV と同じ手書き風の文字。画面に入ってから 1 文字ずつ落ちて弾む（跳ね方は top.css の kv-title-char-drop） */
.about-values__title-art { display: block; width: clamp(240px, 27vw, 360px); height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .about-values .sub-reveal:not(.is-in) .kv-title-char { opacity: 0; animation: none; }
}
/* KV と同じスライム 2 匹（見出しの幅に対する位置・大きさも KV と同じ） */
.about-values__kv-slime { position: absolute; z-index: 1; height: auto; pointer-events: none; }
.about-values__kv-slime--06 { left: -3.9%; top: 60%; width: 26.6%; }
.about-values__kv-slime--02 { left: 23.2%; top: 77%; width: 24.2%; }
.about-values__intro { flex: 1; padding-bottom: 10px; }
.about-values__en {
  margin: 0 0 6px;
  color: var(--teal);
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.about-values__lead { margin: 0; font-size: clamp(16px, 0.6vw + 12px, 20px); font-weight: 700; letter-spacing: 0.04em; }
.about-values__text { margin: 12px 0 0; font-size: clamp(14px, 0.4vw + 11px, 16px); font-weight: 500; line-height: 1.7; }
.about-values__iroha { position: absolute; right: 0; bottom: -44px; width: clamp(140px, 14vw, 190px); height: auto; pointer-events: none; }
.about-values__iroha.iroha-interactive {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .about-values__kv-slime,
  .about-values__iroha { transform-origin: 50% 100%; }
  .about-values:not(.is-in) .about-values__kv-slime,
  .about-values:not(.is-in) .about-values__iroha { opacity: 0; }
  /* スライムの動きは KV と同じ */
  .about-values.is-in .about-values__kv-slime--06 {
    animation: kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.9s both, kv-slime-wobble-big 4.2s ease-in-out 1.5s infinite;
  }
  .about-values.is-in .about-values__kv-slime--02 {
    animation: kv-slime-in 0.46s cubic-bezier(0.17, 0.88, 0.3, 1.28) 1.1s both, kv-slime-hop 2.9s ease-in-out 1.7s infinite;
  }
  .about-values.is-in .about-values__iroha {
    animation: kv-header-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.6s both, iroha-poyon 5.8s ease-in-out 2.4s infinite;
  }
}

/* 3 つの価値観のカード。表: 角を大きく丸めた写真の右上に色付きの番号、その下に色付きの見出しと説明（中央そろえ）。
   最初は裏向き（緑の面に大きな数字）で、.is-open が付くと Y 軸で回って表になる */
.about-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* カードの色は 3 枚ともサイトのメインの緑（ロゴと同じ）で統一（裏面・番号・英語のラベル・見出し） */
.about-card { --c: var(--teal); container-type: inline-size; perspective: 1400px; }
.about-card__inner { display: grid; height: 100%; transform-style: preserve-3d; }
.about-card__face {
  /* 表と裏を同じマスに重ねる（高さは長い方＝表にそろう）。中身の長さでカードの幅が広がらないよう min-width: 0 */
  grid-area: 1 / 1;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* 表: 白い地のカード（裏面と同じ大きさ・角丸・影）。上の 22px は番号がはみ出す分 */
.about-card__face--front {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
  padding: 16px 16px 30px;
  background: var(--white);
  border-radius: 40px;
  box-shadow: 0 14px 36px rgba(120, 80, 20, 0.12);
}
.about-card__media { position: relative; flex: none; }
.about-card__photo {
  overflow: hidden;
  aspect-ratio: 535 / 360;
  /* カードの内側に入れるので、カードの角丸より少し小さく。右上は番号が乗るので小さめ */
  border-radius: 28px 18px 28px 28px;
}
.about-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 番号: カードの右上の角にはみ出して乗る、角の丸い四角 */
.about-card__badge {
  position: absolute;
  right: -30px;
  top: -38px;
  display: grid;
  place-items: center;
  width: 84px;
  aspect-ratio: 1;
  color: var(--white);
  background: var(--c);
  border-radius: 34px 34px 34px 10px;
  font-family: Poppins, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}
.about-card__body { padding: 24px 10px 0; text-align: center; }
.about-card__label {
  margin: 0 0 6px;
  color: var(--c);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* 見出しは緑で 1 行に収める（いちばん長い約 11 文字が、カードの幅に入る大きさ） */
.about-card__title {
  margin: 0 0 16px;
  color: var(--c);
  /* カードの幅から、表の内側の余白（左右 16px）と本文の余白（左右 10px）＝計 52px を引いた中に 11 文字 */
  font-size: min(26px, (100cqw - 52px) / 11.6);
  font-weight: 900;
  line-height: 1.5;
  white-space: nowrap;
}
.about-card__text { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; }
/* 裏面: トランプの裏のように、緑の面に白い点線の枠と大きな数字 */
.about-card__face--back {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.16) 0 60px, transparent 61px),
    radial-gradient(circle at 86% 82%, rgba(255, 255, 255, 0.12) 0 90px, transparent 91px),
    var(--c);
  border-radius: 40px;
  box-shadow: 0 14px 36px rgba(120, 80, 20, 0.16);
  transform: rotateY(180deg);
}
.about-card__face--back::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: 30px;
}
.about-card__back-num { font-family: Poppins, sans-serif; font-size: 96px; font-weight: 700; line-height: 1; }
.about-card__back-en { font-family: Poppins, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; }
@media (prefers-reduced-motion: no-preference) {
  .about-card__inner {
    transform: rotateY(180deg);
    transition: transform 1.4s cubic-bezier(0.34, 1.3, 0.5, 1), translate 0.3s ease;
  }
  .about-card.is-open .about-card__inner { transform: none; }
  /* カードは押すと裏返せることが分かるよう、マウスを乗せると少し浮く */
  .about-card { cursor: pointer; }
  .about-card__inner { translate: 0 0; }
  .about-card:hover .about-card__inner { translate: 0 -6px; }
  .about-card:focus { outline: none; }
  .about-card:focus-visible .about-card__photo,
  .about-card:focus-visible .about-card__face--back { outline: 3px solid var(--teal-dark); outline-offset: 4px; }
  /* 表に返ったら、番号がぽんっと弾み、見出しが 1 文字ずつ跳ねる（top.js が文字を span に分ける） */
  .about-card.is-open .about-card__badge { animation: kv-header-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.8s both; }
  .about-card:not(.is-open) .about-card__title .heading-char { opacity: 0; animation: none; }
  .about-card.is-open .about-card__title .heading-char {
    animation: heading-char-hop 0.72s cubic-bezier(0.25, 0.8, 0.35, 1) calc(0.9s + var(--ci) * 0.05s) both;
  }
}

/* 5. FRONT RUNNERS（各事業の代表者のメッセージ）。2026-10-15 にスライダーから 3 人の横並びへ変更。
   カードは「写真 → 事業名・役職・名前 → コメント」の縦並び。遷移しないのでボタンは無し */
.about-values + .sub-section { margin-top: 140px; }
.about-runners-section .sub-heading__ja { word-break: keep-all; }
.about-runners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* カードの地は事業紹介ページと同じ塗り（各事業の色を白に 14% 混ぜる）。
   上から「写真 → 引用符＋キャッチコピー → 事業名・役職・名前 → 区切り線 → コメント」。
   余白は 24px（カードの内側）・写真の下 12px（引用符とひとことは詰める）・名前の上 22px・区切り線の上下 14 / 14px */
.about-runner {
  padding: 24px 24px 28px;
  background: color-mix(in srgb, var(--biz) 14%, white);
  border-radius: 24px;
}
.about-runner p { margin: 0; }
/* 写真は文字と同じ幅で、元の横長（4:3）のまま。--pos は縦横比を変えたときに左右どこを見せるか */
.about-runner__photo {
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
}
.about-runner__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50%) 50%; }
/* 事業名・役職・名前: 下に事業の色の細い線（出現時に左から伸びる。::after）を引いて、本文と分ける */
.about-runner__label {
  position: relative;
  display: grid;
  gap: 2px;
  margin-top: 22px !important;
  padding-bottom: 14px;
}
.about-runner__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--biz) 40%, white);
  transform-origin: 0 50%;
}
.about-runner__biz { color: var(--biz); font-size: 13px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.5; }
.about-runner__name { font-size: 17px; font-weight: 700; line-height: 1.5; }
.about-runner__role { margin-right: .5em; font-size: 12px; font-weight: 700; color: #6b7280; }
/* キャッチコピー: 上に事業の色の引用符（行の高さは詰めて、文字との間を空けすぎない） */
.about-runner__catch {
  margin-top: 12px !important;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.about-runner__catch::before {
  content: "\201C";
  display: block;
  position: relative;
  top: -6px; /* 引用符だけ少し上へ（ひとことの位置は変えない） */
  width: fit-content;
  height: 18px;
  margin-bottom: 0;
  transform-origin: 30% 80%;
  color: var(--biz);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}
.about-runner__text {
  margin-top: 14px !important;
  color: #3f474a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
/* カードの登場: 下からせり上がり、着地で横に潰れて、縦に伸びて、ぷるんと落ち着く（2026-10-15 ユーザー指示） */
@keyframes runner-card-in {
  0% { opacity: 0; transform: translateY(40px) scale(0.86, 0.9); }
  38% { opacity: 1; transform: translateY(-6px) scale(1.04, 0.96); }
  54% { transform: translateY(0) scale(0.96, 1.04); }
  70% { transform: translateY(0) scale(1.02, 0.985); }
  84% { transform: translateY(0) scale(0.995, 1.008); }
  100% { opacity: 1; transform: none; }
}
@keyframes runner-quote-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-14deg); }
  55% { opacity: 1; transform: scale(1.18, 0.86) rotate(4deg); }
  75% { transform: scale(0.94, 1.06) rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes runner-line-grow {
  from { transform: scaleX(0); }
  to { transform: none; }
}
/* マウスを乗せると、写真がわずかに寄る（PC のみ。遷移はしない。カードが浮く動きは 2026-10-15 ユーザー指示で削除）。
   出現のアニメーション（transform）と重ならないよう、scale で動かす */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-runner__photo img { transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .about-runner:hover .about-runner__photo img { scale: 1.04; }
}
/* 1 列に積む幅（タブレット・スマホ）は 1 枚ずつ見えたときに出るので、カードどうしの遅れは付けず、本文はそのカードのひとことの後に出す */
@media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
  .about-runner,
  .about-runner:nth-child(2),
  .about-runner:nth-child(3) { --i: 0; }
  .about-runner.is-in .about-runner__text { animation-delay: 0.4s; }
}
/* タブレット（801〜1100px）: 3 列だと細長くなるので、1 列にして「写真が左・文章が右」の横長のカードにする */
@media (min-width: 801px) and (max-width: 1100px) {
  .about-runners { grid-template-columns: 1fr; gap: 24px; max-width: 820px; }
  .about-runner {
    display: grid;
    padding-bottom: 24px; /* 写真の上下の余白をそろえる */
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }
  /* 写真はカードの高さいっぱい（内側の余白まで）に伸ばす（2026-10-15 ユーザー指示）。縦横比は固定せず、はみ出す分は切る */
  .about-runner__visual { grid-column: 1; grid-row: 1 / -1; align-self: stretch; display: flex; }
  .about-runner__photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 220px; }
  .about-runner__label,
  .about-runner__catch,
  .about-runner__text { grid-column: 2; }
  .about-runner__catch { margin-top: 0 !important; }
}
/* まわりの飾り: 見出しの左にスライム、右上と左下に星、カードの帯の右下にもう 1 匹（帯より手前に重ねる） */
.about-runners-section { position: relative; padding-bottom: 48px; }
.about-runners-deco > * { position: absolute; z-index: 3; height: auto; pointer-events: none; }
.about-runners-deco__slime--l { left: 5%; top: -44px; width: 84px; }
.about-runners-deco__slime--r { right: 1%; bottom: -30px; width: 100px; }
.about-runners-deco__star--1 { right: 12%; top: -26px; width: 48px; }
.about-runners-deco__star--2 { left: 21%; top: 46px; width: 28px; }
.about-runners-deco__star--3 { right: 24%; top: 58px; width: 30px; }
.about-runners-deco__star--4 { left: 14%; bottom: 0; width: 40px; }
@media (prefers-reduced-motion: no-preference) {
  /* 飾りの入れ物自体は .sub-reveal の「子要素がふわっと」から外す（transform が付くと中の位置の基準が入れ物に変わってずれるため） */
  .sub-reveal.about-runners-section > .about-runners-deco { opacity: 1; animation: none; }
  /* 代表者カード（2026-10-15 ユーザー指示）: カードごとに「写真 → 引用符がぷるん → ひとこと → 名前 → 線が伸びる」、
     3 枚が出そろってから本文が出る。カードの .is-in は top.js revealSiteSections が付ける。
     カードの並び自体は .sub-reveal の「子要素がふわっと」から外す。--b はそのカードの出始め */
  .sub-reveal.about-runners-section > .about-runners { opacity: 1; animation: none; }
  .about-runner { --step: 0.22s; --i: 0; --b: calc(var(--i) * var(--step)); }
  .about-runner:nth-child(2) { --i: 1; }
  .about-runner:nth-child(3) { --i: 2; }
  .about-runner:not(.is-in),
  .about-runner:not(.is-in) .about-runner__catch::before,
  .about-runner:not(.is-in) .about-runner__catch,
  .about-runner:not(.is-in) .about-runner__label,
  .about-runner:not(.is-in) .about-runner__text { opacity: 0; }
  .about-runner:not(.is-in) .about-runner__label::after { transform: scaleX(0); }
  .about-runner.is-in { transform-origin: 50% 100%; animation: runner-card-in 0.95s ease-out var(--b) both; }
  /* 中の要素はサイトのほかの出現（事業紹介の見出し・TOP のカード）に合わせて、短く弾む動きに（2026-10-15 ユーザー指示）。
     写真はカードと一緒に出る。ひとことは見出しと同じ kv-header-pop（ポンと弾む）、名前・本文は kv-copy-in を短く */
  .about-runner.is-in .about-runner__catch { transform-origin: 0 50%; animation: kv-header-pop 0.48s cubic-bezier(0.17, 0.88, 0.3, 1.28) calc(var(--b) + 0.14s) both; }
  .about-runner.is-in .about-runner__catch::before { animation: runner-quote-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--b) + 0.2s) both; }
  .about-runner.is-in .about-runner__label { animation: kv-copy-in 0.4s ease calc(var(--b) + 0.24s) both; }
  .about-runner.is-in .about-runner__label::after { animation: runner-line-grow 0.4s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--b) + 0.32s) both; }
  /* 本文は 3 枚目の名前・線が出たあと（2 × 0.22 + 0.32 ≒ 0.8s）に、左から少しずつずらして出す */
  .about-runner.is-in .about-runner__text { animation: kv-copy-in 0.4s ease calc(0.8s + var(--i) * 0.08s) both; }
  .about-runners-section:not(.is-in) .about-runners-deco > * { opacity: 0; }
  .about-runners-section.is-in .about-runners-deco__star {
    animation:
      kv-star-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.3s both,
      kv-star-twinkle calc(5.6s + var(--i, 0) * 0.61s) ease-in-out calc(1.2s + var(--i, 0) * 0.53s) infinite;
  }
  .about-runners-section.is-in .about-runners-deco__slime { transform-origin: 50% 100%; }
  .about-runners-section.is-in .about-runners-deco__slime--l {
    animation: kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.4s both, kv-slime-hop 2.9s ease-in-out 1.1s infinite;
  }
  .about-runners-section.is-in .about-runners-deco__slime--r {
    animation: kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.6s both, kv-slime-double-hop 3.4s ease-in-out 1.3s infinite;
  }
}

@media (max-width: 800px) {
  .about-vision { padding: 24px 0 24px; }
  .about-vision__map { top: 64px; opacity: 0.55; }
  .about-vision__title { margin-bottom: 28px; }
  /* スマホも中央そろえ（.sub-lead のスマホの左そろえを打ち消す） */
  .about-vision__lead { font-size: 16px; line-height: 1.7; text-align: center; }
  .about-slider { margin-top: 32px; }
  .about-vision__sub { margin-top: 32px; }
  .about-values { padding: 64px 0 80px; }
  /* スマホ: 六角形は素材の左右の端に寄っているので、画面より少しだけ広く敷いて左右の六角形を画面に入れる */
  .about-values::before { background-size: 150vw auto, auto; }
  .about-values + .sub-section { margin-top: 104px; }
  /* 01 のカードの上: カード側に番号のはみ出し分（22px）があるので、見出しの下の余白は小さく */
  .about-values__head { flex-wrap: wrap; gap: 8px 16px; padding-right: 0; margin-bottom: 12px; }
  .about-values__title-art { width: 220px; }
  .about-values__intro { flex-basis: 100%; order: 3; padding: 28px 0 0; }
  .about-values__en { font-size: 15px; }
  .about-values__iroha { top: -10px; bottom: auto; right: 0; width: 100px; }
  /* カードの間: 各カードの上に番号のはみ出し分（22px）があるので、間隔は小さめ */
  .about-cards { grid-template-columns: 1fr; gap: 16px; max-width: 440px; margin-inline: auto; }
  /* 画面の端で切れないよう、番号のはみ出しを小さく */
  .about-card__badge { right: -10px; top: -34px; width: 72px; font-size: 30px; }
  /* スマホはカードの影を付けない（表・裏とも） */
  .about-card__face--front,
  .about-card__face--back { box-shadow: none; }
  /* スマホは 1 列に積む */
  .about-runners { grid-template-columns: 1fr; gap: 36px; max-width: 440px; }
  .about-runner { padding: 20px 20px 26px; }
  .about-runner__catch { font-size: 19px; }
  /* スマホの飾りは小さく。見出しの文字にかからないよう端に寄せる */
  .about-runners-section { padding-bottom: 40px; }
  .about-runners-deco__slime--l { left: -4px; top: -58px; width: 52px; }
  .about-runners-deco__slime--r { right: -4px; bottom: -4px; width: 70px; }
  .about-runners-deco__star--1 { right: 4px; top: -34px; width: 30px; }
  .about-runners-deco__star--2 { display: none; }
  .about-runners-deco__star--3 { display: none; }
  .about-runners-deco__star--4 { left: 8%; bottom: 4px; width: 26px; }
}

/* ニュース一覧 */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 36px;
}
.news-filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 18px;
  color: var(--teal);
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color .3s ease, background-color .3s ease;
}
.news-filter button[aria-pressed="true"],
.news-filter button:hover { color: var(--white); background: var(--teal); }
/* スマホ: 4 つを均等な幅で 1 行に（1 つだけ下の段に落ちないように） */
@media (max-width: 600px) {
  .news-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .news-filter button { justify-content: center; padding: 0 4px; font-size: 13px; white-space: nowrap; }
}
/* 押したあとのブラウザ標準の青い枠は出さず、キーボード操作のときだけ緑の枠 */
.news-filter button:focus { outline: none; }
.news-filter button:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 3px; }
/* 行は TOP のニュース一覧（.home-news-list）と同じ見た目。一覧ページでは上にも罫線を引き、幅いっぱいに */
.news-page-list { max-width: none; border-top: 1px solid #e5e7eb; }
.news-page-list li[hidden] { display: none; }
/* 固定投稿の「PICK UP」バッジ（カテゴリの左。カテゴリの緑の枠線バッジと区別するため、塗りのオレンジ） */
.news-pickup {
  display: inline-block;
  padding: 2px 10px;
  color: var(--white);
  background: var(--badge-dfp);
  border-radius: 999px;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-align: center;
  vertical-align: 1px;
}
.news-page-empty { margin: 32px 0 0; color: #6b7280; text-align: center; }
/* ページ送り（1 2 … と前後の矢印）。現在のページは緑の塗り、ホバーはサイト共通のオレンジ */
.news-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
}
.news-pagination[hidden] { display: none; }
.news-pagination__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--teal);
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 50%;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color .4s cubic-bezier(0.22, 1, 0.36, 1), background-color .4s cubic-bezier(0.22, 1, 0.36, 1), border-color .4s cubic-bezier(0.22, 1, 0.36, 1), scale .38s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.news-pagination__btn[aria-current="page"] { color: var(--white); background: var(--teal); cursor: default; }
.news-pagination__btn--prev::before,
.news-pagination__btn--next::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.news-pagination__btn--next::before { rotate: 180deg; }
.news-pagination__btn:disabled { color: #c3cbcd; border-color: #d8dee0; cursor: default; }
.news-pagination__btn:not(:disabled, [aria-current="page"]):hover,
.news-pagination__btn.is-tapped:not(:disabled, [aria-current="page"]) { color: var(--white); background: var(--badge-dfp); border-color: var(--badge-dfp); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .news-pagination__btn:not(:disabled, [aria-current="page"]):hover { scale: 1.06; }
}
.news-pagination__btn:focus { outline: none; }
.news-pagination__btn:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 3px; }
/* ページを替えたとき、固定ヘッダーの下に一覧の頭（カテゴリ）が見えるように */
.news-filter { scroll-margin-top: 130px; }
/* 一覧ページの行は TOP より少しゆったり（窮屈に見えないよう上下の余白を広げる） */
.page-top .news-page-list a { padding-block: 24px; }
@media (max-width: 720px) {
  .page-top .news-page-list a { padding-block: 20px; }
}


/* ニュース詳細（news/article/index.html） */
/* ニュース詳細は見出し帯がなく、パンくずのすぐ下が記事なので、帯のあるページ用の上の余白を詰める
   （パンくずの文字から日付まで PC 40px／タブレット 28px／スマホ 20px） */
[data-page="news-article"] .sub-page { padding-top: 22px; }
@media (max-width: 800px) {
  [data-page="news-article"] .sub-page { padding-top: 10px; }
}
@media (max-width: 600px) {
  [data-page="news-article"] .sub-page { padding-top: 8px; }
}
.news-article__head { padding-bottom: 28px; border-bottom: 1px solid #e5e7eb; }
.news-article__meta { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.news-article__meta time { color: #6b7280; font-size: 16px; font-weight: 700; }
.news-article__title { overflow-wrap: anywhere; margin: 0; font-size: clamp(22px, 1.4vw + 14px, 30px); font-weight: 800; line-height: 1.6; }
/* 記事の写真（現行サイトの記事の写真）。縦長の写真が大きくなりすぎないよう高さに上限 */
.news-article__photo { margin: 36px 0 0; text-align: center; }
.news-article__photo img {
  display: inline-block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(70vh, 640px);
  border-radius: 24px;
  vertical-align: top;
}
@media (max-width: 800px) {
  .news-article__photo { margin-top: 28px; }
  .news-article__photo img { border-radius: 18px; }
}
.news-article__body { padding: 36px 0 8px; overflow-wrap: anywhere; }
.news-article__body p { margin: 0; font-size: 16px; font-weight: 500; line-height: 2; }
.news-article__body p + p { margin-top: 1.4em; }
.news-article__links { margin: 28px 0 0; padding: 0; list-style: none; }
.news-article__links a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* 管理画面（CMS）で書いた本文の見出し・リスト・引用・画像・リンク。
   要素どうしの間は 1.4em（上の「p { margin: 0 }」より強くするため :not(:first-child) で指定）。
   見出しの上は広めに空けて、前の段落との区切りが分かるようにする */
.news-article__body > :not(:first-child) { margin-top: 1.4em; }
.news-article__body > h2:not(:first-child) { margin-top: 2.2em; }
.news-article__body > h3:not(:first-child) { margin-top: 1.8em; }
.news-article__body > h2 + h3:not(:first-child) { margin-top: 1em; }
/* 大見出し: 緑の文字＋下線（全幅の薄い緑の線に、左端だけ濃い緑を重ねる） */
.news-article__body h2 {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 10px;
  color: var(--teal-dark);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.6;
  border-bottom: 3px solid var(--teal-soft);
}
.news-article__body h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 72px;
  height: 3px;
  background: var(--teal);
}
/* 中見出し: 緑の文字＋左に緑の縦線 */
.news-article__body h3 {
  margin-bottom: 0;
  padding-left: 14px;
  color: var(--teal-dark);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
  border-left: 4px solid var(--teal);
}
@media (max-width: 600px) {
  .news-article__body h2 { font-size: 20px; }
  .news-article__body h3 { font-size: 17px; }
}
.news-article__body ul, .news-article__body ol { margin-bottom: 0; padding-left: 1.5em; font-size: 16px; font-weight: 500; line-height: 2; }
.news-article__body blockquote { margin: 1.4em 0 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--teal-dark); }
.news-article__body img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.news-article__body a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* 本文中のリンク: カーソルを乗せると薄くなる */
.news-article__body a, .news-article__links a { transition: opacity 0.2s ease; }
.news-article__body a:hover, .news-article__links a:hover { opacity: 0.6; }
/* お問い合わせのロボット判定（Cloudflare Turnstile）の枠。送信ボタンの上に中央寄せ */
/* 管理画面からのプレビュー表示中の帯（/news/article/?preview=1） */
.news-preview-banner { margin: 0 0 24px; padding: 10px 16px; color: #8a4a06; font-size: 14px; font-weight: 700; text-align: center; background: #fdecd9; border-radius: 8px; }
.contact-form__turnstile { display: flex; justify-content: center; margin-top: 32px; }
.contact-form__turnstile[hidden] { display: none; }
.news-article__missing { margin: 0; padding: 40px 0; text-align: center; }
/* 記事の下の「同じカテゴリの新着記事」（最大 3 件）。その下に「ニュース一覧へ戻る」。行は一覧ページと同じ見た目。
   上に罫線を 1 本引いて記事と区切る（欄が出ないときは線も出ない） */
.news-related { margin: 80px 0 0; padding-top: 48px; border-top: 1px solid #e5e7eb; }
.news-related[hidden] { display: none; }
.news-related__title { margin: 0 0 20px; color: var(--teal); font-size: clamp(18px, 0.6vw + 14px, 22px); font-weight: 800; line-height: 1.5; }
/* 見出しのすぐ下には線を引かない（一覧ページの上の罫線をここでは消す） */
.news-related .news-page-list { border-top: 0; }
@media (max-width: 800px) {
  .news-related { margin-top: 56px; padding-top: 36px; }
}
/* 一覧へ戻る: 左揃え・左向きの丸矢印を左に（TOP の右向き矢印を反転して使う） */
.news-back { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 48px 0 0; }
.news-back__slime { flex: none; width: 96px; height: auto; margin-right: 16px; pointer-events: none; }
@media (max-width: 600px) {
  .news-back__slime { width: 68px; margin-right: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .news-back.is-in .news-back__slime {
    transform-origin: 50% 100%;
    animation:
      kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.3s both,
      kv-slime-hop 2.9s ease-in-out 1s infinite;
  }
}
.news-back .news-more { margin-top: 0; }
.news-back__icon { scale: -1 1; }

/* お問い合わせフォーム（送信先は確定後に設定。いまは見本として送信しない） */
.sub-lead + .contact-form { margin-top: 48px; }
/* フォームは背景色なし（下層共通の白背景のまま）。リード文との区切りに上へ 1 本の罫線 */
.contact-form {
  padding: 56px 0 0;
  border-top: 1px solid #e3e8e9;
}
.contact-form { position: relative; }
.contact-form__row + .contact-form__row { margin-top: 44px; }
.contact-form__label,
.contact-form legend {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 背景がないぶん、項目の見出しを大きく太くして入力欄との強弱をつける */
  margin: 0 0 16px;
  padding: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
}
.contact-form fieldset { margin: 0; padding: 0; border: 0; }
.contact-form__req,
.contact-form__opt {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.contact-form__req { color: var(--white); background: var(--teal); }
.contact-form__opt { color: #6b7280; background: #eef1f2; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 14px 18px;
  color: var(--ink);
  /* 白背景の上でも入力欄とわかるよう、薄いグレーの塗り＋枠 */
  background: #f6f8f8;
  border: 2px solid #dfe5e7;
  border-radius: 14px;
  font: inherit;
  font-size: 16px;
  transition: border-color .3s ease;
}
.contact-form textarea { min-height: 200px; resize: vertical; line-height: 1.8; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--teal); }
/* 種別の選択肢は一般的なチェックボックス（横に並べて折り返す） */
/* 狭い画面では見出しを折り返し、「必須」「（複数選択可）」は途中で改行させない */
.contact-form legend { flex-wrap: wrap; row-gap: 4px; }
.contact-form__req,
.contact-form__opt { white-space: nowrap; }
.contact-form__checks { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.contact-form__checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
/* チェックボックスは自前の見た目（ブラウザ標準だとチェックの色を白にできず、ホバーで明るい緑に変わるため）。
   オフ: 白地＋グレーの枠 → ホバー: 枠が濃い緑 → オン: 緑の塗り＋白のチェック */
.contact-form__checks input,
.contact-form__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--white) center / 12px 12px no-repeat;
  border: 2px solid #aab6b8;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.contact-form__checks input:hover,
.contact-form__consent input:hover { border-color: var(--teal-dark); }
.contact-form__checks input:checked,
.contact-form__consent input:checked {
  background-color: var(--teal-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.5 2.5 5-5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--teal-dark);
}
.contact-form__checks input:focus-visible,
.contact-form__consent input:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
/* サービス・内容は 1 つだけ選ぶラジオボタン: 丸い枠、選ぶと緑の枠の中に緑の丸 */
.contact-form__checks input[type="radio"] { border-radius: 50%; }
.contact-form__checks input[type="radio"]:checked {
  background-color: var(--white);
  background-image: radial-gradient(circle, var(--teal-dark) 0 4px, transparent 4.5px);
  background-size: 100% 100%;
}
.contact-form__consent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}
.contact-form__consent input { width: 20px; height: 20px; margin-top: 3px; }
.contact-form__consent a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.contact-form__submit { margin-top: 32px; text-align: center; }
.contact-form__submit .btn-contact { border: 0; font-family: inherit; cursor: pointer; }
/* ホバーは TOP のボタンと同じオレンジ（top.css .btn-contact:hover をそのまま使う） */
/* TOP の .page-top .btn-contact:hover（オレンジ）より強くして、押せない間はホバーしてもグレーのまま */
.page-top .contact-form__submit .btn-contact:disabled { background: #b8c4c6; cursor: not-allowed; scale: 1; }
/* 押せない間は、丸の中の矢印もグレーに（緑の矢印の画像をモノクロにする） */
.contact-form__submit .btn-contact:disabled .btn-contact__icon { filter: grayscale(1) brightness(1.1); }
/* 押せない間はホバーしても色・矢印を切り替えない */
.page-top .contact-form__submit .btn-contact:disabled:hover .btn-contact__icon:not(.btn-contact__icon--hover) { opacity: 1; }
.page-top .contact-form__submit .btn-contact:disabled:hover .btn-contact__icon--hover { opacity: 0; }
/* 不備のお知らせは一般的なエラー表示と同じく赤字・標準の太さで */
.contact-form__status { margin: 16px 0 0; color: #d93025; font-size: 14px; font-weight: 500; text-align: center; }
@media (max-width: 800px) {
  .contact-form { padding-top: 44px; }
  .contact-form__row + .contact-form__row { margin-top: 36px; }
  .contact-form__label,
  .contact-form legend { margin-bottom: 14px; font-size: 17px; }
}

/* 404（404.html。Cloudflare Pages が存在しない URL で表示する） */
.not-found { text-align: center; }
/* 1 文ごとに改行（スマホでも <br> を残す）。中央揃えのまま */
.not-found .sub-lead { text-align: center; }
.not-found__code {
  margin: 0 0 12px;
  color: var(--teal);
  font-family: Poppins, sans-serif;
  font-size: clamp(72px, 8vw + 32px, 140px);
  font-weight: 700;
  line-height: 1;
}
.not-found__actions { margin: 40px 0 0; }
/* スマホはお問い合わせページと同じく左寄せ（完了ページ・404 共通） */
@media (max-width: 800px) {
  .not-found,
  .not-found .sub-lead { text-align: left; }
}
/* お問い合わせ完了（contact/thanks/index.html） */
/* スマホでも 1 行に収まるよう、画面幅に合わせて縮める（18 文字分＋左右の余白） */
.thanks__title { margin: 0 0 20px; color: var(--teal-dark); font-size: min(clamp(20px, 1vw + 14px, 26px), calc((100vw - 48px) / 18.6)); font-weight: 900; white-space: nowrap; }
.not-found__actions .news-more { margin-top: 0; }

/* プライバシーポリシー（privacy/index.html） */
.policy__lead { margin: 0 0 48px; font-size: 17px; line-height: 1.9; }
.policy__item { padding: 32px 0; border-top: 1px solid #e3e3e3; }
.policy__item h2 { margin: 0 0 14px; color: var(--teal-dark); font-size: 20px; font-weight: 800; line-height: 1.5; }
.policy__item p { margin: 0; font-size: 16px; line-height: 1.9; }
.policy__item a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.policy__contact { margin-top: 20px; }
.policy__date { margin: 40px 0 0; color: #7d7d7d; font-size: 14px; text-align: right; }
/* ご支給原文の小見出し（(１) など）・①〜⑤の区分・箇条書き・窓口の囲み */
.policy__item h3 { margin: 24px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.9; }
.policy__item h2 + h3 { margin-top: 0; }
.policy__item h4 { margin: 18px 0 6px; font-size: 16px; font-weight: 700; line-height: 1.9; color: var(--teal-dark); }
.policy__item p + p { margin-top: 1em; }
/* 見出しの番号と文は横並びにして、文が折り返しても番号の下へ回り込まず、文だけが番号の右に揃う。
   スマホでは h2 を 18px に */
.policy__item h2, .policy__item h3 { display: flex; align-items: baseline; gap: 1em; }
.policy__num { flex: none; }
.policy__text { min-width: 0; }
@media (max-width: 720px) {
  .policy__item h2 { font-size: 18px; }
}
.policy__list { margin: 8px 0 0; padding-left: 1.4em; font-size: 16px; line-height: 1.9; }
.policy__list li + li { margin-top: 4px; }
.policy__list--plain { padding-left: 0; list-style: none; }
.policy__box { margin: 14px 0; padding: 18px 22px; background: #f5f7f7; border-radius: 14px; }
.policy__box p { font-size: 15px; }
.policy__end { text-align: right; }

@media (max-width: 900px) {
  a, button { -webkit-tap-highlight-color: transparent; }
  .service-card a:hover { background: var(--white); }
  .global-nav > a:hover,
  .global-nav .contact-link:hover { scale: none; }
  .global-nav > a:not(.contact-link):hover { color: var(--badge-dfp); }
  .global-nav .contact-link:hover { background: var(--badge-dfp); }
  :root { --header-height: 74px; }
  .site-header { padding: 10px 18px; position: sticky; top: 0; }
  .brand img { width: 64px; }
  .menu-button {
    display: flex;
    position: relative;
    z-index: 93;
    width: 60px;
    height: 60px;
    padding: 20px 17px;
    border: 0;
    border-radius: 50%;
    background: var(--teal);
    flex-direction: column;
    justify-content: space-between;
  }
  .menu-button { transition: background-color .4s cubic-bezier(0.22, 1, 0.36, 1); }
  .menu-button:hover { background: var(--badge-dfp); }
  .menu-button span:not(.sr-only) { display: block; width: 100%; height: 3px; background: var(--white); transition: transform .2s, opacity .2s; }
  .menu-button[aria-expanded="true"] span:nth-child(1),
  .menu-button[aria-expanded="true"] span:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 17px;
    right: 17px;
    width: auto;
    margin: 0;
  }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-50%) rotate(-45deg); }
  .site-header:has(.global-nav.is-open) .brand { visibility: hidden; }
  .global-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 90;
    display: flex;
    flex-direction: column;
    width: min(78vw, 320px);
    height: 100%;
    padding: 16px 20px 32px;
    background: transparent;
    /* メニューの背景（白い面・暗幕）は動かさず、その場でスッと出す。中の項目は nav-item-drop で順に弾んで出る。
       閉じるときもフェードを見せてから隠す。transform は none にしない（中の暗幕 position: fixed の基準をこの要素にするため） */
    transform: translateX(0);
    opacity: 0;
    transition: opacity .25s ease, visibility 0s linear .25s;
    pointer-events: none;
    visibility: hidden;
    align-items: stretch;
  }
  .global-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--white);
  }
  .global-nav.is-open {
    opacity: 1;
    transition: opacity .25s ease, visibility 0s;
    pointer-events: auto;
    visibility: visible;
  }
  /* 暗幕は画面全体に広げる（メニューと一緒にフェードする） */
  .global-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100%;
    margin-left: calc(min(78vw, 320px) - 100vw);
    border: 0;
    padding: 0;
    background: rgba(51, 51, 51, .35);
  }
  .global-nav__head,
  .global-nav > a { position: relative; z-index: 2; }
  .global-nav__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 56px;
    margin-bottom: 8px;
    padding-right: 56px;
  }
  .global-nav__brand { display: block; }
  .global-nav__brand img { display: block; width: 68px; height: auto; }
  .global-nav__iroha {
    display: block;
    position: relative;
    z-index: 2;
    width: 140px;
    height: auto;
    margin: auto 0 0 auto;
    pointer-events: none;
  }
  .global-nav > a { display: flex; justify-content: space-between; align-items: center; height: auto; padding: 20px 4px; border-bottom: 2px dotted #a6e0e6; /* メニュー区切り: 薄い緑（teal 系）の点線 */ text-align: left; }
  /* News 行と同じ丸矢印（arrow-row.svg の白矢印部分を背景に、円は背景色で塗る） */
  .global-nav > a:not(.contact-link)::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11.4612 6.89218C11.6041 6.74928 11.798 6.66901 12.0001 6.66901C12.2022 6.66901 12.396 6.74928 12.539 6.89218L17.1125 11.4657C17.2554 11.6086 17.3357 11.8025 17.3357 12.0046C17.3357 12.2067 17.2554 12.4006 17.1125 12.5435L12.539 17.117C12.3952 17.2559 12.2027 17.3327 12.0028 17.331C11.803 17.3292 11.6118 17.2491 11.4705 17.1077C11.3291 16.9664 11.249 16.7752 11.2472 16.5754C11.2455 16.3755 11.3223 16.183 11.4612 16.0392L14.7335 12.7669H7.42657C7.22441 12.7669 7.03053 12.6865 6.88758 12.5436C6.74463 12.4006 6.66432 12.2068 6.66432 12.0046C6.66432 11.8024 6.74463 11.6086 6.88758 11.4656C7.03053 11.3227 7.22441 11.2424 7.42657 11.2424H14.7335L11.4612 7.97001C11.3183 7.82706 11.238 7.63322 11.238 7.4311C11.238 7.22897 11.3183 7.03513 11.4612 6.89218Z'/%3E%3C/svg%3E") center / 100% no-repeat;
    transition: background-color .4s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
  }
  .global-nav > a:not(.contact-link):hover::after { background-color: var(--badge-dfp); }
  .global-nav .contact-link {
    /* 区切りの点線はメニュー項目だけ。ボタンには付けない。親指の届く一番下へ寄せる */
    border-bottom: 0;
    margin: auto 0 0;
    padding: 14px 16px 14px 24px;
    border-radius: 40px;
    min-width: 0;
    width: 100%;
  }
  .top-hero { padding: 12px 7vw 0; }
  .top-hero__inner { grid-template-columns: 1fr; padding-bottom: 32px; }
  .top-hero__photos { min-height: 260px; margin-top: 12px; }
  .top-hero__photo { width: 58%; }
  .top-about { padding: 48px 7vw 88px; }
  .top-about__inner { grid-template-columns: 1fr; }
  .section-vertical-title { writing-mode: horizontal-tb; transform: none; font-size: clamp(40px, 11vw, 56px); }
  .top-about__character { max-width: 240px; margin: 0 auto; }
  .home-news { padding: 48px 7vw 64px; }
  .home-news-inner { grid-template-columns: 1fr; gap: 18px; }
  .top-service { padding: 56px 7vw 72px; }
  .top-service__inner { grid-template-columns: 1fr; }
  .top-service__grid { grid-template-columns: 1fr; justify-content: stretch; }
  .top-contact__panel { border-radius: 48px; padding: 48px 20px; }
  .top-contact__watermark { white-space: normal; font-size: clamp(32px, 10vw, 48px); }
  .top-contact__iroha { display: none; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__cta { text-align: left; }
}

@media (max-width: 640px) {
  .top-about__text br { display: none; }
  .top-hero__lead { letter-spacing: 0; font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────
 * 下層ページ共通の見出し（パンくず＋写真の帯）— components/chrome.js の subHeroHTML
 * ───────────────────────────────────────────────────────────── */
.sub-crumb,
.sub-band {
  /* ギザギザは TOP と同じく歯の大きさ固定（1366 基準の図形を縮めず、狭い画面では左右を切る） */
  --jagged-h: var(--jag-h);
  /* TOP と同じコンテンツ幅（1366 幅で左右 160px → 1046px）に沿わせる */
  --sub-gutter: max(20px, calc((100% - 1046px) / 2));
}
.sub-band__spark {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
}
.sub-crumb {
  padding: 22px var(--sub-gutter) 18px;
}
.sub-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #9a9a9a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.sub-crumb li + li::before {
  content: ">";
  margin-right: 8px;
  color: #b5b5b5;
}
.sub-crumb a:hover { color: var(--badge-dfp); }
.sub-crumb [aria-current="page"] { color: #7d7d7d; }
/* ニュース詳細など長いタイトルでも、パンくずは 1 行に収めて末尾を「…」で省略する */
.sub-crumb ol { flex-wrap: nowrap; }
.sub-crumb li { flex-shrink: 0; white-space: nowrap; }
.sub-crumb [aria-current="page"] {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .sub-crumb { padding-block: 12px; }
}

/* ページタイトル帯 — サイトの緑の塗りに、TOP の service と同じ白い丸模様をうっすら重ねる。
   日本語の見出しを主役に、下へ英字（Poppins）を小さく添える */
.sub-band {
  position: relative;
  /* overflow は切らない（下端のギザギザにまたがるスライムの影が途切れるため）。丸模様は __pattern の中で切る */
  height: 360px;
  overflow-x: clip;
  /* 緑は下端のギザギザの白い帯（歯より下）の手前で止める。ページ切り替え直後の描画で、
     白いギザギザと下のコンテンツの間に緑の細い線が一瞬のぞかないように */
  background: linear-gradient(var(--teal) calc(100% - var(--jagged-h) * 0.3), transparent 0);
}
.sub-band__pattern {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sub-band__bubbles {
  position: absolute;
  max-width: none;
  height: auto;
  opacity: .5;
}
.sub-band__bubbles--left { left: -6%; top: -30%; width: 30%; }
.sub-band__bubbles--right { right: -8%; bottom: -60%; width: 34%; rotate: 60deg; }
@media (max-width: 800px) {
  .sub-band__bubbles--left { width: 62%; left: -26%; top: -20%; }
  .sub-band__bubbles--right { width: 70%; right: -34%; bottom: -40%; }
}
.sub-band__jagged {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: block;
  width: max(100%, var(--jag-w));
  height: calc(var(--jagged-h) + 2px);
  translate: -50% 0;
  fill: var(--white);
  pointer-events: none;
}
.sub-band__jagged use { fill: inherit; }
.sub-band__jagged--top { top: -1px; }
.sub-band__jagged--bottom { bottom: -1px; }
.sub-band__copy {
  position: relative;
  /* 見出しのテキストは星・キャラより前面（テキスト優先） */
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 var(--sub-gutter);
}
/* 見出しのブロックは帯いっぱいに広がり、キャラ（スライム・IROHA）の上に重なるので、クリック／タップは文字の部分だけで受ける
   （キャラの反応 site.js mountSlimeLife・top.js mountIrohaEyes を邪魔しないように） */
.sub-band__copy { pointer-events: none; }
.sub-band__copy h1 > span { pointer-events: auto; }
.sub-band__copy h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--white);
}
.sub-band__ja {
  /* 「プライバシーポリシー」など長い見出しもスマホで 1 行に収まるよう、画面幅に合わせて縮める */
  font-size: clamp(26px, 3.6vw + 12px, 60px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
/* 320px 前後の小さなスマホでも「ページが見つかりません」が 1 行に収まり、IROHA にかからないように */
/* スマホ幅だけ見出しを上寄せにして、右下の IROHA と重ならないようにする（タブレット幅は PC と同じく上下中央） */
@media (max-width: 600px) {
  .sub-band__copy { justify-content: flex-start; padding-top: 40px; }
}
@media (max-width: 360px) {
  .sub-band__ja { font-size: 22px; }
}
.sub-band__en {
  font-family: Poppins, sans-serif;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}
.sub-band__character {
  position: absolute;
  z-index: 3;
  left: max(12px, calc(var(--sub-gutter) - 96px));
  bottom: calc(var(--jagged-h) - 28px);
  width: clamp(84px, 9vw, 124px);
  height: auto;
  pointer-events: none;
  /* スクロールで下へ沈む上限（top.js mountCharParallax）。すぐ下の本文にかからない幅にとどめる */
  --slime-parallax-down: 44px;
}
@media (max-width: 800px) {
  .sub-band__character { --slime-parallax-down: 20px; }
}

/* IROHA — 帯の右下に、左下のスライムと対で立たせる */
.sub-band__iroha {
  position: absolute;
  z-index: 3;
  right: max(12px, calc(var(--sub-gutter) - 40px));
  bottom: calc(var(--jagged-h) - 40px);
  width: clamp(112px, 17vw, 172px);
  height: auto;
  pointer-events: none;
}
/* 帯右側の星は IROHA と重なるので、IROHA の左へ逃がす */
.sub-band__spark--a { top: 20%; width: 66px; right: calc(max(12px, var(--sub-gutter) - 40px) + clamp(112px, 17vw, 172px) + 24px); }
.sub-band__spark--b { bottom: 24%; width: 30px; right: auto; left: 46%; }


.page-business {
  --jagged-h: var(--jag-h);
  /* TOP と同じコンテンツ幅（1366 幅で左右 160px → 1046px） */
  --biz-content: 1046px;
  --biz-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  background: var(--white);
  scroll-padding-top: calc(var(--header-height) + 16px);
}
/* 導入（下層ページの 2 つ目のセクションは白で統一） */
.biz-lead {
  position: relative;
  background: var(--white);
}
.biz-body {
  position: relative;
  z-index: 1;
  width: min(var(--biz-content), calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 96px;
}
.biz-intro {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.biz-char {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
/* 帯の左下が青いスライムなので、導入の右はオレンジ（縦長なので幅は控えめ） */
.biz-char--intro-r { right: -130px; bottom: 4px; width: 108px; height: auto; }
.biz-spark {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: auto;
  pointer-events: none;
}
.biz-spark--a { top: -24px; left: -72px; width: 54px; }
/* 右下のオレンジのスライムにかからないよう、右上へ */
.biz-spark--b { top: -18px; right: -64px; width: 44px; }
.biz-spark--c { bottom: -8px; left: -48px; width: 30px; }
.page-business .biz-intro .top-service__lead {
  margin: 0 0 32px;
  color: var(--teal);
  font-size: clamp(22px, 2.6vw + 4px, 34px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.02em;
}
/* 事業の分野（教育・宿泊・飲食）：導入文と目次ボタンのあいだ。丸が3つ重なる図は画像 */
.biz-fields {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}
.biz-fields__lead {
  margin: 0;
  color: var(--teal);
  font-size: clamp(22px, 2.6vw + 4px, 34px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.02em;
}
.biz-fields__text {
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
}
.biz-fields__figure { position: relative; width: clamp(240px, 30vw, 340px); margin: 0; }
.biz-fields__img { display: block; width: 100%; height: auto; }
/* 飲食（11 月公開予定）：図の右下の丸に白を重ねて薄くし、丸の真下に「COMING SOON」の文字を添える。
   位置・大きさは biz-fields.png（940×876）の飲食の丸（左 480・上 416・直径 460）に合わせた % */
.biz-fields__soon {
  position: absolute;
  left: 51.06%;
  top: 47.49%;
  width: 48.94%;
  height: 52.51%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
}
.biz-fields__soon-label {
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 0;
  margin-top: 4px;
  color: var(--teal);
  font-family: Poppins, sans-serif;
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* スマホ・タブレットは縦に並べ、中央揃えに戻す */
@media (max-width: 768px) {
  .biz-fields { display: block; max-width: 760px; text-align: center; }
  .biz-fields__text { margin: 20px auto 0; font-size: 16px; }
  /* 折り返すときは文節の切れ目で改行する */
  .biz-fields__phrase { display: inline-block; }
  .biz-fields__figure { width: clamp(240px, 56vw, 340px); margin: 32px auto 0; }
}
.biz-spark--fa { top: -8px; right: -40px; width: 40px; }
.biz-spark--fb { bottom: 24px; left: -36px; width: 28px; }
@media (max-width: 1100px) {
  .biz-spark--fa, .biz-spark--fb { display: none; }
}
/* 本文も見出しと同じく中央揃え */
.biz-intro__text {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.biz-intro__text p {
  margin: 18px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
}
.biz-intro__text p:first-child { margin-top: 0; }
/* 目次のタグは中央寄せ（2026-10-15 ユーザー指示で少し下げた） */
.biz-toc {
  display: flex;
  flex-wrap: wrap; /* 1 行に入らない幅ではタグが折り返す */
  justify-content: center;
  gap: 10px;
  max-width: 960px;
  margin: 80px auto 0;
}
.biz-toc a {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 0 14px 0 18px;
  white-space: nowrap;
  color: var(--white);
  background: var(--toc, var(--teal));
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* アイコン → テキスト → 矢印の順。アイコンは各事業の見出しバッジと同じ形の白いシルエット */
.biz-toc__icon {
  flex: none;
  /* 横長・縦長がまちまちなので、面積がほぼそろう高さを個別に指定し、幅 34px の枠の中央に置く（テキストの頭もそろう） */
  width: 34px;
  height: var(--icon-h, 20px);
  object-fit: contain;
}
.biz-toc a[href$="#esports"] .biz-toc__icon { --icon-h: 18px; }
.biz-toc a[href$="#hado"] .biz-toc__icon { --icon-h: 20px; }
.biz-toc a[href$="#dfp"] .biz-toc__icon { --icon-h: 15.5px; }
.biz-toc a[href$="#immersia"] .biz-toc__icon { --icon-h: 18.5px; }
.biz-toc a[href$="#hotel"] .biz-toc__icon { --icon-h: 20.5px; }
.biz-toc a[href$="#pochette"] .biz-toc__icon { --icon-h: 22px; }
/* 2 列・1 列のときも、アイコンとテキストは左に寄せ、矢印だけ右端に置く */
.biz-toc__label { margin-right: auto; }
.biz-toc a[href$="#esports"] { --toc: var(--badge-esports); }
.biz-toc a[href$="#hado"] { --toc: var(--badge-hado); }
.biz-toc a[href$="#dfp"] { --toc: var(--badge-dfp); }
.biz-toc a[href$="#immersia"] { --toc: var(--badge-immersia); }
.biz-toc a[href$="#hotel"] { --toc: var(--badge-hotel); }
.biz-toc a[href$="#pochette"] { --toc: var(--badge-pochette); }
.biz-toc a:hover { background: color-mix(in srgb, var(--toc, var(--teal)) 82%, #000); }
/* 共通のホバー拡大（1.06 倍）は横長のボタンだと大きく動きすぎるので、目次は控えめに */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .biz-toc a:hover { scale: 1.02; }
}
/* 1 行に入らない幅（タブレット）は 2 列 */
@media (max-width: 1100px) {
  .biz-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* スマホは 1 列に積む */
@media (max-width: 600px) {
  .biz-toc { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
}
/* ページ内リンクだとわかるよう、右に下向き矢印（白の丸枠＋シェブロン） */
.biz-toc a::after {
  --toc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M7 9.5l4 4 4-4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--toc-arrow) center / contain no-repeat;
  mask: var(--toc-arrow) center / contain no-repeat;
  transition: translate .3s var(--biz-spring);
}
.biz-toc a:hover::after { translate: 0 3px; }
/* パソコン幅は目次バッジをひとまわり小さくする（スマホ・タブレットは押しやすい大きさのまま） */
@media (min-width: 1101px) {
  .biz-toc { gap: 6px; }
  .biz-toc a { min-height: 42px; gap: 6px; padding: 0 11px 0 13px; font-size: 14px; letter-spacing: 0.02em; }
  .biz-toc__icon { width: 28px; height: calc(var(--icon-h, 20px) * 0.85); }
  .biz-toc a::after { width: 18px; height: 18px; }
}

/* 事業一覧 — 写真・文章とも TOP のコンテンツ幅（1046px）のグリッドに沿わせる（写真 55 : 文章 45） */
.biz-list {
  /* 最初の事業（ポシェットプラス）の色で始める。以降は business.js が画面中央の事業の色に切り替える */
  --biz-bg: color-mix(in srgb, var(--badge-pochette) 12%, white);
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  padding: 24px 0 120px;
  background-color: var(--biz-bg);
  transition: background-color .9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* スクロールで画面中央に来た事業の色を薄く敷く（business.js が data-active を切り替える） */
.biz-list[data-active="esports"] { --biz-bg: color-mix(in srgb, var(--badge-esports) 14%, white); }
.biz-list[data-active="hado"] { --biz-bg: color-mix(in srgb, var(--badge-hado) 12%, white); }
.biz-list[data-active="dfp"] { --biz-bg: color-mix(in srgb, var(--badge-dfp) 14%, white); }
.biz-list[data-active="immersia"] { --biz-bg: color-mix(in srgb, var(--badge-immersia) 14%, white); }
.biz-list[data-active="hotel"] { --biz-bg: color-mix(in srgb, var(--badge-hotel) 14%, white); }
.biz-list[data-active="pochette"] { --biz-bg: color-mix(in srgb, var(--badge-pochette) 12%, white); }
/* 上端のギザギザ：一覧と同じ色で、上の導入部へ山が突き出す（TOP のセクション境界と同じ向き） */
.biz-list__jagged {
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--jagged-h));
  display: block;
  width: max(100%, var(--jag-w));
  translate: -50% 0;
  height: calc(var(--jagged-h) + 1px);
  fill: var(--biz-bg);
  transition: fill .9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.biz-list__jagged use { fill: inherit; }
.biz-row {
  --biz: var(--teal);
  --plate: color-mix(in srgb, var(--biz) 42%, white);
  /* 100cqw = 一覧の幅（スクロールバーを含まない実幅） */
  --g: max(20px, (100cqw - var(--biz-content)) / 2);
  --c: min(var(--biz-content), 100cqw - 40px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  align-items: center;
  column-gap: 56px;
  padding: 56px var(--g);
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.biz-row--right { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
.biz-row:has(.biz-frame--esports) { --biz: var(--badge-esports); }
.biz-row:has(.biz-frame--hado) { --biz: var(--badge-hado); }
.biz-row:has(.biz-frame--dfp) { --biz: var(--badge-dfp); }
.biz-row:has(.biz-frame--immersia) { --biz: var(--badge-immersia); }
.biz-row:has(.biz-frame--hotel) { --biz: var(--badge-hotel); }
.biz-row:has(.biz-frame--pochette) { --biz: var(--badge-pochette); }
.biz-frame {
  position: relative;
  z-index: 1;
}
/* 写真は角丸の枠で固定し、中の写真だけをパララックス（business.js）で動かす */
.biz-frame__shape {
  display: block;
  /* 事業の色の板を左上にずらして重ねる（マスク後の形に沿うよう drop-shadow で描く） */
  filter: drop-shadow(-14px -14px 0 var(--plate));
}
.biz-frame__clip {
  display: block;
  overflow: hidden;
  border-radius: 24px;
}
.biz-row__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 303 / 215;
  object-fit: cover;
  object-position: center;
}
.biz-row__copy { position: relative; z-index: 1; }
.biz-row h3 { margin: 0 0 20px; }
/* 見出しバッジは画像。高さをそろえると横長のバッジほど文字が大きく見えるので、
   書き出し時と同じ比率（元画像の 1/3 = --bw）に共通の倍率 --badge-k を掛けて、文字の大きさをそろえる */
.biz-row__title {
  --badge-k: 1.05;
  display: block;
  width: calc(var(--bw, 150px) * var(--badge-k));
  height: auto;
  max-width: 100%;
}
.biz-row:has(.biz-frame--esports) .biz-row__title { --bw: 270px; } /* 2026-10-15 文字の大きさをほかとそろえて測り直し */
.biz-row:has(.biz-frame--hado) .biz-row__title { --bw: 151px; }
.biz-row:has(.biz-frame--dfp) .biz-row__title { --bw: 243px; }
.biz-row:has(.biz-frame--immersia) .biz-row__title { --bw: 185px; }
.biz-row:has(.biz-frame--hotel) .biz-row__title { --bw: 130px; }
.biz-row:has(.biz-frame--pochette) .biz-row__title { --bw: 204px; }
.biz-row p { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.9; }
.biz-place {
  margin: 24px 0 0;
  border-top: 1px solid #e3e3e3;
  font-size: 15px;
  line-height: 1.7;
}
.biz-place div {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #e3e3e3;
}
.biz-place dt { font-weight: 700; color: var(--biz, var(--teal-dark)); }
.biz-place dd { margin: 0; font-weight: 500; }
/* 公式サイトはテーブルの 1 行として、URL をそのまま事業の色のテキストリンクで出す（長い URL は途中で折り返す） */
.biz-place__link {
  color: var(--biz);
  overflow-wrap: anywhere;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s ease;
}
/* 外部サイトへのリンクだとわかるよう、右に小さな外部リンクのアイコン（会社概要の運営施設も同じ） */
.biz-place__link::after,
.sub-table .ext-link::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  background: currentColor;
  /* 外部リンクのアイコン（四角から矢印が出る形。Material Icons「open_in_new」・Apache License 2.0） */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) {
  /* ホバーは TOP のボタンと同じオレンジ */
  .biz-place__link:hover { color: var(--badge-dfp); }
}
/* 各施設の公式SNS はフッターと同じアイコン。丸はその事業の色で塗り、ロゴは白（緑の SVG を白へ塗り替え）。ホバー／タップは薄くなるだけ */
.biz-sns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.biz-sns__link {
  display: block;
  width: 42px;
  height: 42px;
  line-height: 0;
  background: var(--biz, var(--teal));
  border-radius: 50%;
  transition: opacity .3s ease;
}
.biz-sns__link img { display: block; width: 100%; height: 100%; filter: brightness(0) invert(1); }
@media (hover: hover) {
  .biz-sns__link:hover { opacity: .6; }
}
.biz-sns__link.is-tapped { opacity: .6; transition-duration: 0s; }
/* 見出しバッジの右上にのるキャラクター */
.biz-char--row { top: -70px; right: 0; width: 104px; height: auto; }
.biz-char--row-r { top: -84px; right: 0; width: 92px; }
/* 星は文章側の余白（コンテンツ幅の外）に散らす */
.biz-spark--d { top: 24px; right: calc(var(--g) / 2 - 29px); width: 58px; }
.biz-spark--g { bottom: 28px; right: calc(var(--g) / 2 - 26px); width: 52px; }
.biz-spark--e { top: 28px; right: calc(var(--g) / 2 - 24px); width: 48px; }
.biz-spark--f { top: 24px; left: calc(var(--g) / 2 - 20px); width: 40px; }
.biz-spark--h { bottom: 28px; left: calc(var(--g) / 2 - 18px); width: 36px; }

/* イマーシアのスライムは横長で小さく見えるので、ほかの行のキャラより幅を大きめに */
.biz-char--row-imm { top: -84px; right: 4px; width: 138px; }

/* 写真の角にかかる星 */
.biz-spark--frame-tl { top: -40px; left: -40px; z-index: 3; width: 52px; }
.biz-spark--frame-tr { top: -40px; right: -22px; z-index: 3; width: 50px; }

@media (max-width: 1100px) {
  .biz-char--intro-r { display: none; }
  /* 左右の余白が狭くなるので、見出しまわりの星は画面の内側へ寄せる */
  .biz-spark--b { right: -12px; }
  .biz-spark--a { left: -12px; }
  .biz-spark--c { left: 0; }
  /* 左右の余白が星の幅より狭くなったら、余白の星は出さない */
  .biz-spark--d, .biz-spark--e, .biz-spark--f, .biz-spark--g, .biz-spark--h { display: none; }
}
/* スマホは見出しが画面幅いっぱいで、上は見出し帯のスライム・IROHA があるので、見出しまわりの星は出さない */
@media (max-width: 800px) {
  .biz-spark--a, .biz-spark--b, .biz-spark--c { display: none; }
}

@media (max-width: 800px) {
  .sub-band { height: 240px; }
  /* 見出しは帯の上寄せにして、右下に立つ IROHA（頭の高さ）より上に置く */
  .biz-body { padding: 44px 0 64px; }
  /* スマホも見出しと同じく中央揃え。折り返すときは文節（.biz-intro__phrase）の切れ目で改行する */
  .biz-intro__phrase { display: inline-block; }
  .biz-intro__text p { font-size: 16px; }
  .biz-list { padding: 8px 0 88px; }
  .biz-row,
  .biz-row--right {
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding: 48px var(--g);
  }
  /* 写真 → 文章の順 */
  .biz-row--right .biz-frame { order: -1; }
  /* 写真を上に並べ替えても、文章側（見出しの上のキャラ）が写真より前面に出るように */
  .biz-row__copy { z-index: 2; }
  .biz-frame { margin: 10px 0 0 10px; }
  .biz-frame__shape { filter: drop-shadow(-10px -10px 0 var(--plate)); }
  .biz-row__title { --badge-k: 0.92; }
  .biz-row p { font-size: 16px; }
  .biz-char--row { top: -58px; right: 20px; width: 80px; }
  .biz-char--row-r { top: -70px; right: 20px; width: 76px; }
  .biz-char--row-imm { top: -72px; right: 16px; width: 108px; }
  .biz-spark--frame-tl { top: -30px; left: -26px; width: 38px; }
  .biz-spark--frame-tr { top: -30px; right: -10px; width: 36px; }
  /* 帯が低くなるので、見出し（上寄せ）にかからないよう、帯の下のほう・スライムと IROHA の間へ */
  .sub-band__spark--a { top: auto; right: auto; bottom: 22%; left: 38%; width: 32px; }
  .sub-band__spark--b { bottom: 44%; left: 50%; width: 22px; }
}
/* SP は帯を低めに（上の max-width: 800px の指定より後ろに置く） */
@media (max-width: 600px) {
  .sub-band { height: 200px; }
  /* 見出しは上下中央（下のギザギザとスライムの分だけわずかに上へ）。IROHA は小さめにして見出しの下に収める */
  .sub-band__copy { justify-content: center; padding-top: 0; padding-bottom: 26px; }
  .sub-band__iroha { width: 84px; }
  .sub-band__spark--b { bottom: 26%; left: 52%; }
  /* スライムは下端のギザギザにまたがったまま、帯の下へのはみ出しを少なくして本文に近づけられるように */
  .sub-band__character { bottom: calc(var(--jagged-h) - 16px); }
  .biz-body { padding-top: 36px; }
}
/* タブレット幅は見出しが上下中央にくるので、小さい星は見出しの下（右寄り）へ */
@media (min-width: 601px) and (max-width: 800px) {
  .sub-band__spark--b { bottom: 16%; left: 60%; }
  /* 中央よりわずかに上へ寄せ、英語の小見出しが左下のスライムにかからないように */
  .sub-band__copy { padding-bottom: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* 中の写真は枠より大きくしておき、パララックスで動かす余白をつくる */
  .biz-row__photo {
    scale: 1.2;
    transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sub-band:not(.is-in) .sub-band__copy,
  .sub-band:not(.is-in) .sub-band__character,
  .biz-intro:not(.is-in) .top-service__lead,
  .biz-intro:not(.is-in) .biz-intro__text,
  .biz-intro:not(.is-in) .biz-char,
  .biz-intro:not(.is-in) .biz-spark,
  .biz-toc:not(.is-in) a,
  .biz-row:not(.is-in) .biz-frame__shape,
  .biz-row:not(.is-in) .biz-row__title,
  .biz-row:not(.is-in) .biz-row__copy > p,
  .biz-row:not(.is-in) .biz-place,
  .biz-row:not(.is-in) .biz-char,
  .biz-row:not(.is-in) .biz-spark {
    opacity: 0;
  }
  /* 見出し（日本語＋英字）はまとめてふわっと */
  .sub-band.is-in .sub-band__copy {
    animation: kv-copy-in 0.45s ease 0.2s both;
  }
  .biz-intro.is-in .top-service__lead {
    animation: kv-header-pop 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) both;
  }
  .biz-intro.is-in .biz-intro__text {
    animation: kv-copy-in 0.4s ease 0.16s both;
  }
  .biz-intro.is-in .biz-char {
    animation: kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.12s both;
  }
  .biz-intro.is-in .biz-spark {
    animation:
      kv-star-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.2s both,
      kv-star-twinkle calc(5.6s + var(--i, 0) * 0.61s) ease-in-out calc(1s + var(--i, 0) * 0.53s) infinite;
  }
  .biz-toc.is-in a {
    animation: kv-header-pop 0.42s cubic-bezier(0.17, 0.88, 0.3, 1.28) both;
  }
  .biz-toc.is-in a:nth-child(2) { animation-delay: 0.06s; }
  .biz-toc.is-in a:nth-child(3) { animation-delay: 0.12s; }
  .biz-toc.is-in a:nth-child(4) { animation-delay: 0.18s; }
  .biz-toc.is-in a:nth-child(5) { animation-delay: 0.24s; }
  /* 写真は置かれている側から、TOP のカードのように「配られて」入ってくる。文章は反対側から */
  .biz-row--left.is-in .biz-frame__shape {
    animation: biz-deal-left 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .biz-row--right.is-in .biz-frame__shape {
    animation: biz-deal-right 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .biz-row.is-in .biz-row__title {
    animation: kv-header-pop 0.48s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.12s both;
  }
  .biz-row--left.is-in .biz-row__copy > p,
  .biz-row--left.is-in .biz-place {
    animation: biz-slide-from-right 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
  }
  .biz-row--right.is-in .biz-row__copy > p,
  .biz-row--right.is-in .biz-place {
    animation: biz-slide-from-left 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
  }
  .biz-row.is-in .biz-char {
    animation: kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.18s both;
  }
  .biz-row.is-in .biz-spark {
    animation:
      kv-star-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.08s both,
      kv-star-twinkle calc(5.6s + var(--i, 0) * 0.61s) ease-in-out calc(1s + var(--i, 0) * 0.53s) infinite;
  }
  .sub-band:not(.is-in) .sub-band__spark { opacity: 0; }
  .sub-band.is-in .sub-band__spark {
    animation:
      kv-star-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.4s both,
      kv-star-twinkle calc(5.6s + var(--i, 0) * 0.61s) ease-in-out calc(1.2s + var(--i, 0) * 0.53s) infinite;
  }
  /* スライムは TOP と同じく個体ごとに違う動きで動き続ける */
  .sub-band__character,
  .biz-char--intro-r,
  .biz-char--row { transform-origin: 50% 100%; }
  /* IROHA も TOP の contact と同じく、ぽんっと出てくる */
  .sub-band:not(.is-in) .sub-band__iroha { opacity: 0; }
  .sub-band.is-in .sub-band__iroha {
    transform-origin: 50% 100%;
    animation: kv-header-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.36s both;
  }
  .sub-band.is-in .sub-band__character {
    animation:
      kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.28s both,
      kv-slime-hop 2.9s ease-in-out 1s infinite;
  }
  .biz-intro.is-in .biz-char--intro-r {
    animation:
      kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.12s both,
      kv-slime-double-hop 3.4s ease-in-out 0.9s infinite;
  }
  .biz-row.is-in .biz-char--row {
    animation:
      kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.18s both,
      kv-slime-wobble-big 4.2s ease-in-out 0.9s infinite;
  }
  .biz-row.is-in .biz-char--row-r {
    animation:
      kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.18s both,
      kv-slime-squish 3.2s ease-in-out 0.9s infinite;
  }
  .biz-row.is-in .biz-char--row-imm {
    animation:
      kv-slime-in 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.18s both,
      kv-slime-sway-hop 3.6s ease-in-out 0.9s infinite;
  }
}
@keyframes biz-deal-left {
  0% { opacity: 0; transform: translate(-96px, 48px) rotate(-9deg) scale(0.86); }
  60% { opacity: 1; transform: translate(6px, -4px) rotate(1.5deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes biz-deal-right {
  0% { opacity: 0; transform: translate(96px, 48px) rotate(9deg) scale(0.86); }
  60% { opacity: 1; transform: translate(-6px, -4px) rotate(-1.5deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes biz-slide-from-right {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes biz-slide-from-left {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

/* 右下追従のページトップボタン（components/chrome.js が全ページに挿入。一定量スクロールで表示） */
.page-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition:
    opacity .4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility .4s,
    translate .4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color .4s cubic-bezier(0.22, 1, 0.36, 1),
    color .4s cubic-bezier(0.22, 1, 0.36, 1),
    scale .35s cubic-bezier(0.17, 0.88, 0.3, 1.6);
}
/* 押している間はポンと拡大（chrome.js が pointerdown〜up で is-pressed を付与。タッチ端末でも効くよう :active ではなくクラス） */
.page-top-btn.is-pressed { scale: 1.18; transition-duration: .4s, .4s, .4s, .4s, .4s, .18s; }
/* 緑・写真など暗い背景の上: 白ボタン＋緑の矢印/文字に反転（site.js mountPageTopTone が付与） */
.page-top-btn.is-on-dark { background: var(--white); color: var(--teal); }
/* ホバーは暗い背景の上でも、通常時と同じくオレンジの塗り＋白の矢印/文字 */
.page-top-btn.is-on-dark:hover { background: var(--badge-dfp); color: var(--white); }
.page-top-btn.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.page-top-btn:hover { background: var(--badge-dfp); }
.page-top-btn:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 3px; }
html:has(.global-nav.is-open) .page-top-btn { opacity: 0; visibility: hidden; }
.page-top-btn__arrow {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-top-btn__label { font-size: 14px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
@media (max-width: 720px) {
  .page-top-btn { right: 14px; bottom: 14px; width: 66px; height: 66px; }
  .page-top-btn__arrow { width: 23px; height: 23px; }
  .page-top-btn__label { font-size: 12px; }
}

/* スライムのまばたき: 閉じている瞬間は白目も濃い色にし、白い横線が出ないようにする（site.js scheduleBlink） */
.slime-eyes.is-shut path { fill: #333; }

/* 埋め込んだスライムの SVG は block 表示（詳細度 0 なので、各キャラの display: none 指定がそのまま効く） */
:where(.slime-svg) { display: block; }
/* スライムの反応（site.js mountSlimeLife）: 描画部分だけがクリック対象。反応中は目を「> <」「^ ^」に差し替え */
.slime-svg.is-interactive {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.slime-svg .slime-face {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  scale: 0.3;
  transition: opacity .12s ease, scale .32s cubic-bezier(0.34, 1.8, 0.5, 1);
}
.slime-svg[data-face] .slime-eyes { opacity: 0; }
.slime-svg[data-face="happy"] .slime-face--happy,
.slime-svg[data-face="smile"] .slime-face--smile {
  opacity: 1;
  scale: 1;
}
.slime-particles {
  position: fixed;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  pointer-events: none;
}
.slime-particle {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}
.slime-particle svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── スマホメニュー（900px 以下） ───
 * 英字の小見出し／SNS／お問い合わせを一番下に／IROHA とスライムがボタンの上から顔を出す／
 * 開くと項目が上から順に弾んで出てくる／ハンバーガーの 3 本線がくるっと回って × に変形 */
@media (max-width: 900px) {
  /* 日本語の右隣に英字を小さく並べる（HTML は英字が先なので order で後ろへ） */
  .global-nav__text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .global-nav__en {
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    color: var(--teal);
    order: 1;
    transition: color .4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* ホバーで日本語・矢印と一緒に英字もオレンジに */
  .global-nav > a:hover .global-nav__en { color: var(--badge-dfp); }
  .global-nav__sns {
    display: block;
    position: relative;
    z-index: 2;
    margin: 24px 0 28px;
  }
  .global-nav__sns-title {
    margin: 0 0 10px;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--teal);
  }
  .global-nav__sns-list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .global-nav__sns-link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--teal-soft);
    transition: background-color .3s cubic-bezier(0.22, 1, 0.36, 1), scale .3s cubic-bezier(0.34, 1.4, 0.5, 1);
  }
  .global-nav__sns-link img {
    display: block;
    width: 44px;
    height: 44px;
    transition: filter .3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .global-nav__sns-link img[src*="linkedin"] { width: 18px; height: 18px; }
  .global-nav__sns-link:hover,
  .global-nav__sns-link:active { background: var(--badge-dfp); scale: 1.06; }
  .global-nav__sns-link:hover img,
  .global-nav__sns-link:active img { filter: brightness(0) invert(1); }

  /* お問い合わせの上に IROHA が立ち、左側ではスライムがボタンの裏から飛び出してボタンの上に乗る（どちらもボタンより奥） */
  .global-nav .contact-link { position: relative; z-index: 3; }
  .global-nav__iroha {
    position: absolute;
    right: 18px;
    /* お問い合わせボタンの上端から 12px ほど浮かせる */
    bottom: 100px;
    z-index: 2;
    width: 96px;
    margin: 0;
  }
  .global-nav__slime {
    display: block;
    position: absolute;
    left: 34px;
    /* お問い合わせボタンの上端に立つ位置。閉じている間はボタンの裏（下）に隠しておく */
    bottom: 104px;
    z-index: 2;
    width: 58px;
    height: auto;
    translate: 0 100%;
    rotate: 0deg;
  }
  .global-nav.is-open .global-nav__slime {
    translate: 0 0;
    rotate: -6deg;
    transition:
      translate .5s cubic-bezier(0.34, 1.56, 0.64, 1) .62s,
      rotate .7s cubic-bezier(0.34, 1.9, 0.6, 1) .62s;
  }
  /* 高さの低い画面では SNS と重ならないように IROHA は出さない */
  @media (max-height: 700px) {
    .global-nav__iroha { display: none; }
  }

  /* ハンバーガー → ×: 開くときは 3 本線が中央に集まってから、くるっと回って × に。閉じるときは逆順 */
  .menu-button span:not(.sr-only) {
    position: absolute;
    top: 50%;
    left: 17px;
    right: 17px;
    width: auto;
    height: 3px;
    margin: -1.5px 0 0;
    border-radius: 2px;
    transform: none;
    transition:
      translate .2s ease .22s,
      rotate .26s ease,
      opacity .15s ease .22s,
      scale .2s ease .22s;
  }
  .menu-button span:nth-child(1) { translate: 0 -9px; }
  .menu-button span:nth-child(3) { translate: 0 9px; }
  .menu-button[aria-expanded="true"] span:not(.sr-only) {
    transition:
      translate .2s ease,
      rotate .52s cubic-bezier(0.34, 1.56, 0.64, 1) .16s,
      opacity .12s ease,
      scale .2s ease;
  }
  .menu-button[aria-expanded="true"] span:nth-child(1) { translate: 0 0; rotate: 225deg; transform: none; }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; scale: 0 1; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { translate: 0 0; rotate: 135deg; transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .site-header .global-nav.is-open > a,
  .site-header .global-nav.is-open > .global-nav__sns {
    animation: nav-item-drop .56s cubic-bezier(0.3, 0.9, 0.35, 1) calc(0.08s + var(--ni, 0) * 0.055s) both;
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .menu-button span:not(.sr-only),
  .menu-button[aria-expanded="true"] span:not(.sr-only),
  .global-nav.is-open .global-nav__slime { transition: none; }
}
@keyframes nav-item-drop {
  0% { opacity: 0; transform: translateY(-22px); }
  55% { opacity: 1; transform: translateY(5px); }
  76% { transform: translateY(-2px); }
  100% { opacity: 1; transform: none; }
}

/* 縦に長い画面（タブレットなど）のスマホメニュー: 項目の間隔と IROHA を少し大きくして、SNS とお問い合わせの間の余白を埋める */
@media (max-width: 900px) and (min-height: 900px) {
  .global-nav > a { padding-block: 30px; }
  .global-nav__sns { margin-top: 44px; }
  .global-nav__sns-link { width: 52px; height: 52px; }
  .global-nav__sns-link img { width: 52px; height: 52px; }
  .global-nav__iroha { width: 156px; }
  .global-nav__slime { width: 72px; }
}