/* ポインタ差・画面幅・動きの軽減設定だけを集約する。
   同詳細度の上書きを確定するため、CSSの最後に読み込む。 */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .brand {
    transition: color var(--duration-fast) var(--ease-thread);
  }

  .carousel-button,
  .fortune-button,
  .fortune-reset {
    transition: color var(--duration-fast) var(--ease-thread), transform var(--duration-fast) var(--ease-thread);
  }

  .shop-card {
    transition: transform var(--duration-fast) var(--ease-thread);
  }

  .brand:hover,
  .brand:focus-visible {
    color: var(--gold);
  }

  .carousel-button:hover,
  .carousel-button:focus-visible {
    color: var(--gold);
    transform: translateY(-2px);
  }

  .fortune-button:hover,
  .fortune-button:focus-visible {
    transform: translateY(-2px);
  }

  .fortune-reset:hover,
  .fortune-reset:focus-visible {
    color: var(--gold);
    transform: translateY(-1px);
  }

  .product-flip:hover picture img,
  .product-flip:focus-visible picture img,
  .atelier-step:hover .atelier-visual img,
  .material-card:hover .material-photo img,
  .shop-collage-photo:hover img {
    transform: scale(1.03);
  }

  .shop-card:hover,
  .shop-card:focus-visible {
    transform: translateY(-4px);
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .carousel {
    --slide-size: min(23rem, 44vw);
  }
}

@media (max-width: 900px) {
  .atelier-step {
    display: block;
  }

  .atelier-visual {
    margin-top: 1.5rem;
  }

  .atelier-thread {
    display: none;
  }

  .material-list {
    display: block;
  }

  .material-card + .material-card {
    margin-top: 2rem;
  }

  .footer-inner {
    display: block;
  }

  .footer-inner p + p {
    margin-top: 1rem;
  }
}

