@media (max-width: 768px) {
  :root {
    --ju-font-xl: clamp(20px, 5vw, 24px);
    --ju-font-lg: clamp(16px, 4.2vw, 20px);
    --ju-font-md: clamp(14px, 3.8vw, 16px);
    --ju-font-sm: clamp(12px, 3.2vw, 14px);
    --ju-section-pad-y: clamp(40px, 12vw, 70px);
    --ju-inline-pad: clamp(20px, 5vw, 30px);
    --ju-grid-gap: clamp(24px, 6vw, 32px);
  }

  body {
    font-size: var(--ju-font-md);
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

	  img, video:not(.video-el), iframe, figure {
	    max-width: 100%;
	    height: auto;
	    display: block;
	  }

	  /* HERO背景動画は常にcoverで全画面にフィット（一般videoルールの上書き） */
	  .video-el{
	    max-width: none !important;
	    width: calc(100% + 20px) !important;
	    height: calc(100% + 20px) !important;
	    object-fit: cover !important;
	  }

  .header-inner,
  .gs-container,
  .ju-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--ju-inline-pad) !important;
    margin-inline: auto !important;
    box-sizing: border-box;
  }

  .header-inner {
    gap: clamp(8px, 4vw, 18px) !important;
  }

  .brand {
    gap: clamp(6px, 2.8vw, 12px) !important;
  }

  .brand-mark {
    width: clamp(56px, 18vw, 72px) !important;
  }

  .brand-logo-image {
    height: clamp(32px, 9vw, 40px) !important;
  }

  .brand-text {
    font-size: clamp(18px, 4.8vw, 22px) !important;
    letter-spacing: 0.06em !important;
  }

  .site-header .nav {
    flex-wrap: nowrap !important;
    gap: clamp(10px, 3vw, 18px) !important;
  }

  .status-text {
    font-size: clamp(12px, 3.2vw, 13px) !important;
    white-space: nowrap !important;
    color: #ff6ec7 !important;
  }

  .status-tooltip-wrapper .tooltip-box {
    display: block !important;
    white-space: nowrap !important;
    max-width: none !important;
    line-height: 1.2;
    text-align: center;
    padding: 8px 12px !important;
  }

  .status-tooltip-wrapper:active .tooltip-box,
  .status-tooltip-wrapper:focus-within .tooltip-box {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(12px);
  }

  .theme-toggle {
    width: clamp(34px, 10vw, 42px) !important;
    height: clamp(18px, 5vw, 22px) !important;
    padding: 0 clamp(2px, 1vw, 4px) !important;
  }

  .theme-toggle::after {
    width: clamp(14px, 4vw, 18px) !important;
    height: clamp(14px, 4vw, 18px) !important;
  }

  section.gs-section,
  section.ju-design,
  section.ju-policy {
    padding: var(--ju-section-pad-y) 0 !important;
    overflow-x: hidden;
  }

  .site-header .status-text {
    white-space: nowrap;
  }

  .scroll-container {
    display: block;
  }

  .scroll-panel:not(#gallery):not(#usage-example-slider):not(#event-shop-slider) {
    position: static;
    min-height: auto;
    background: #000;
    z-index: auto;
    scroll-snap-align: none !important;
  }
  .scroll-panel:not(#gallery):not(#usage-example-slider):not(#event-shop-slider)::before { display: none !important; }
  .scroll-panel .gs-container,
  .scroll-panel .ju-container { min-height: 0; }
  .juB-stick { position: static; height: auto; }

  .gs-grid-4, .gs-grid-3, .gs-grid-2, .ju-design__row, .pf-grid, .apology-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ju-grid-gap);
  }

  .gs-card, .gs-work-card, .gs-feature-card, .gs-info-card {
    padding: clamp(18px, 5vw, 26px);
    border-radius: 16px;
    text-align: left;
  }
  
  .gs-info-card { border: 1px solid #333; }

  .gs-work-image-wrapper, .gs-card img, .gs-work-image, .gs-feature-card img {
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }

  section:not(#hero) h1, section:not(#hero) h2, section:not(#hero) .gs-heading {
    font-size: var(--ju-font-xl) !important;
    line-height: 1.35 !important;
    margin-bottom: clamp(16px, 4vw, 20px) !important;
    text-align: left;
    word-break: break-word;
  }

  section:not(#hero) h3, section:not(#hero) .gs-overline {
    font-size: var(--ju-font-lg) !important;
    line-height: 1.45 !important;
    text-align: left;
    word-break: break-word;
  }
  
  section:not(#hero) .gs-card-title, section:not(#hero) .gs-work-title, section:not(#hero) .gs-feature-title, section:not(#hero) .gs-info-title {
    font-size: var(--ju-font-md) !important;
    font-weight: bold;
  }

  section:not(#hero) p, section:not(#hero) li, section:not(#hero) .gs-card-text, section:not(#hero) .gs-work-text, section:not(#hero) .gs-feature-list li, section:not(#hero) .ju-acc__text {
    font-size: var(--ju-font-md) !important;
    line-height: 1.7 !important;
    text-align: left;
  }

  small, .text-nowrap, .desc-tight {
    font-size: var(--ju-font-sm) !important;
    white-space: normal !important;
  }

  section:not(#hero) .gs-heading br, section:not(#hero) .gs-overline br { display: none; }

  #story .gs-card {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 4vw, 18px);
    padding: 0 !important;
    background: transparent !important;
  }
  #story .gs-card-icon-wrapper {
    flex-shrink: 0;
    margin-top: 0.35em;
  }
  #story .gs-card-content { text-align: left; }

  #features .gs-feature-list { padding-left: 20px; }
  #features .gs-feature-list li { padding-block: 8px; }

  #modeling .ju-csa { height: auto; min-height: 50vh; padding: 10vh 1.5rem 8vh; }
  #modeling .ju-header { position: relative; margin-bottom: 2rem; width: 100%; text-align: center; }
  #modeling .gs-heading { text-align: center !important; }
  #modeling .ju-card { margin: 0 auto; height: auto; }

  #testimonial-event-shop { place-items: stretch; padding-block: var(--ju-section-pad-y) !important; }
  #testimonial-event-shop .gs-card { transform: none !important; display: grid; grid-template-columns: 40px 1fr; gap: 20px; align-items: center; max-width: 400px; margin-inline: auto; }
  #testimonial-event-shop .gs-card-icon-wrapper { justify-self: center; }

  .ju-policy .ju-acc__btn, .ju-policy .ju-acc__panel { padding-inline: 0; }

  /* お詫び〜 (#contact-apology) は他セクションと同じスクロール挙動を保つため、
     固定解除の対象からは外す。サイト全体の notice と footer だけ静的配置にする。 */
  #site-notice, footer {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
  }

  #ju-cursor, #cursor3d, #cursor3d canvas { display: none !important; }
}

@media (max-width: 768px) {
  #hero .hero-title {
    transform: translateY(-15vh) !important;
  }

  #hero-2 .hero-title {
    transform: translate(-50%, -50%) !important;
  }

}

@media (max-width: 768px) and (orientation: landscape) {
  #hero .hero-title {
    transform: translateY(-20vh) !important;
  }

  #hero-2 .hero-title {
    transform: translate(-50%, 0) !important;
  }
}