Design System.

Primary · accent fill, hover reverses to outline, arrow translates on hover

<div class="feature-head">
  <span><span class="num">(03)</span> — 01 / Record</span>
  <span class="dash"></span>
  <span>fig. 01</span>
</div>

• 日付表示の改善ログ画面の日付ヘッダーを2行表示に。
• データタブの改善期間セレクタをロケール対応＋幅可変に。

• 01Record記録する
• 02Revisit再訪する

.phone {
  transform: rotateX(5deg) rotateY(-10deg) translate3d(0, var(--py), 0);
  transform-style: preserve-3d;
}
.phone::before {                /* back plane for depth */
  transform: translateZ(-20px);
}

.dark class on root toggles all semantic tokens. OS follow when no user override.

// rondo.js
var darkMq = window.matchMedia('(prefers-color-scheme: dark)');
function applyStoredOrOsTheme() {
  var stored = localStorage.getItem('theme');
  var dark = stored === 'dark' || (stored === null && darkMq.matches);
  document.documentElement.classList.toggle('dark', dark);
}
// OS live-follow when no user override
darkMq.addEventListener('change', () => {
  if (localStorage.getItem('theme') === null) applyStoredOrOsTheme();
});

6 languages · ja / en / ko / ru / zh-CN / zh-TW · HTML-safe fallback

<p data-i18n="hero-catch">その場所に、記録を重ねる。</p>

window.T = {
  'ja': { 'hero-catch': 'その場所に、記録を重ねる。' },
  'en': { 'hero-catch': 'Layer memories onto places.' }
};
// runtime: innerHTML when value contains <br|<strong, else textContent

AOS · .aos becomes .aos.visible, then children reveal with per-index delay

.aos .feature-head { opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-base) var(--ease-primary),
              transform var(--dur-base) var(--ease-primary); }
.aos.visible .feature-head { opacity: 1; transform: translateY(0); }

/* stagger */
.aos.visible .feature-text > *:nth-child(1) { transition-delay: 0.15s; }
.aos.visible .feature-text > *:nth-child(2) { transition-delay: 0.26s; }
.aos.visible .feature-text > *:nth-child(3) { transition-delay: 0.36s; }

<section class="feature aos">
  <div class="section-glyph">...</div>       <!-- chapter mark -->
  <div class="feature-head">(03) — 01</div>   <!-- meta row -->
  <div class="feature-body">
    <div class="feature-text">
      <h2 class="feature-title">...</h2>      <!-- big display -->
      <p class="feature-jp">...</p>          <!-- JP catch -->
      <p class="feature-desc">...</p>        <!-- body -->
      <div class="feature-fig">...</div>     <!-- caption -->
    </div>
    <div class="feature-visual">...</div>    <!-- phones -->
  </div>
</section>

.feature-body.reverse .feature-text  { order: 2; }
.feature-body.reverse .feature-visual { order: 1; }
.feature-body.reverse .phone { --tilt-y: 10deg; }  /* mirrored */

cubic-bezier(0.22, 1, 0.36, 1) · fast start, gentle landing

// rondo.js bootAos()
var io = new IntersectionObserver(entries => {
  entries.forEach(e => e.isIntersecting && e.target.classList.add('visible'));
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.aos').forEach(el => io.observe(el));

// bootParallax() — rAF-throttled
var p = (sectionMid - vh/2) / ((vh + rect.height) / 2);
phone1.style.setProperty('--py', (p * -28) + 'px');
phone2.style.setProperty('--py', (p *  36) + 'px');

@media (prefers-reduced-motion: reduce) {
  .phone     { --tilt-y: 0deg; --tilt-x: 0deg; --py: 0 !important; }
  .tile      { opacity: 1; transform: none; transition: none; }
}
// rondo.js bootParallax() short-circuits when user opts out.