@layer base, overrides;

@layer base{

/* ==========================================================================
   CSS Variables - STELLA HOLDINGS
   指示書に基づく正確なカラー定義
   ========================================================================== */

:root {
  /* Main Colors (指示書より) */
  --color-primary: #fb9516;           /* メインカラー（オレンジ） */
  --color-secondary: #faf131;         /* マーカー黄色 */
  --color-marker-yellow: rgba(250, 241, 49, 0.78); /* 黄色マーカー 透明度78% */

  /* Background Colors */
  --color-bg-sea: #90dedd;            /* 背景カラー（海） */
  --color-bg-mint: #e3f3f1;           /* 海以降のミント */
  --color-bg-cream: #fef9f0;
  --color-bg-light: #f2f2f2;
  --color-white: #ffffff;

  /* Text Colors */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-dark: #1a1a1a;
  --color-text-catch: #36727f;        /* キャッチコピーの文字色 */

  /* Header */
  --color-header-bg: #fb9516;         /* ヘッダーエリアの背景 */

  /* Gradients (海以降: 白→薄い水色→白) */
  --gradient-section: linear-gradient(180deg, #ffffff 0%, #e3f3f1 50%, #ffffff 100%);

  /* Typography */
  --font-family-ja: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
  --font-family-en: "Montserrat", "Poppins", sans-serif;
  --font-family-catch: "TA-おおにし", "Hiragino Kaku Gothic ProN", sans-serif; /* キャッチコピー用 */

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  --spacing-4xl: 6rem;     /* 96px */
  --spacing-section: clamp(60px, 10vw, 120px);

  /* Container */
  --container-max: 1440px;
  --container-padding: clamp(16px, 2.78vw, 40px);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

  /* Animation */
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
}
}

@layer base{

/* ==========================================================================
   CSS Reset - Modern Reset
   ========================================================================== */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: var(--line-height-normal, 1.5);
  font-family: var(--font-family-ja, sans-serif);
  font-size: var(--font-size-base, 16px);
  color: var(--color-text, #333);
  background-color: var(--color-white, #fff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, h5, h6,
button, input, label {
  line-height: var(--line-height-tight, 1.25);
}

/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Images */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Button reset */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Text areas */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden (for accessibility) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
}

@layer base{

/* ==========================================================================
   Layout - Header & Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.l-container--wide {
  max-width: 1400px;
}

.l-container--narrow {
  max-width: 900px;
}

/* Scrollbar gutter — メニュー開閉時のガクつき防止（モバイルはオーバーレイスクロールバーなので不要） */
@media (min-width: 768px) {
  html {
    scrollbar-gutter: stable;
  }
}

/* メニュー開閉中もスクロール可能にする（JSのinline overflow:hidden を上書き） */
body {
  overflow: visible !important;
}

/* Hero: 船の浮遊アニメーション — 海にぷかぷか浮いてる感じ */
@keyframes ship-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.p-hero__ship {
  animation: ship-bob 3s ease-in-out infinite;
}

/* MISSION: イラストを左にずらして文字との重なりを軽減（画面から見切れOK） */
.p-philosophy--mission .p-philosophy__illustration img {
  transform: translateX(-100px) !important;
}


/* サービス詳細: 説明テキストのboldを有効にする */
.p-service-company__text b {
  font-weight: 700;
}

/* META LAND: ロゴサイズを他サービスと統一 */
.p-service-company__item#service-5 .p-service-company__logo {
  height: clamp(18px, 1.94vw, 28px) !important;
}

/* OUR SERVICE & Company: 矢印ボタンをCTAと同サイズに */
.p-service-company__arrow {
  width: 52px !important;
  transition: transform 0.3s ease !important;
}
.p-service-company__arrow:hover {
  transform: scale(1.5) !important;
}

/* CTA: 矢印ボタンを大きく */
.p-cta-grid__arrow {
  width: 52px;
}

/* ピンツールチップ: タイトル文字色を黒 + 中央揃え（指示書準拠） */
.p-hero__tooltip-title {
  color: #333333 !important;
  text-align: center;
}

/* キャッチコピーがピン4を覆い隠すのを防ぐ（title-wrap z:10 > pin z:5） */
.p-hero__title-wrap {
  pointer-events: none;
}

/* フェードイン完了後はdelayを消してホバー反応を即時にする */
.js-fadein.is-show {
  transition-delay: 0s !important;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.l-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  padding: 24px 0;
  pointer-events: none;
  transition: background-color var(--duration-normal) var(--easing-default);
}

.l-header.is-scrolled {
  background-color: transparent;
  box-shadow: none;
}

.l-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

/* Logo */
.l-header__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  pointer-events: auto;
}

.l-header__logo-img {
  height: auto;
  width: 160px;
}

.l-header__logo-text {
  font-family: var(--font-family-en);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.l-header__logo-text small {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.2em;
}

.l-header.is-scrolled .l-header__logo-text {
  color: var(--color-white);
}

/* Hamburger Menu Button - オレンジ円形 + 白枠 + スクロール追従 */
.l-header__menu-btn {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: var(--z-modal-backdrop);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: var(--color-primary); /* #fb9516 オレンジ */
  border: 3px solid #fff;
  border-radius: var(--radius-full); /* 円形 */
  gap: 5px;
  pointer-events: auto;
  transition: transform var(--duration-fast), opacity var(--duration-fast);
}

.l-header__menu-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.l-header__menu-line {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  transition:
    transform var(--duration-fast) var(--easing-default),
    opacity var(--duration-fast) var(--easing-default);
}

/* Hamburger open state — メニュー開き中はボタン非表示 */
.l-header__menu-btn.is-open {
  opacity: 0;
  pointer-events: none;
}

/* Navigation (Desktop) - Hidden, only hamburger */
.l-header__nav {
  display: none;
}

.l-header__nav-list {
  display: flex;
  gap: var(--spacing-lg);
}

.l-header__nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  transition: color var(--duration-fast);
}

.l-header.is-scrolled .l-header__nav-link {
  color: var(--color-text);
}

.l-header__nav-link:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Mobile Menu Overlay
   -------------------------------------------------------------------------- */

.l-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background-color: transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--easing-default),
    visibility var(--duration-normal) var(--easing-default);
}

.l-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.l-mobile-menu {
  position: fixed;
  top: 20px;
  right: 0;
  width: min(420px, 85vw);
  max-height: 85vh;
  z-index: var(--z-modal);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 56px 40px 32px;
  border-radius: 16px 0 0 16px;
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0, 1), visibility 0.35s ease;
}

.l-mobile-menu.is-open {
  visibility: visible;
  transform: translateX(0);
}

/* Close Button — topview4-70.svg使用 */
.l-mobile-menu__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform var(--duration-fast), opacity var(--duration-fast);
}

.l-mobile-menu__close-icon {
  width: 100%;
  height: 100%;
}

.l-mobile-menu__close:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.l-mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.l-mobile-menu__link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  font-family: var(--font-family-en);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f7931e;
  padding: 12px 0;
  transition: color var(--duration-fast);
}

.l-mobile-menu__link:hover {
  color: #e07a00;
}

.l-mobile-menu__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 10px;
  background-color: rgba(158, 247, 221, 0.78);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.22, 0.68, 0, 1);
}

.l-mobile-menu__link:hover::after {
  transform: scaleX(1);
}

.l-mobile-menu__link--active {
  /* アクティブ状態 — マーカーはホバー時のみ表示 */
}

.l-mobile-menu__link--external {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.l-mobile-menu__external-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.l-mobile-menu__external-icon svg {
  width: 100%;
  height: 100%;
}

/* Policy Buttons */
.l-mobile-menu__policy {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: var(--spacing-lg);
}

.l-mobile-menu__policy-btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-primary);
  padding: 8px 16px;
  border-radius: 20px;
  transition: opacity var(--duration-fast);
}

.l-mobile-menu__policy-btn:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.l-footer {
  position: relative;
  --footer-curve-depth: 340;
  --footer-curve-steepness: 0;
  background-color: var(--color-primary);
  margin-top: -120px;
  z-index: 2;
  padding: 400px 0 46px;
  color: var(--color-white);
  overflow: hidden;
}

.l-footer__inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(26px, 3vw, 44px);
  position: relative;
  z-index: 2;
}

.l-footer__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.l-footer__island {
  position: absolute;
  height: auto;
}

.l-footer__island--left {
  left: 28px;
  top: 160px;
  width: clamp(170px, 16vw, 220px);
}

.l-footer__island--right {
  right: 16px;
  top: 100px;
  width: clamp(272px, 25vw, 345px);
}

/* SVG Curve — smooth U-shape via JS bezier (steepness: 0 = vertical tangent at edges) */
.l-footer__curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 0;
}

.l-footer__curve-path {
  fill: #ffffff;
}

/* Footer Logo */
.l-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.l-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.l-footer__logo-img {
  width: 180px;
  height: 43px;
  filter: brightness(0) invert(1);
}

.l-footer__company-name {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1.35;
}

.l-footer__company-name-en {
  font-family: var(--font-family-en);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
}

/* Footer Info */
.l-footer__info {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
}

.l-footer__info p {
  margin-bottom: 2px;
}

/* Footer Navigation */
.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}

.l-footer__nav-title {
  position: relative;
  padding-left: 14px;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.l-footer__nav-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background-color: var(--color-white);
  transform: translateY(-50%);
}

.l-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.l-footer__nav-list li {
  position: relative;
  padding-left: 13px;
}

.l-footer__nav-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background-color: var(--color-white);
  border-radius: 50%;
  transform: translateY(-50%);
}

.l-footer__nav-link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.35;
  transition: color var(--duration-fast);
}

.l-footer__nav-link:hover {
  color: var(--color-white);
}

/* Footer Bottom */
.l-footer__bottom {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.l-footer__policy-links {
  display: flex;
  gap: 20px;
}

.l-footer__policy-link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  transition: color var(--duration-fast);
}