@media (max-width: 767px) {
  :root {
    --space-section: 5.5rem;
    --space-side: 1.25rem;
  }

  body {
    line-height: 1.85;
  }

  h1 {
    font-size: 2.125rem;
    letter-spacing: 0.04em;
  }

  h2 {
    font-size: 1.625rem;
  }

  .site-header {
    padding-top: 1.5rem;
  }

  .brand-name {
    font-size: 1.625rem;
  }

  .hero {
    padding-block: 21rem 3.5rem;
  }

  .hero-media img {
    object-position: 57% center;
  }

  .hero-light {
    opacity: 0.42;
  }

  .hero-chain-route {
    display: none;
  }

  .hero-chain-glint {
    left: 72%;
    opacity: 0.5;
    top: 62%;
    transform: translate(-50%, -50%) scale(0.58);
  }

  .hero-pointer-glow,
  .flip-edge-light,
  .flip-particle,
  .fortune-land-light {
    display: none;
  }

  .hero .sparkle,
  .hero-bokeh,
  .footer-light-particle {
    animation: none !important;
  }

  .hero .sparkle {
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(0.76);
  }

  .hero-bokeh-a {
    height: 190px;
    left: 3%;
    opacity: 0.3;
    top: 34%;
    transform: scale(1);
    width: 190px;
  }

  .hero-bokeh-b {
    height: 120px;
    left: 62%;
    opacity: 0.23;
    top: 58%;
    transform: scale(1);
    width: 120px;
  }


  .product-card[data-active="true"] .product-face::after {
    opacity: 0.3;
    transform: scale(1);
  }

  .gift:not(.is-open) .gift-photo-light {
    opacity: 0.28;
    transform: scale(0.92);
  }

  .section-window-light {
    opacity: 0.36;
    transform: translate3d(0, 0, 0) scale(1.04);
  }

  .hero-copy {
    padding-left: 1rem;
    padding-right: var(--space-side);
  }

  .hero-botanical img {
    width: 46vw;
  }

  .hero-botanical-a {
    top: 7rem;
  }

  .hero-botanical-b {
    opacity: 0.62;
  }

  .hero.is-ambient-active .hero-botanical-a,
  .hero.is-ambient-active .hero-botanical-b {
    animation: none;
  }

  .hero-lead {
    font-size: 0.9375rem;
    margin-top: 1.25rem;
  }

  .shop-closing-copy {
    font-size: 1.125rem;
    letter-spacing: 0.04em;
  }

  .story {
    padding-block: 6rem;
  }

  .story-copy {
    padding: 2.5rem 1.25rem;
  }

  .story-botanical {
    bottom: -3rem;
    opacity: 0.34;
    right: -7rem;
  }

  .story-window-light {
    opacity: 0.62;
  }

  .thread-divider {
    padding-block: 0;
  }

  .atelier-stage {
    padding-block: 2rem;
  }

  .atelier-step {
    padding: 0.75rem;
  }

  .atelier-step + .atelier-step {
    margin-top: 1rem;
  }

  .atelier-copy {
    margin: 0 0 -1rem;
    padding: 1.25rem 1rem;
  }

  .atelier-number {
    font-size: 3.25rem;
    inset: 0.08em auto auto 0.16em;
  }

  .atelier-visual {
    margin-top: 0;
    padding: 0.625rem;
  }

  .atelier-copy > p:last-child {
    font-size: 1.125rem;
    letter-spacing: 0.02em;
  }

  .collection-heading {
    display: block;
  }

  .carousel {
    --slide-size: 82vw;
  }

  .carousel-controls {
    gap: 0.375rem;
    margin-top: 1.5rem;
  }

  .carousel-button {
    height: 44px;
    width: 44px;
  }

  .carousel-position {
    display: none;
  }

  .lookbook-stage {
    display: none;
  }

  .lookbook-mobile {
    display: grid;
    gap: 1.5rem;
    margin-top: 0.5rem;
  }

  .lookbook-heading {
    margin-bottom: 2rem;
  }

  .lookbook-subtitle {
    font-size: 1.125rem;
    margin-top: 0.65rem;
  }

  .lookbook-mobile-card + .lookbook-mobile-card {
    border-top: 1px solid rgba(var(--gold-rgb), 0.16);
    margin-top: 1.5rem;
    padding-top: 1.8rem;
  }

  .lookbook-mobile-card {
    display: block;
  }

  .lookbook-mobile-copy {
    margin-top: 1rem;
  }

  .lookbook-mobile-photo {
    max-width: min(390px, 84vw);
  }

  .lookbook-mobile-photo img {
    box-shadow: 0 24px 64px rgba(68, 47, 28, 0.14);
  }

  .lookbook-title {
    font-size: 2.15rem;
    margin-bottom: 0.6rem;
  }

  .lookbook-copy {
    line-height: 1.9;
    margin-bottom: 0.6rem;
  }

  .fortune {
    padding-top: 18rem;
  }

  .fortune-background {
    inset: 1.5rem var(--space-side) auto;
  }

  .fortune-background img {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .fortune-scrim {
    opacity: 0.66;
  }

  .maker-layout,
  .shop-list {
    display: block;
  }

  .material-number {
    margin-bottom: 1.5rem;
  }

  .maker-copy {
    margin-top: 3rem;
  }

  .maker-lamp-optical {
    inline-size: var(--lamp-optical-size, 62%);
  }

  .maker-botanical {
    bottom: -3rem;
    opacity: 0.24;
  }

  .gift-photo {
    width: 70vw;
  }

  .shop-collage-photo {
    flex-basis: 42vw;
  }

  .shop-collage-photo + .shop-collage-photo {
    margin-left: -18vw;
  }

  .shop-card + .shop-card {
    margin-top: 1px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .hero-light {
    opacity: 0.48;
    transform: none !important;
  }

  .hero-botanical {
    animation: none !important;
  }

  .hero-chain-route {
    display: none;
  }

  .hero-chain-glint {
    left: 72%;
    opacity: 0.5;
    top: 62%;
    transform: translate(-50%, -50%) scale(0.58) !important;
  }

  .hero-pointer-glow,
  .flip-edge-light,
  .flip-particle,
  .fortune-land-light {
    display: none;
  }

  .hero-bokeh,
  .footer-light-particle,
  .product-card.is-frame-glinting .product-face::after {
    animation: none !important;
  }

  .hero-bokeh-a {
    opacity: 0.2;
    transform: scale(1) !important;
  }

  .hero-bokeh-b {
    opacity: 0.15;
    transform: scale(1) !important;
  }


  .product-card[data-active="true"] .product-face::after {
    opacity: 0.3;
    transform: scale(1);
  }

  .gift:not(.is-open) .gift-photo-light {
    opacity: 0.28;
    transform: scale(0.92);
  }

  .product-flip-inner {
    transition: none;
  }

  .sparkle {
    animation: none !important;
    opacity: 0.46;
    transform: translate(-50%, -50%) scale(0.72);
  }

  .product-sparkle {
    display: block;
    opacity: 0.3;
  }

  .maker-image.is-lit .maker-lamp-bloom,
  .maker-image.is-lit .maker-lamp-optical {
    animation: none !important;
  }

  .image-reveal-cover {
    display: none;
  }

  .gift-note,
  .gift-photo-light,
  .gift-photo {
    transition: none;
  }

  [data-pendulum-body] {
    opacity: 1;
    transform: none !important;
  }

  .earring-sparkle {
    opacity: 0;
    transform: none !important;
  }

  .js .product-face picture img,
  .js .atelier-visual img,
  .js .material-photo img,
  .js .maker-image > picture:not(.maker-lamp-optical) img,
  .js .shop-collage-photo img,
  .js .gift-photo picture img {
    transform: none;
  }
}