.l-footer__policy-link:hover {
  color: var(--color-white);
}

.l-footer__copyright {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 1100px) {
  .l-footer {
    --footer-curve-depth: 250;
    --footer-curve-steepness: 0;
    margin-top: -100px;
    padding: 300px 0 42px;
  }

  .l-footer__island--left {
    top: 140px;
    width: clamp(146px, 17vw, 192px);
  }

  .l-footer__island--right {
    top: 90px;
    right: 6px;
    width: clamp(226px, 29vw, 292px);
  }

  .l-footer__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .l-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
  }
}

@media (max-width: 767px) {
  .l-footer {
    --footer-curve-depth: 160;
    --footer-curve-steepness: 0;
    margin-top: -60px;
    padding: 200px 0 34px;
  }

  .l-footer__decor {
    display: none;
  }

  .l-footer__logo-img {
    width: 140px;
    height: auto;
  }

  .l-footer__company-name {
    font-size: 16px;
  }

  .l-footer__company-name-en {
    font-size: 12px;
  }

  .l-footer__info {
    font-size: 12px;
  }

  .l-footer__nav {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .l-footer__nav-title {
    font-size: 13px;
    padding-bottom: 5px;
    margin-bottom: 8px;
  }

  .l-footer__nav-link {
    font-size: 12px;
  }

  .l-footer__bottom {
    margin-top: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .l-footer__policy-link,
  .l-footer__copyright {
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   Section Backgrounds — Newsページと統一したミントグラデーション
   白 → 薄いセージ → ミント（MISSIONピーク） → セージ → 白
   -------------------------------------------------------------------------- */
.p-our-service {
  background: linear-gradient(180deg, #eef6f4 0%, #f0f7f5 100%) !important;
}

.p-associations {
  background: linear-gradient(180deg, #f0f7f5 0%, #edf5f3 100%) !important;
}

.p-philosophy--purpose {
  background: linear-gradient(180deg, #edf5f3 0%, #e8f1ef 100%) !important;
}

.p-philosophy--mission {
  background: linear-gradient(180deg, #e8f1ef 0%, #e3ede9 100%) !important;
}

.p-philosophy--vision {
  background: linear-gradient(180deg, #e3ede9 0%, #e8f1ef 100%) !important;
}

.p-core-values {
  background-color: #e8f1ef !important;
}

.p-service-company {
  background: linear-gradient(180deg, #e8f1ef 0%, #f2f8f7 100%) !important;
}

.p-cta-grid {
  background: linear-gradient(180deg, #f2f8f7 0%, #ffffff 45%) !important;
}

/* ==========================================================================
   Responsive Overrides — layout.css 上書きルールのレスポンシブ対応
   ========================================================================== */

/* --- 1200px: タブレット大 --- */
@media (max-width: 1200px) {
  .p-service-company__arrow {
    width: 44px !important;
  }
  .p-cta-grid__arrow {
    width: 44px;
  }

  /* フッターナビ: sections.cssの .l-footer .l-footer__nav (3列固定) を上書き → 2列 */
  .l-footer .l-footer__nav {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- 900px: タブレット小 --- */
@media (max-width: 900px) {
  /* サービス・CTA矢印 */
  .p-service-company__arrow {
    width: 38px !important;
  }
  .p-cta-grid__arrow {
    width: 38px;
  }

  /* MISSION: シングルカラム時はイラスト位置リセット */
  .p-philosophy--mission .p-philosophy__illustration img {
    transform: translateX(0) !important;
  }

/* MISSION: reverse layoutの負マージンをリセット（layout.cssはsections.cssより先に読まれるため!important必要） */
  .p-philosophy--reverse .p-philosophy__content {
    margin-left: 0 !important;
  }

  /* PURPOSE: 同様に負マージンリセット */
  .p-philosophy:not(.p-philosophy--reverse) .p-philosophy__content {
    margin-right: 0 !important;
  }

  /* イラスト: min-widthがmax-widthを上書きするのを防ぐ */
  .p-philosophy--purpose .p-philosophy__illustration img,
  .p-philosophy--mission .p-philosophy__illustration img,
  .p-philosophy--vision .p-philosophy__illustration img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: min(94vw, 620px);
    transform: none !important;
  }

  /* セクション横はみ出し防止 */
  .p-philosophy {
    overflow: hidden;
  }

  /* META LAND: 他サービスと比率を合わせて縮小 */
  .p-service-company__item#service-5 .p-service-company__logo {
    height: clamp(14px, 2.4vw, 20px) !important;
  }
}

/* --- 767px: モバイル --- */
@media (max-width: 767px) {
  /* ロゴ: モバイルでは縮小してピンとの重なりを防ぐ */
  .l-header__logo-img {
    width: 140px;
  }

  /* ハンバーガーボタン縮小 + ロゴ中央揃え */
  .l-header__menu-btn {
    width: 44px;
    height: 44px;
    top: 21px;
    right: 16px;
  }

  .l-header__menu-line {
    width: 18px;
    height: 2px;
  }

  /* モバイルメニュー: 画面上端にフィット */
  .l-mobile-menu {
    top: 0;
    border-radius: 0;
    max-height: 100vh;
  }

  /* キャッチコピー: モバイルではcanvasの比率に合わせて自然に縮小 */
  .p-hero__text-img {
    height: min(5.833vw, 84px) !important;
  }

  /* ピン1: ロゴと被るため左下にずらす（赤枠指示位置） */
  .p-hero__pin-wrap--1 {
    left: 12% !important;
    top: 30% !important;
  }

  /* フッターナビ: モバイルでは1列に */
  .l-footer .l-footer__nav {
    grid-template-columns: 1fr !important;
  }
}

/* --- 620px: モバイル小 --- */
@media (max-width: 620px) {
  .p-service-company__arrow {
    width: 28px !important;
  }
  .p-cta-grid__arrow {
    width: 28px;
  }

  .p-service-company__item#service-5 .p-service-company__logo {
    height: clamp(13px, 3.5vw, 17px) !important;
  }
}

/* Arrow link wrapper - inherit arrow positioning in grid */
.p-service-company__arrow-link {
  justify-self: end;
  align-self: center;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
}
}

@layer base{

/* ==========================================================================
   Components - STELLA HOLDINGS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  transition:
    background-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default);
}

.c-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.c-btn--primary:hover {
  background-color: var(--color-secondary);
}

.c-btn--secondary {
  background-color: var(--color-white);
  color: var(--color-text);
  border: 2px solid var(--color-text);
}

.c-btn--secondary:hover {
  background-color: var(--color-text);
  color: var(--color-white);
}

.c-btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.c-btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.c-btn__icon {
  width: 20px;
  height: 20px;
}

.c-btn__arrow {
  transition: transform var(--duration-fast) var(--easing-default);
}

.c-btn:hover .c-btn__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.c-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
}

.c-card--bordered {
  border: 1px solid var(--color-bg-light);
  box-shadow: none;
}

.c-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-md);
}

.c-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}

.c-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* --------------------------------------------------------------------------
   Section Title
   -------------------------------------------------------------------------- */

.c-section-title {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.c-section-title__en {
  display: block;
  font-family: var(--font-family-en);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: 0.05em;
  line-height: 1;
}

.c-section-title__ja {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: var(--spacing-sm);
}

.c-section-title__img {
  max-width: none;
  height: auto;
}

/* Variation: Left aligned */
.c-section-title--left {
  text-align: left;
}

/* Variation: With line */
.c-section-title--line .c-section-title__en::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  margin-top: var(--spacing-md);
}

.c-section-title--line.c-section-title--left .c-section-title__en::after {
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Service Logo
   -------------------------------------------------------------------------- */

.c-service-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: center;
}

.c-service-logo__img {
  width: 80px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}

.c-service-logo__name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.c-service-logo__name-en {
  font-family: var(--font-family-en);
  font-size: 10px;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* SVG logo - larger */
.c-service-logo__img {
  width: auto;
  height: auto;
  max-height: none;
}

/* --------------------------------------------------------------------------
   Pin (Map Marker)
   -------------------------------------------------------------------------- */

.c-pin {
  position: absolute;
  cursor: pointer;
  z-index: 10;
}

.c-pin__icon {
  width: 40px;
  height: 50px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.c-pin__label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-fast) var(--easing-default),
    visibility var(--duration-fast) var(--easing-default);
}

.c-pin:hover .c-pin__label {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Pin Tooltip (Speech Bubble / 吹き出し)
   -------------------------------------------------------------------------- */

.p-hero__pin-wrap {
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.p-hero__pin-wrap .p-hero__pin {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.p-hero__pin-wrap:hover .p-hero__pin {
  transform: scale(1.15);
}

.p-hero__tooltip {
  position: absolute;
  top: 20%;
  left: calc(100% + 16px);
  width: max(220px, 18vw);
  max-width: 300px;
  background-color: var(--color-white);
  border: 2px solid #f7931e;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* 吹き出しの三角矢印（左向き：ピンを指す） */
.p-hero__tooltip::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 100%;
  border: 8px solid transparent;
  border-right-color: #f7931e;
}

/* ホバーで表示 */
.p-hero__pin-wrap:hover .p-hero__tooltip,
.p-hero__pin-wrap.is-active .p-hero__tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* タイトル帯（オレンジ背景） */
.p-hero__tooltip-title {
  display: block;
  background-color: #f7931e;
  color: var(--color-white);
  font-family: var(--font-family-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  line-height: 1.3;
}

/* テキスト本文 */
.p-hero__tooltip-text {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  padding: 10px 14px 12px;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .p-hero__tooltip {
    width: max(180px, 22vw);
    max-width: 240px;
  }

  .p-hero__tooltip-title {
    font-size: 11px;
    padding: 6px 10px;
  }

  .p-hero__tooltip-text {
    font-size: 10px;
    padding: 8px 10px 10px;
  }
}

@media (max-width: 620px) {
  .p-hero__tooltip {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Core Value Card
   -------------------------------------------------------------------------- */

.c-value-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.c-value-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.c-value-card__content {
  flex: 1;
}

.c-value-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
}

.c-value-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* SVG based value card */
.c-value-card--svg {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.c-value-card__svg {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   CTA Box
   -------------------------------------------------------------------------- */

.c-cta-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl) var(--spacing-xl);
  background-color: var(--color-bg-light);
  border-radius: var(--radius-lg);
  text-align: center;
  overflow: hidden;
  min-height: 200px;
}

.c-cta-box__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.c-cta-box__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-cta-box__content {
  position: relative;
  z-index: 1;
}

.c-cta-box__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-xs);
}

.c-cta-box__title {
  font-family: var(--font-family-en);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
}

.c-cta-box__title-img {
  max-width: 200px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Tag / Badge
   -------------------------------------------------------------------------- */

.c-tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-light);
  color: var(--color-text);
}

.c-tag--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   News Item
   -------------------------------------------------------------------------- */

.c-news-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-bg-light);
}

.c-news-item__date {
  font-family: var(--font-family-en);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  flex-shrink: 0;
}

.c-news-item__title {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.c-news-item__title:hover {
  color: var(--color-primary);
}
}

@layer base{

/* ==========================================================================
   Sections - STELLA HOLDINGS Top Page
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Full-page Gradient Background
   --------------------------------------------------------------------------
   ヒーロー以降のセクション背景を1本のグラデーションで統一。
   個別セクションの background は transparent にして、
   main 要素の gradient が透けて見える構成。
   #ffffff（白）→ #edf5f2（薄い緑）のなめらかな遷移。
   -------------------------------------------------------------------------- */

/* フロントページ: bodyに水色背景（ヒーローと同じ色で隙間を防ぐ） */
body.p-home {
  background: var(--color-bg-sea); /* #90dedd */
}

.p-home main {
  border-bottom-left-radius: 50% clamp(300px, 40vw, 580px);
  border-bottom-right-radius: 50% clamp(300px, 40vw, 580px);
}

/* --------------------------------------------------------------------------
   1. Hero Section - Layer Structure
   --------------------------------------------------------------------------
   z-index 0  : 背景色 (#90dedd)
   z-index 1  : 雲（個別配置、10個）
   z-index 2  : 気球（2個、左右）
   z-index 3  : メイン島イラスト（左右2パーツ合成）
   z-index 4  : 飛行機・船（3個）
   z-index 5  : ピン（6個、建物上）
   z-index 10 : UI（ロゴ、ハンバーガー、キャッチコピー）
   -------------------------------------------------------------------------- */

.p-hero {
  position: relative;
  width: 100%;
  background-color: var(--color-bg-sea); /* #90dedd */
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.p-hero__canvas {
  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 824;
  height: calc(100vw * 824 / 1440);
  max-height: 824px;
  --hero-canvas-w: min(100vw, 1440px);
  --hero-canvas-h: min(calc(100vw * 824 / 1440), 824px);
}

/* --------------------------------------------------------------------------
   1.1 Islands - メイン島イラスト (z-index: 3)
   3つの島が橋でつながった構成
   - topview-10: 上（高層ビル・住宅）
   - topview-20: 左下（工場・電車・観覧車）
   - topview-19: 右下（スタジアム・ホテル・建設現場）
   -------------------------------------------------------------------------- */
.p-hero__islands {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.p-hero__island {
  position: absolute;
}

/* 右上の島（高層ビル・住宅エリア）- topview-3-61 */
.p-hero__island--top {
  width: 57.167%;
  left: 43.100%;
  top: -16.100%;
}

/* 左上の島（駅・電車・観覧車・茶色ビル）- topview-20 */
.p-hero__island--left {
  width: 55.694%;
  left: 2.292%;
  top: 14.806%;
}

/* 右下の島（スタジアム・ホテル・メリーゴーラウンド・建設現場）- topview-19 */
.p-hero__island--right {
  width: 57.639%;
  left: 32.083%;
  top: 35.558%;
}

/* --------------------------------------------------------------------------
   1.2 Clouds - 雲（個別配置）(z-index: 1)
   -------------------------------------------------------------------------- */
.p-hero__cloud {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* 雲1 */
.p-hero__cloud--1 {
  left: 6.472%;
  top: 15.777%;
  width: 2.847%;
}

/* 雲2 */
.p-hero__cloud--2 {
  left: 17.639%;
  top: 10.437%;
  width: 4.792%;
}

/* 雲3 */
.p-hero__cloud--3 {
  left: 23.611%;
  top: 3.034%;
  width: 4.861%;
}

/* 雲4 */
.p-hero__cloud--4 {
  left: 31.389%;
  top: 4.126%;
  width: 4.722%;
}

/* 雲5 */
.p-hero__cloud--5 {
  left: 37.500%;
  top: 8.374%;
  width: 4.861%;
}

/* 雲6 */
.p-hero__cloud--6 {
  left: 43.264%;
  top: 4.733%;
  width: 3.889%;
}

/* 雲7 */
.p-hero__cloud--7 {
  left: 48.472%;
  top: 0.000%;
  width: 4.097%;
}

/* 雲8 */
.p-hero__cloud--8 {
  left: 81.528%;
  top: 0.000%;
  width: 4.236%;
}

/* 雲9 */
.p-hero__cloud--9 {
  left: 87.361%;
  top: 5.340%;
  width: 3.889%;
}

/* 雲10 */
.p-hero__cloud--10 {
  left: 92.361%;
  top: 10.194%;
  width: 4.097%;
}

/* --------------------------------------------------------------------------
   1.3 Balloons - 気球 (z-index: 2)
   -------------------------------------------------------------------------- */
.p-hero__balloon {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

/* 左気球 */
.p-hero__balloon--left {
  left: 12.778%;
  top: 15.170%;
  width: 4.861%;
}

/* 右気球（より大きい） */
.p-hero__balloon--right {
  left: 69.778%;
  top: 1.000%;
  width: 6.25%;
}

/* --------------------------------------------------------------------------
   1.4 Planes & Ship - 飛行機・船 (z-index: 4)
   -------------------------------------------------------------------------- */
.p-hero__plane {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.p-hero__ship {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

@keyframes hero-plane-a-loop {
  0% {
    transform: translate(0, 0);
  }
  70%,
  100% {
    transform: translate(
      calc(var(--hero-canvas-w) * -1.28),
      calc(var(--hero-canvas-h) * 0.96)
    );
  }
}

/* 飛行機A: 右上の画面外から左下の画面外へループ */
.p-hero__plane--a {
  left: 101.500%;
  top: -7.500%;
  width: 4.306%;
  animation: hero-plane-a-loop 8s linear infinite;
  will-change: transform;
}

/* 飛行機B: 右下 */
.p-hero__plane--b {
  left: 92.083%;
  top: 53.762%;
  width: 4.514%;
}

/* コンテナ船: 右下 */
.p-hero__ship--a {
  left: 85.000%;
  top: 67.961%;
  width: 7.083%;
}

/* --------------------------------------------------------------------------
   1.5 Pins - ピン (z-index: 5)
   建物の上に正確に配置
   -------------------------------------------------------------------------- */
/* ピン位置は .p-hero__pin-wrap--N で制御（components.css にホバー/ツールチップCSS） */

/* ピン1: 左上 茶色ビル上 — metaland */
.p-hero__pin-wrap--1 {
  left: 23.472%;
  top: 9.587%;
  width: 5.278%;
}

/* ピン2: 左 小屋/家 — Stella R&D */
.p-hero__pin-wrap--2 {
  left: 22.917%;
  top: 39.806%;
  width: 5.278%;
}

/* ピン3: 中央 メリーゴーラウンド — Stella SDGs */
.p-hero__pin-wrap--3 {
  left: 36.528%;
  top: 28.034%;
  width: 5.278%;
}

/* ピン4: 中央 ホテル/白ビル — Stella Talent Partners */
.p-hero__pin-wrap--4 {
  left: 58.472%;
  top: 64.563%;
  width: 5.278%;
}

/* ピン5: 右上 緑の建物（駅） — Stella Legal Office */
.p-hero__pin-wrap--5 {
  left: 76.750%;
  top: 4.369%;
  width: 5.278%;
}

/* ピン6: 右上 高層ビル — Stella Marketing House */
.p-hero__pin-wrap--6 {
  left: 76.181%;
  top: 48.301%;
  width: 5.278%;
}

/* 右端のピン（5,6）はツールチップを左側に表示 */
.p-hero__pin-wrap--5 .p-hero__tooltip,
.p-hero__pin-wrap--6 .p-hero__tooltip {
  left: auto;
  right: calc(100% + 16px);
}

.p-hero__pin-wrap--5 .p-hero__tooltip::after,
.p-hero__pin-wrap--6 .p-hero__tooltip::after {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #f7931e;
}

/* --------------------------------------------------------------------------
   1.6 Title - キャッチコピー (z-index: 10)
   -------------------------------------------------------------------------- */
.p-hero__title-wrap {
  position: absolute;
  left: 0;
  bottom: 8%;
  width: 100%;
  padding-left: 4.167%;
  z-index: 10;
}

.p-hero__title {
  display: block;
}

/* PC catchphrase wrapper — 2行版 */
.p-hero__catchphrase-wrap {
  position: relative;
}

/* Each line container */
.p-hero__line {
  position: relative;
  display: block;
  border-radius: 6px 8px 5px 7px;
  padding: 2px 6px;
}

.p-hero__line-svg {
  position: relative;
  z-index: 1;           /* テキストをマーカーの上に */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Yellow marker behind catchcopy — ourservice方式 ::before */
.p-hero__line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 8%;
  width: calc(100% + 8px);
  height: 80%;
  transform-origin: left center;
  transform: scaleX(0) skewX(-4deg);
  background-color: var(--color-marker-yellow);
  border-radius: 6px 8px 5px 7px;
  pointer-events: none;
  z-index: 0;
}

.p-hero__line::after {
  content: none;
}

/* Line widths + staggered marker swipe (PC 2行: しゅっしゅっ) */
.p-hero__line--1 {
  width: min(43.4vw, 630px);
}
.p-hero__line--1::before {
  animation: hero-marker-swipe 0.37s cubic-bezier(0.18, 0.75, 0.22, 1) 0.11s forwards;
}
.p-hero__line--2 {
  width: min(73.6vw, 1064px);
  margin-top: 1.5%;
}
.p-hero__line--2::before {
  animation: hero-marker-swipe 0.37s cubic-bezier(0.18, 0.75, 0.22, 1) 0.38s forwards;
}

/* --------------------------------------------------------------------------
   2. Our Service Section
   -------------------------------------------------------------------------- */

.p-our-service {
  padding: 46px 0 74px;
  background: transparent !important;
  text-align: center;
  margin-bottom: -1px;
}

.p-our-service__logos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 3.8vw, 55px);
  margin-top: 0;
  max-width: 1200px;
  margin-inline: auto;
}

.p-our-service .c-section-title {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 34px;
}

.p-our-service .c-section-title__img {
  display: block;
  margin-inline: auto;
  width: min(560px, 72vw);
}

.p-our-service .c-service-logo {
  flex: 0 0 196px;
  max-width: 196px;
}

.p-our-service .c-service-logo__img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   3. Member Associations Section
   -------------------------------------------------------------------------- */

.p-associations {
  padding: 26px 0 96px;
  background: transparent !important;
  text-align: center;
  margin-bottom: -1px;
}

.p-associations__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(24px, 3.9vw, 56px);
  margin-top: 0;
  max-width: 960px;
  margin-inline: auto;
}

.p-associations__item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: 14px;
  border: 1px solid #efefef;
  padding: 12px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  flex: 0 0 452px;
  max-width: 452px;
  min-height: 118px;
}

.p-associations__logo {
  display: block;
  width: min(412px, 100%);
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}

.p-associations .c-section-title__img {
  display: block;
  margin-inline: auto;
  width: min(690px, 84vw);
}

.p-associations .c-section-title__ja {
  font-size: 19px;
  font-weight: 900;
  color: #f4a23a;
  line-height: 1.1;
  margin-top: 8px;
  letter-spacing: 0.02em;
}

.p-associations .c-section-title {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 30px;
}

@media (max-width: 1200px) {
  .p-our-service__logos {
    max-width: 100%;
    gap: 24px;
  }

  .p-our-service .c-service-logo {
    flex: 1 1 18%;
    max-width: 196px;
  }

  .p-associations__list {
    max-width: 100%;
    gap: 24px;
  }

  .p-associations__item {
    flex: 1 1 calc(50% - 12px);
    max-width: none;
    min-height: 108px;
  }
}

@media (max-width: 767px) {
  .p-our-service {
    padding: 40px 0 56px;
  }

  .p-our-service .c-section-title__img {
    width: min(440px, 92vw);
  }

  .p-our-service .c-section-title {
    margin-bottom: 22px;
  }

  .p-our-service__logos {
    flex-wrap: wrap;
    gap: 14px;
  }

  .p-our-service .c-service-logo {
    flex: 0 1 calc(50% - 8px);
    max-width: 220px;
  }

  .p-associations {
    padding: 20px 0 64px;
  }

  .p-associations .c-section-title__img {
    width: min(540px, 94vw);
  }

  .p-associations .c-section-title__ja {
    font-size: 17px;
    margin-top: 6px;
  }

  .p-associations .c-section-title {
    margin-bottom: 18px;
  }

  .p-associations__list {
    flex-direction: column;
    gap: 16px;
  }

  .p-associations__item {
    flex: 1 1 auto;
    width: 100%;
    min-height: auto;
    padding: 10px 14px;
  }

  .p-associations__logo {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   4. Purpose / Mission / Vision Sections
   --------------------------------------------------------------------------
   1440px基準・デザインカンプ準拠
   -------------------------------------------------------------------------- */

.p-philosophy {
  position: relative;
  padding: 84px 0 143px;
  overflow: visible;
  margin-bottom: -1px;
}

.p-philosophy--purpose {
  background: transparent !important;
}

.p-philosophy--philosophy {
  background: transparent !important;
}

.p-philosophy--vision {
  background: transparent !important;
}

.p-philosophy--ourroots {
  background: transparent !important;
}

/* --- Grid Layout --- */
.p-philosophy__inner {
  display: grid;
  gap: clamp(18px, 2.6vw, 38px);
  align-items: start;
  grid-template-columns: 49.2% 50.8%;
}

.p-philosophy--reverse .p-philosophy__inner {
  grid-template-columns: 50.8% 49.2%;
  direction: rtl;
}

.p-philosophy--reverse .p-philosophy__inner > * {
  direction: ltr;
}

/* テキストを中央線より少し画像側へ重ねる（PC） */
.p-philosophy:not(.p-philosophy--reverse) .p-philosophy__content {
  margin-right: -96px;
}

.p-philosophy--reverse .p-philosophy__content {
  margin-left: -40px;
}

.p-philosophy--purpose .p-philosophy__content {
  margin-right: -108px;
}

/* PHILOSOPHY・OUR ROOTS（reverseレイアウト）: 右端揃え */
.p-philosophy--reverse .p-philosophy__label-img {
  margin-left: auto;
  margin-right: 0;
}

.p-philosophy--reverse .p-philosophy__title,
.p-philosophy--reverse .p-philosophy__text {
  text-align: right;
}

.p-philosophy--reverse .p-philosophy__title-line {
  white-space: normal;
}

.p-philosophy--vision .p-philosophy__content {
  margin-right: -112px;
}

/* --- Content Column ---
   54pxフォントで12文字(~650px)収まるように十分な幅を確保 */
.p-philosophy__content {
  max-width: 680px;
  position: relative;
  z-index: 2;
}

/* --- Section Title SVG ---
   高さ基準で統一（文字数による縦幅のバラつき解消）
   PC: 大胆な大きいサイズ維持、高さ120pxで統一
   SP: CORE VALUESの大きさに合わせる */
.p-philosophy__label-img {
  display: block;
  height: clamp(80px, 8.33vw, 120px);
  width: auto;
  max-width: 100%;
  margin-bottom: 59px;
}

/* --- Headline ---
   デザインカンプ実測: ヘッドライン→本文間隔 PURPOSE=50px, MISSION=71px, VISION=1px
   タイトル色: デザインカンプ実測 rgb(248,150,25) ≈ #fb9516 */
.p-philosophy__title {
  font-size: clamp(38px, 3.8vw, 54px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.01em;
  margin-bottom: 50px;
  color: #fb9516;
  text-align: left;
}

/* --- Title Line (prevents orphaned character wrapping) --- */
.p-philosophy__title-line {
  display: block;
  white-space: nowrap;
}

/* --- Body Text --- */
.p-philosophy__text {
  font-size: clamp(18px, 1.69vw, 24px);
  font-weight: 700;
  color: #333333;
  line-height: 1.66;
  letter-spacing: 0.01em;
  text-align: left;
}

/* ヘッドライン→本文間隔: 全セクション共通 50px (レスポンシブは @media で clamp) */

/* セクション別padding（デザインカンプ準拠 + イラストサイズ調整分） */
.p-philosophy--philosophy {
  padding-top: 61px;
  padding-bottom: 140px;
}

.p-philosophy--vision {
  padding-top: 80px;
  padding-bottom: 190px;
}

/* MISSION: AI実測ではタイトルと本文のx差はわずか4pt */
.p-philosophy--philosophy .p-philosophy__text {
  padding-left: 0;
}

/* --- Illustration Column --- */
.p-philosophy__illustration {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: visible;
}

.p-philosophy--reverse .p-philosophy__illustration {
  justify-content: flex-start;
}

.p-philosophy__illustration img {
  max-width: none;
  height: auto;
  flex-shrink: 0;
  max-height: clamp(300px, 40vw, 430px);
  width: auto;
}

.p-philosophy--purpose .p-philosophy__illustration img {
  transform: translateX(-40px);
  margin-top: clamp(80px, 9.3vw, 134px);
}

.p-philosophy--philosophy .p-philosophy__illustration img {
  transform: translateX(0);
  margin-top: clamp(16px, 2.2vw, 32px);
}

.p-philosophy--vision .p-philosophy__illustration img {
  margin-top: clamp(100px, 12.5vw, 180px);
}

.p-philosophy--ourroots .p-philosophy__illustration img {
  transform: translateX(0);
  margin-top: clamp(40px, 5vw, 72px);
}

.p-philosophy--ourroots .p-philosophy__content {
  margin-left: -40px;
}

/* --- Label Text (SVG未作成タイトルの仮表示) --- */
.p-philosophy__label-text {
  display: block;
  font-size: clamp(80px, 8.33vw, 120px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 59px;
  color: #fbb03b;
  -webkit-text-stroke: 2px #fb9516;
  paint-order: stroke fill;
  font-family: "Hiragino Kaku Gothic StdN", "HiraKakuStd-W8", "Hiragino Sans", sans-serif;
  letter-spacing: 0.02em;
}

@media (max-width: 1200px) {
  .p-philosophy {
    padding: 64px 0 56px;
  }

  .p-philosophy:not(.p-philosophy--reverse) .p-philosophy__content {
    margin-right: -64px;
  }

  .p-philosophy--reverse .p-philosophy__content {
    margin-left: -24px;
  }

  .p-philosophy--purpose .p-philosophy__content {
    margin-right: -72px;
  }

  .p-philosophy--vision .p-philosophy__content {
    margin-right: -76px;
  }

  .p-philosophy--ourroots .p-philosophy__content {
    margin-left: -28px;
  }

  .p-philosophy__label-text {
    font-size: clamp(64px, 7.5vw, 100px);
    margin-bottom: 40px;
  }

  .p-philosophy__inner {
    gap: 24px;
  }

  .p-philosophy__title {
    font-size: clamp(34px, 3.6vw, 46px);
  }
}

@media (max-width: 900px) {
  .p-philosophy {
    padding: 56px 0 52px;
  }

  .p-philosophy__inner,
  .p-philosophy--reverse .p-philosophy__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    direction: ltr;
  }

  .p-philosophy__content {
    max-width: 88%;
    margin: 0 auto;
  }

  /* reverse（PHILOSOPHY・OUR ROOTS）もSPでは左揃え + 中央配置 */
  .p-philosophy--reverse .p-philosophy__title,
  .p-philosophy--reverse .p-philosophy__text {
    text-align: left;
  }

  .p-philosophy--reverse .p-philosophy__label-img {
    margin-left: 0;
    margin-right: auto;
  }

  .p-philosophy__title {
    font-size: clamp(26px, 7vw, 36px);
    margin-bottom: clamp(24px, 5vw, 40px);
  }

  .p-philosophy__title-line {
    white-space: normal;
  }

  .p-philosophy__text {
    font-size: 16px;
    line-height: 1.7;
  }

  .p-philosophy--philosophy .p-philosophy__text {
    padding-left: 0;
  }

  .p-philosophy__illustration,
  .p-philosophy--reverse .p-philosophy__illustration {
    justify-content: center;
  }

  .p-philosophy__label-img {
    height: clamp(48px, 15.3vw, 72px);
    width: auto;
    max-width: 94vw;
    margin-bottom: clamp(24px, 5vw, 40px);
  }

  .p-philosophy__label-text {
    font-size: clamp(40px, 10vw, 64px);
    margin-bottom: clamp(24px, 5vw, 40px);
  }

  .p-philosophy__illustration img {
    max-width: min(94vw, 620px);
  }

  .p-philosophy--ourroots .p-philosophy__content {
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   5. Core Values Section
   -------------------------------------------------------------------------- */

.p-core-values {
  padding: 56px 0 104px;
  background: transparent !important;
  text-align: center;
}

.p-core-values .c-section-title {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 38px;
}

.p-core-values .c-section-title__img {
  display: block;
  margin-inline: auto;
  width: min(1180px, 88vw);
  height: auto;
  filter: contrast(1.06) saturate(1.06);
}

/* --- Accordion Grid (2 columns) --- */
.p-core-values__accordion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3.33vw, 48px) clamp(16px, 1.67vw, 24px);
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
  align-items: start;
}

/* --- Accordion Card --- */
.p-cv-card {
  background: #ffffff;
  border-radius: clamp(12px, 1.11vw, 16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.p-cv-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* 5th card: left column only */
.p-cv-card:nth-child(5) {
  grid-column: 1;
}

/* --- Card Header (button) --- */
.p-cv-card__header {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.25vw, 18px);
  width: 100%;
  padding: clamp(44px, 3.47vw, 50px) clamp(16px, 1.39vw, 20px) clamp(44px, 3.47vw, 50px) clamp(20px, 2.5vw, 36px);
  border: none;
  background: none;
  cursor: pointer;
}

.p-cv-card__num {
  flex-shrink: 0;
  font-size: clamp(48px, 4.5vw, 64px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2.5px #fbb03b;
  paint-order: stroke fill;
  letter-spacing: -0.02em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.p-cv-card__title {
  flex: 1;
  min-width: 0;
  font-size: clamp(16px, 2.53vw, 26px);
  font-weight: 900;
  color: #fb9516;
  line-height: 1.55;
  text-align: center;
}



.p-cv-card__chevron {
  flex-shrink: 0;
  width: clamp(32px, 2.5vw, 36px);
  height: clamp(32px, 2.5vw, 36px);
  transition: transform 0.3s ease;
}

/* Chevron rotates when open */
.p-cv-card.is-open .p-cv-card__chevron {
  transform: rotate(180deg);
}

/* --- Card Body (collapsible) --- */
.p-cv-card__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.p-cv-card__body-inner {
  padding: clamp(16px, 1.39vw, 20px) clamp(16px, 2.08vw, 30px) clamp(24px, 2.22vw, 32px) clamp(56px, 7.36vw, 106px);
  border-top: 1px solid #e8e8e8;
  margin: 0 clamp(16px, 2.08vw, 30px);
}

.p-cv-card__body-inner p {
  font-size: clamp(14px, 1.11vw, 16px);
  color: #333333;
  line-height: 1.75;
  font-weight: 700;
  text-align: left;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .p-core-values {
    padding: 48px 0 88px;
  }

  .p-core-values .c-section-title__img {
    width: min(1020px, 88vw);
  }

  .p-core-values__accordion {
    max-width: 960px;
  }
}

@media (max-width: 1200px) {
  .p-core-values__accordion {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}

@media (max-width: 900px) {
  .p-core-values {
    padding: 40px 0 72px;
  }

  .p-core-values .c-section-title {
    margin-bottom: 24px;
  }

  .p-core-values .c-section-title__img {
    width: min(740px, 92vw);
  }
}

@media (max-width: 640px) {
  .p-core-values {
    padding: 32px 0 60px;
  }

  .p-core-values__accordion {
    max-width: 100%;
    padding-inline: 4px;
  }

  .p-cv-card__header {
    padding-left: 12px;
    padding-right: 10px;
    gap: 6px;
  }

  .p-cv-card__title {
    font-size: clamp(16px, 4.2vw, 22px);
  }

  .p-cv-card__num {
    font-size: 38px;
    -webkit-text-stroke-width: 2px;
  }

  .p-cv-card__chevron {
    width: 28px;
    height: 28px;
  }
}

/* --------------------------------------------------------------------------
   6. Service Company Section
   -------------------------------------------------------------------------- */

.p-service-company {
  padding: 96px 0 132px;
  background: transparent !important;
}

.p-service-company__list {
  margin: 0 auto;
  max-width: 1240px;
}

/* --- Grid: お手本1440px実寸ベース（再分析済み） ---
   テキスト開始: 737px (51.1%), 矢印中心: 1305px (90.6%)
   円形画像: 256px径, アイテム高さ: 395px (separator間)
   paddingTop: 85-102px, paddingBottom: 54px
   gapTitleToLogo: 22px, gapLogoToDesc: 46px
   画像・テキストは上揃え, 矢印のみ垂直中央
   ------------------------------------------------------------ */
.p-service-company__item {
  display: grid;
  grid-template-columns: clamp(180px, 17.8vw, 256px) 1fr clamp(30px, 2.64vw, 38px);
  -moz-column-gap: 0;
       column-gap: 0;
  align-items: start;
  padding: clamp(56px, 6.46vw, 93px) clamp(8px, 1.1vw, 16px) clamp(36px, 3.75vw, 54px) clamp(120px, 20.07vw, 289px);
  border-top: 1px solid #dce9e8;
}

.p-service-company__item:last-child {
  border-bottom: none;
}

.p-service-company__illustration {
  display: flex;
  justify-content: center;
}

.p-service-company__illustration img {
  width: 100%;
  height: auto;
}

/* テキストカラム: 画像との間隔92px分をpadding-leftで確保 */
.p-service-company__content {
  padding-left: clamp(24px, 6.39vw, 92px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* タイトル: AI実測 53.17pt→40px（max36pxに制限：「採用マーケティング / 運用代行」が549px幅に収まるように） */
.p-service-company__title {
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.02em;
  margin: 0 0 clamp(14px, 1.53vw, 22px);
  color: #4d4d4d;
  -webkit-text-stroke: 1.2px #4d4d4d;
  paint-order: stroke fill;
}

/* ロゴSVG: viewBox高さ37px基準、表示28px */
.p-service-company__logo {
  display: block;
  width: auto;
  height: clamp(18px, 1.94vw, 28px);
  max-width: 100%;
  margin-top: 0;
}

/* R&D: 横幅753pxと最長のため、少し低く表示してはみ出し防止 */
.p-service-company__item#service-2 .p-service-company__logo {
  height: clamp(16px, 1.74vw, 25px);
}

/* DEEPTECH LAB: viewBoxをコンテンツ域にトリミング済み（35.42px）、他と同値で表示OK */

/* 説明文: AI実測 21pt→16px */
.p-service-company__text {
  margin-top: clamp(28px, 3.19vw, 46px);
  font-size: clamp(13px, 1.11vw, 16px);
  color: #4d4d4d;
  line-height: 1.73;
  font-weight: 400;
}

/* 矢印ボタン: 実測38px, gridのalign-items:startなのでmarginで垂直中央に */
.p-service-company__arrow {
  justify-self: end;
  align-self: center;
  width: clamp(30px, 2.64vw, 38px);
  height: auto;
  margin-top: auto;
  margin-bottom: auto;
  filter: drop-shadow(0 2px 6px rgba(251, 149, 22, 0.22));
  transform-origin: center;
  transition: transform 0.3s ease;
}

.p-service-company__arrow:hover {
  transform: translateX(2px) scale(1.12);
}

.p-service-company .c-section-title__img {
  display: block;
  width: min(640px, 58vw);
  margin-left: 0;
}

.p-service-company .c-section-title {
  text-align: left;
  margin-bottom: 34px;
}

@media (max-width: 1200px) {
  .p-service-company {
    padding: 78px 0 108px;
  }

  .p-service-company .c-section-title__img {
    width: min(560px, 66vw);
  }

  .p-service-company__item {
    padding-left: clamp(60px, 10vw, 140px);
  }

  .p-service-company__content {
    padding-left: clamp(16px, 3.5vw, 48px);
  }
}

@media (max-width: 900px) {
  .p-service-company {
    padding: 62px 0 88px;
  }

  .p-service-company .c-section-title {
    margin-bottom: 22px;
  }

  .p-service-company .c-section-title__img {
    width: min(420px, 76vw);
  }

  .p-service-company__item {
    grid-template-columns: clamp(130px, 18vw, 180px) 1fr clamp(28px, 4vw, 36px);
    align-items: center;
    padding: 32px 12px 32px clamp(40px, 7vw, 80px);
  }

  .p-service-company__content {
    padding-left: clamp(14px, 2.5vw, 28px);
  }

  .p-service-company__arrow {
    width: clamp(28px, 4vw, 36px);
  }

  .p-service-company__title {
    font-size: clamp(19px, 3.2vw, 27px);
    margin: 0 0 8px;
    -webkit-text-stroke: 1px #4d4d4d;
  }

  .p-service-company__logo {
    height: clamp(14px, 2.4vw, 20px);
  }

  .p-service-company__item#service-2 .p-service-company__logo {
    height: clamp(14px, 2.55vw, 21px);
  }

  /* DEEPTECH LAB: viewBoxトリミング済みなので専用overrideなし */

  .p-service-company__text {
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.58;
  }
}

@media (max-width: 620px) {
  .p-service-company {
    padding: 56px 0 76px;
  }

  .p-service-company .c-section-title__img {
    width: min(360px, 84vw);
  }

  .p-service-company__item {
    grid-template-columns: clamp(90px, 22vw, 120px) 1fr clamp(24px, 5vw, 32px);
    align-items: center;
    padding: 24px 8px 24px clamp(16px, 4vw, 40px);
  }

  .p-service-company__content {
    padding-left: clamp(10px, 2vw, 16px);
  }

  .p-service-company__title {
    font-size: clamp(12px, 3.8vw, 24px);
    margin: 0 0 6px;
    -webkit-text-stroke: 0.8px #4d4d4d;
    white-space: nowrap;
  }

  .p-service-company__logo {
    height: clamp(13px, 3.5vw, 17px);
  }

  .p-service-company__item#service-2 .p-service-company__logo {
    height: clamp(13px, 3.7vw, 18px);
  }

  /* DEEPTECH LAB: viewBoxトリミング済みなので専用overrideなし */

  .p-service-company__text {
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.55;
  }

  .p-service-company__arrow {
    width: clamp(24px, 5vw, 32px);
  }
}

/* --------------------------------------------------------------------------
   7. CTA Grid Section
   -------------------------------------------------------------------------- */

.p-cta-grid {
  position: relative;
  padding: 38px 0 clamp(200px, 22vw, 320px);
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.6) 40px, #ffffff 100px);
}

.p-cta-grid__box {
  position: relative;
  z-index: 4;
  width: min(1120px, 92vw);
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
}

.p-cta-grid__cell {
  position: relative;
  padding: 24px 86px 22px 48px;
  text-align: left;
  min-height: 142px;
}

.p-cta-grid__cell:nth-child(1),
.p-cta-grid__cell:nth-child(2) {
  border-bottom: 1px solid #ededed;
}

.p-cta-grid__cell:nth-child(1),
.p-cta-grid__cell:nth-child(3) {
  border-right: 1px solid #ededed;
}

.p-cta-grid__label {
  display: block;
  font-size: clamp(14px, 1.23vw, 18px);
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 6px;
}

.p-cta-grid__title {
  display: block;
  width: auto;
  height: 42px;
  margin-bottom: 8px;
}

.p-cta-grid__text {
  font-size: clamp(14px, 1.25vw, 18px);
  color: #333333;
  line-height: 1.65;
  font-weight: 500;
}

.p-cta-grid__arrow {
  position: absolute;
  right: 26px;
  top: 50%;
  width: 36px;
  height: auto;
  transform: translateY(-50%) scale(1);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.p-cta-grid__cell:hover .p-cta-grid__arrow {
  transform: translateY(-50%) scale(1.18);
}

@media (max-width: 1200px) {
  .p-cta-grid {
    padding: 34px 0 clamp(160px, 18vw, 260px);
  }

  .p-cta-grid__box {
    width: min(1020px, 93vw);
  }

  .p-cta-grid__cell {
    padding: 20px 72px 18px 34px;
    min-height: 128px;
  }

  .p-cta-grid__title {
    height: 34px;
  }

  .p-cta-grid__text {
    font-size: 13px;
  }

  .p-cta-grid__arrow {
    width: 32px;
    right: 20px;
  }
}

@media (max-width: 900px) {
  .p-cta-grid__box {
    width: min(760px, 94vw);
    grid-template-columns: 1fr;
  }

  .p-cta-grid__cell {
    min-height: 106px;
    padding: 16px 64px 15px 20px;
  }

  .p-cta-grid__cell:nth-child(1),
  .p-cta-grid__cell:nth-child(2),
  .p-cta-grid__cell:nth-child(3) {
    border-right: 0;
    border-bottom: 1px solid #ededed;
  }

  .p-cta-grid__title {
    height: 28px;
    margin-bottom: 5px;
  }

  .p-cta-grid__text {
    font-size: 14px;
    line-height: 1.45;
  }

  .p-cta-grid__arrow {
    width: 30px;
    right: 16px;
  }
}

@media (max-width: 767px) {
  .p-cta-grid {
    padding: 28px 0 clamp(120px, 18vw, 180px);
    border-bottom-left-radius: 50% 280px;
    border-bottom-right-radius: 50% 280px;
  }
}

@media (max-width: 620px) {
  .p-cta-grid {
    padding: 28px 0 clamp(100px, 16vw, 160px);
    border-bottom-left-radius: 50% 200px;
    border-bottom-right-radius: 50% 200px;
  }

  .p-cta-grid__cell {
    padding: 14px 54px 13px 16px;
    min-height: 92px;
  }

  .p-cta-grid__label {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .p-cta-grid__title {
    height: 23px;
  }

  .p-cta-grid__text {
    font-size: 12px;
  }

  .p-cta-grid__arrow {
    width: 24px;
    right: 12px;
  }
}

/* --------------------------------------------------------------------------
   Footer overrides — ourservice方式に統一
   カーブ非表示 + 島はオレンジエリア内に配置
   -------------------------------------------------------------------------- */

/* カーブ非表示（アーチはコンテンツ側で処理） */
.l-footer .l-footer__curve {
  display: none;
}

.l-footer .l-footer__curve-path {
  fill: #edf5f2;
}

/* フッター上部パディング */
.l-footer {
  margin-top: -1px;
  padding-top: 380px;
}

/* Island positions — オレンジエリア内、テキストに被らない */
.l-footer .l-footer__island--left {
  top: 160px;
  left: 20px;
  width: clamp(180px, 18vw, 250px);
}

.l-footer .l-footer__island--right {
  top: 90px;
  right: 10px;
  width: clamp(290px, 27vw, 380px);
}

/* Nav grid: design shows cols at ~200px / 260px / 1fr */
.l-footer .l-footer__nav {
  grid-template-columns: 200px 270px 1fr;
}

/* Footer — tablet responsive */
@media (max-width: 1200px) {
  .l-footer {
    padding-top: 300px;
  }

  .l-footer .l-footer__island--left {
    top: 120px;
    width: clamp(140px, 16vw, 190px);
  }

  .l-footer .l-footer__island--right {
    top: 60px;
    width: clamp(230px, 26vw, 310px);
  }

  .l-footer .l-footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .l-footer {
    padding-top: 200px;
  }

  .l-footer .l-footer__island--left {
    top: 100px;
    width: clamp(120px, 20vw, 160px);
  }

  .l-footer .l-footer__island--right {
    top: 60px;
    width: clamp(200px, 36vw, 270px);
  }
}

@media (max-width: 480px) {
  .l-footer {
    padding-top: 140px;
  }
}

/* --------------------------------------------------------------------------
   Mobile Menu — compact override (SP 縦ギュッと / 767px以下のみ)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .l-mobile-menu {
    padding: 32px 24px 16px;
  }

  .l-mobile-menu__link {
    font-size: 14px;
    padding: 5px 0;
  }

  .l-mobile-menu__policy {
    padding-top: 16px;
    align-items: center;
    overflow: hidden;
  }

  .l-mobile-menu__policy-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 8px 10px;
  }
}
}

@layer base{

/* ==========================================================================
   Animations - STELLA HOLDINGS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fuwafuwa (ふわふわ浮遊)
   -------------------------------------------------------------------------- */

@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes fuwafuwa-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes fuwafuwa-small {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes fuwafuwa-reverse {
  0%, 100% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(0);
  }
}

.js-fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite;
}

.js-fuwafuwa--slow {
  animation: fuwafuwa-slow 4s ease-in-out infinite;
}

.js-fuwafuwa--small {
  animation: fuwafuwa-small 2.5s ease-in-out infinite;
}

.js-fuwafuwa--reverse {
  animation: fuwafuwa-reverse 3.5s ease-in-out infinite;
}

/* Delay variations */
.js-fuwafuwa--delay-1 { animation-delay: 0.3s; }
.js-fuwafuwa--delay-2 { animation-delay: 0.6s; }
.js-fuwafuwa--delay-3 { animation-delay: 0.9s; }
.js-fuwafuwa--delay-4 { animation-delay: 1.2s; }
.js-fuwafuwa--delay-5 { animation-delay: 1.5s; }

/* --------------------------------------------------------------------------
   2. Scroll Fade In
   -------------------------------------------------------------------------- */

.js-fadein {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--duration-slow) var(--easing-default),
    transform var(--duration-slow) var(--easing-default);
}

.js-fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* Variations */
.js-fadein--up {
  transform: translateY(50px);
}

.js-fadein--left {
  opacity: 0;
  transform: translateX(-30px);
}

.js-fadein--left.is-show {
  transform: translateX(0);
}

.js-fadein--right {
  opacity: 0;
  transform: translateX(30px);
}

.js-fadein--right.is-show {
  transform: translateX(0);
}

.js-fadein--scale {
  opacity: 0;
  transform: scale(0.9);
}

.js-fadein--scale.is-show {
  transform: scale(1);
}

/* Stagger delays */
.js-fadein[data-delay="1"] { transition-delay: 0.1s; }
.js-fadein[data-delay="2"] { transition-delay: 0.2s; }
.js-fadein[data-delay="3"] { transition-delay: 0.3s; }
.js-fadein[data-delay="4"] { transition-delay: 0.4s; }
.js-fadein[data-delay="5"] { transition-delay: 0.5s; }
.js-fadein[data-delay="6"] { transition-delay: 0.6s; }

/* --------------------------------------------------------------------------
   3. Marker Animation (キャッチコピーのマーカー)
   手書き風のハイライトが上段から順に左→右へ描画される
   -------------------------------------------------------------------------- */

@keyframes hero-marker-swipe {
  0% {
    transform: scaleX(0) skewX(-8deg);
    opacity: 0.88;
  }
  72% {
    transform: scaleX(1.03) skewX(-4deg);
    opacity: 0.96;
  }
  100% {
    transform: scaleX(1) skewX(0deg);
    opacity: 0.92;
  }
}

.p-hero__marker::before,
.p-hero__marker::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  transform-origin: left center;
  transform: scaleX(0) skewX(-8deg);
  background-color: var(--color-marker-yellow);
  pointer-events: none;
}

/* 1筆目 */
.p-hero__marker::before {
  top: 0;
  bottom: 0;
  border-radius: 8px 11px 7px 10px;
  animation: hero-marker-swipe 0.37s cubic-bezier(0.18, 0.75, 0.22, 1) forwards;
}

/* 2筆目（少しズラして重ねる） */
.p-hero__marker::after {
  top: 10%;
  bottom: 4%;
  left: 1.2%;
  right: 0.4%;
  border-radius: 6px 9px 8px 11px;
  opacity: 0.88;
  animation: hero-marker-swipe 0.32s cubic-bezier(0.22, 0.7, 0.28, 1) forwards;
}

/* 上段から順に描画 */
.p-hero__line--1 .p-hero__marker::before { animation-delay: 0.11s; }
.p-hero__line--1 .p-hero__marker::after { animation-delay: 0.17s; }
.p-hero__line--2 .p-hero__marker::before { animation-delay: 0.38s; }
.p-hero__line--2 .p-hero__marker::after { animation-delay: 0.44s; }
.p-hero__line--3 .p-hero__marker::before { animation-delay: 0.66s; }
.p-hero__line--3 .p-hero__marker::after { animation-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  .p-hero__marker::before,
  .p-hero__marker::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------------
   4. Pin Bounce (ピンのアニメーション)
   -------------------------------------------------------------------------- */

@keyframes pin-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pin-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.js-pin {
  animation: pin-bounce 2s ease-in-out infinite;
  transition: transform 0.3s var(--easing-bounce);
}

.js-pin:hover {
  animation-play-state: paused;
  transform: scale(1.2);
}

/* Stagger pin animations */
.js-pin--delay-1 { animation-delay: 0s; }
.js-pin--delay-2 { animation-delay: 0.2s; }
.js-pin--delay-3 { animation-delay: 0.4s; }
.js-pin--delay-4 { animation-delay: 0.6s; }
.js-pin--delay-5 { animation-delay: 0.8s; }

/* --------------------------------------------------------------------------
   5. Hover Effects
   -------------------------------------------------------------------------- */

/* Card hover */
.c-card {
  transition:
    transform var(--duration-fast) var(--easing-default),
    box-shadow var(--duration-fast) var(--easing-default);
}

.c-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Service logo hover */
.c-service-logo {
  transition: transform 0.15s ease;
}

.c-service-logo:hover {
  transform: translateY(-2px);
}

/* Button hover */
.c-btn {
  position: relative;
  overflow: hidden;
  transition:
    color var(--duration-fast) var(--easing-default),
    background-color var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default);
}

.c-btn:hover {
  transform: translateY(-2px);
}

.c-btn:active {
  transform: translateY(0);
}

/* Link underline animation */
.c-link {
  position: relative;
  display: inline-block;
}

.c-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--duration-fast) var(--easing-default);
}

.c-link:hover::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. Loading Animation
   -------------------------------------------------------------------------- */

@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.c-loading {
  animation: loading-spin 1s linear infinite;
}

.c-loading--pulse {
  animation: loading-pulse 1.5s ease-in-out infinite;
}
}

@layer base{

/* ==========================================================================
   SP Hero - Mobile Hero Section
   Smartphone-only vertical island layout with bubble labels
   ========================================================================== */

/* ---- Show/hide handled by u-hidden-sp / u-hidden-pc / u-hidden-tablet ---- */

/* Desktop: hide SP hero (redundant safety — u-hidden-pc/tablet handles it) */
.p-hero-sp { display: none; }

@media (max-width: 767px) {

  /* Force-hide PC hero (belt-and-suspenders with u-hidden-sp) */
  .p-hero { display: none !important; }

  /* ==============================
     Canvas
     ============================== */
  .p-hero-sp {
    display: block;
    position: relative;
    background: var(--color-bg-sea); /* #90dedd */
    overflow: hidden;
    padding-bottom: 20px;
  }

  .p-hero-sp__canvas {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 50px 0 0;   /* header height space */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ==============================
     Islands — vertical stack
     ============================== */
  .p-hero-sp__island-group {
    position: relative;
    width: 88%;
  }

  .p-hero-sp__island {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Island 1: high-rise — offset right */
  .p-hero-sp__island-group--1 {
    width: 135%;
    margin-right: 0%;
  }

  /* Island 2: station/train — offset left, overlap up */
  .p-hero-sp__island-group--2 {
    width: 125%;
    margin-left: -8%;
    margin-top: -37%;
  }

  /* Island 3: stadium/hotel — offset right */
  .p-hero-sp__island-group--3 {
    width: 139%;
    margin-left: 0;
    margin-right: 17%;
    margin-top: 6%;
  }

  /* ==============================
     Bubble Labels
     ============================== */
  .p-hero-sp__bubble {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 26px;
    background: #fb9516;
    border: 2px solid #fff;
    border-radius: 24px;  /* oval/pill shape */
    text-decoration: none;
    white-space: nowrap;
    z-index: 7;
    -webkit-tap-highlight-color: transparent;
  }

  .p-hero-sp__bubble:active {
    transform: scale(0.95);
  }

  /* Speech bubble triangle — white border (behind) */
  .p-hero-sp__bubble::before {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #fff;
  }

  /* Speech bubble triangle — orange fill (front) */
  .p-hero-sp__bubble::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fb9516;
  }

  /* Pin icon — hidden (replaced by speech bubble) */
  .p-hero-sp__pin {
    display: none;
  }

  .p-hero-sp__bubble-name {
    font-family: var(--font-family-ja);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.02em;
  }

  /* ---- Per-pin positions (on buildings) ---- */
  .p-hero-sp__pin--logistics  { top: 23%; right: 27%; }
  .p-hero-sp__pin--deeptech   { top: 61%; left: 36%; }
  .p-hero-sp__pin--about      { top: 24%; right: 30%; }
  .p-hero-sp__pin--rd         { top: 47%; left: 37%; }
  .p-hero-sp__pin--marketing  { top: 34%; right: 15%; }
  .p-hero-sp__pin--talent     { top: 62%; right: 48%; }

  /* ---- Per-bubble positions (near pins) ---- */

  /* Island 1: Logistic Partners */
  .p-hero-sp__bubble--logistics {
    top: 17%;
    right: 19%;
  }

  /* Island 1: DeepTech LAB */
  .p-hero-sp__bubble--deeptech {
    top: 56%;
    left: 30%;
  }

  /* Island 2: STELLA について */
  .p-hero-sp__bubble--about {
    top: 22%;
    right: 22%;
  }

  /* Island 2: Research & Development */
  .p-hero-sp__bubble--rd {
    top: 40%;
    left: 25%;
  }

  /* Island 3: Marketing House */
  .p-hero-sp__bubble--marketing {
    top: 32%;
    right: 22%;
  }

  /* Island 3: Talent Partners */
  .p-hero-sp__bubble--talent {
    top: 60%;
    right: 25%;
  }

  /* ==============================
     Catchphrase (2 lines, matching desktop)
     ============================== */
  .p-hero-sp__title-wrap {
    position: relative;
    z-index: 10;
    width: 92%;
    padding: 0;
    margin-top: -16%;
    margin-bottom: -6%;
    text-align: center;
  }

  .p-hero-sp__title {
    display: block;
    text-align: center;
  }

  /* SP catchphrase wrapper — ブロック中央、テキスト左揃え */
  .p-hero-sp__catchphrase-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  /* Each line container */
  .p-hero-sp__line {
    position: relative;
    display: block;
    border-radius: 6px 8px 5px 7px;
    padding: 2px 6px;
  }

  .p-hero-sp__line-svg {
    position: relative;
    z-index: 1;           /* テキストをマーカーの上に */
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
  }

  /* Yellow marker behind catchcopy — ourservice方式 ::before */
  .p-hero-sp__line::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 8%;
    width: calc(100% + 6px);
    height: 80%;
    transform-origin: left center;
    transform: scaleX(0) skewX(-4deg);
    background-color: var(--color-marker-yellow);
    border-radius: 5px 7px 4px 6px;
    pointer-events: none;
    z-index: 0;
  }

  .p-hero-sp__line::after {
    content: none;
  }

  /* Line widths + staggered marker swipe (SP 2行: matching desktop) */
  .p-hero-sp__line--1 {
    width: 86%;
  }
  .p-hero-sp__line--1::before {
    animation: hero-marker-swipe 0.37s cubic-bezier(0.18, 0.75, 0.22, 1) 0.11s forwards;
  }
  .p-hero-sp__line--2 {
    width: 73%;
    margin-top: 2.8%;
  }
  .p-hero-sp__line--2::before {
    animation: hero-marker-swipe 0.37s cubic-bezier(0.18, 0.75, 0.22, 1) 0.38s forwards;
  }
  .p-hero-sp__line--3 {
    width: 69%;
    margin-top: 2.8%;
  }
  .p-hero-sp__line--3::before {
    animation: hero-marker-swipe 0.37s cubic-bezier(0.18, 0.75, 0.22, 1) 0.65s forwards;
  }

  /* ==============================
     Decorations
     ============================== */

  /* Clouds */
  .p-hero-sp__cloud {
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }

  /* Clouds: 11個 横一列（top は vw 基準 — ヘッダー50px=12.8vw の下から表示）
     手調整するときは top の vw 値だけ変えればOK */
  .p-hero-sp__cloud--1  { top: 30vw; left: 2%;   width: 10%; } /* topview-03 */
  .p-hero-sp__cloud--2  { top: 24vw; left: 12%;  width: 10%; } /* topview-07 */
  .p-hero-sp__cloud--3  { top: 13vw; left: 23%;  width: 10%; } /* topview-03 */
  .p-hero-sp__cloud--4  { top: 10vw; left: 34%;  width: 10%; } /* topview-07 */
  .p-hero-sp__cloud--5  { top: 4vw;  left: 45%;  width: 8%;  } /* topview-08 縦長 */
  .p-hero-sp__cloud--6  { top: 11vw; left: 54%;  width: 10%; } /* topview-07 */
  .p-hero-sp__cloud--7  { top: 17vw; left: 64%;  width: 10%; } /* topview-04 */
  .p-hero-sp__cloud--8  { top: 15vw; left: 65%;  width: 10%; } /* topview-05 */
  .p-hero-sp__cloud--9  { top: 25vw; left: 74%;  width: 10%; } /* topview-04 */
  .p-hero-sp__cloud--10 { top: 27vw; left: 82%;  width: 10%; } /* topview-05 */
  .p-hero-sp__cloud--11 { top: 37vw; left: 92%;  width: 10%; } /* topview-04 */

  /* Balloon */
  .p-hero-sp__balloon {
    position: absolute;
    z-index: 4;
    pointer-events: none;
  }
  .p-hero-sp__balloon--1 {
    top: 5.5%;
    right: 33%;
    width: 13%;
  }
  .p-hero-sp__balloon--2 {
    top: 65%;
    left: 79%;
    width: 14%;
  }

  /* Plane: 右上の画面外から左下へループ（PCと同じ動き） */
  @keyframes hero-plane-sp-loop {
    0%        { transform: translate(0, 0); }
    70%, 100% { transform: translate(-130vw, 60vw); }
  }

  .p-hero-sp__plane {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    top: 24%;
    left: 110%;
    width: 12%;
    animation: hero-plane-sp-loop 8s linear infinite;
    will-change: transform;
  }

  /* ==============================
     Sub-breakpoints
     ============================== */

  @media (max-width: 390px) {
    .p-hero-sp__canvas {
      padding-top: 48px;
    }

    .p-hero-sp__bubble {
      padding: 6px 20px;
      border-radius: 20px;
    }

    .p-hero-sp__bubble-name {
      font-size: 9px;
    }

    .p-hero-sp__line--row .p-hero-sp__text-img {
      width: 48%;
    }
    .p-hero-sp__line:not(.p-hero-sp__line--row) .p-hero-sp__text-img {
      width: 65%;
    }
  }

  @media (max-width: 375px) {
    .p-hero-sp__bubble-name {
      font-size: 8px;
    }

    .p-hero-sp__bubble {
      padding: 5px 16px;
      border-radius: 18px;
    }
  }

} /* end @media (max-width: 767px) */
}

@layer overrides{

/* ==========================================================================
   Pin Overrides — size reduction + auto-positioning via calc()
   ==========================================================================

   How it works:
   - Each pin defines --tip-x / --tip-y: the building point it should target
   - --pin-scale controls the pin width (% of canvas width)
   - left/top are auto-calculated so the pin tip (bottom-center) lands on the target

   To resize pins: change --pin-scale only. All positions auto-adjust.
   ========================================================================== */

/* ===== Scale variables ===== */
.p-hero__pin-wrap {
  --pin-scale: 3.2;                                     /* width as % of canvas */
  --pin-svg-aspect: 1.383;                               /* SVG height/width ratio */
  --canvas-aspect: 1.7476;                               /* canvas width/height ratio */
  --pin-h-offset: calc(var(--pin-scale) / 2);            /* half width (for centering) */
  --pin-v-offset: calc(var(--pin-scale) * var(--pin-svg-aspect) * var(--canvas-aspect));
                                                         /* full pin height in top% units */
  width: calc(var(--pin-scale) * 1%);
  left: calc((var(--tip-x) - var(--pin-h-offset)) * 1%);
  top: calc((var(--tip-y) - var(--pin-v-offset)) * 1%);
}

/* ===== Existing pin tip coordinates =====
   Measured from production at 1440x824 canvas via JS getBoundingClientRect() */
.p-hero__pin-wrap--1 { --tip-x: 26.111; --tip-y: 22.341; }
.p-hero__pin-wrap--2 { --tip-x: 25.556; --tip-y: 52.560; }
.p-hero__pin-wrap--3 { --tip-x: 39.167; --tip-y: 40.788; }
.p-hero__pin-wrap--4 { --tip-x: 61.111; --tip-y: 77.316; }
.p-hero__pin-wrap--5 { --tip-x: 79.389; --tip-y: 17.123; }
.p-hero__pin-wrap--6 { --tip-x: 78.819; --tip-y: 61.055; }

/* ===== New pin tip coordinates =====
   Approximate from PDF reference (page 10), fine-tune visually */
.p-hero__pin-wrap--7 { --tip-x: 82.57; --tip-y: 30.95; } /* NEWS — right high-rise area */
.p-hero__pin-wrap--8 { --tip-x: 58.13; --tip-y: 30.34; } /* CONTACT — center brick buildings */
.p-hero__pin-wrap--9 { --tip-x: 50.07; --tip-y: 52.79; } /* MVV — center park/fountain area */

/* ===== Hovered pin stacking: tooltip always above other pins ===== */
.p-hero__pin-wrap:hover,
.p-hero__pin-wrap.is-active {
  z-index: 20;
}

/* ===== Tooltip direction for right-side pins (tip-x > 50%) ===== */
.p-hero__pin-wrap--5 .p-hero__tooltip,
.p-hero__pin-wrap--6 .p-hero__tooltip,
.p-hero__pin-wrap--7 .p-hero__tooltip {
  left: auto;
  right: calc(100% + 16px);
}
.p-hero__pin-wrap--5 .p-hero__tooltip::after,
.p-hero__pin-wrap--6 .p-hero__tooltip::after,
.p-hero__pin-wrap--7 .p-hero__tooltip::after {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #f7931e;
}

/* ===== Mobile pin size reduction ===== */
.p-hero-sp__pin {
  width: clamp(28px, 7vw, 42px);
}

/* ===== New mobile pin positions =====
   NEWS & CONTACT in island-group--1, MVV in island-group--3.
   Coordinates from user placement tool. */
.p-hero-sp__pin--news    { top: 52%; left: 64%; }
.p-hero-sp__pin--contact { top: 50%; left: 22%; }
.p-hero-sp__pin--mvv     { top: 23%; left: 28%; }

/* ===== New mobile bubble positions =====
   Bubble sits ~5% above pin, horizontally centered on pin center. */
.p-hero-sp__bubble--news    { top: 47%; left: 60%; }
.p-hero-sp__bubble--contact { top: 45%; left: 16.4%; }
.p-hero-sp__bubble--mvv     { top: 18%; left: 24.6%; }
}

/* Base styles (frozen snapshot from style.css lines 28-114) */

@layer base {
  html {
    font-size: 16px;
  }

  body {
    font-family: var(--font-family-ja);
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;
  }

  section {
    padding: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
  }

  .u-text-center { text-align: center; }
  .u-text-left { text-align: left; }
  .u-text-right { text-align: right; }
  .u-font-en { font-family: var(--font-family-en); }
  .u-font-ja { font-family: var(--font-family-ja); }
  .u-font-normal { font-weight: var(--font-weight-normal); }
  .u-font-medium { font-weight: var(--font-weight-medium); }
  .u-font-bold { font-weight: var(--font-weight-bold); }
  .u-font-black { font-weight: var(--font-weight-black); }
  .u-color-primary { color: var(--color-primary); }
  .u-color-secondary { color: var(--color-secondary); }
  .u-color-text { color: var(--color-text); }
  .u-color-text-light { color: var(--color-text-light); }
  .u-color-white { color: var(--color-white); }
  .u-bg-primary { background-color: var(--color-primary); }
  .u-bg-secondary { background-color: var(--color-secondary); }
  .u-bg-cream { background-color: var(--color-bg-cream); }
  .u-bg-light { background-color: var(--color-bg-light); }
  .u-bg-white { background-color: var(--color-white); }
  .u-mt-0 { margin-top: 0; }
  .u-mt-sm { margin-top: var(--spacing-sm); }
  .u-mt-md { margin-top: var(--spacing-md); }
  .u-mt-lg { margin-top: var(--spacing-lg); }
  .u-mt-xl { margin-top: var(--spacing-xl); }
  .u-mt-2xl { margin-top: var(--spacing-2xl); }
  .u-mb-0 { margin-bottom: 0; }
  .u-mb-sm { margin-bottom: var(--spacing-sm); }
  .u-mb-md { margin-bottom: var(--spacing-md); }
  .u-mb-lg { margin-bottom: var(--spacing-lg); }
  .u-mb-xl { margin-bottom: var(--spacing-xl); }
  .u-mb-2xl { margin-bottom: var(--spacing-2xl); }
  .u-hidden { display: none; }
  .u-block { display: block; }
  .u-flex { display: flex; }
  .u-grid { display: grid; }

  @media (max-width: 767px) {
    .u-hidden-sp { display: none !important; }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .u-hidden-tablet { display: none !important; }
  }

  @media (min-width: 1024px) {
    .u-hidden-pc { display: none !important; }
  }
}