:root{
  --vw: 375;
  --base: 100vw;
  interpolate-size: allow-keywords;
}

@media (min-width: 768px) {
  :root{
    --vw: 1144;
    --base: 100vw;
  }
}

@media (min-width: 1144px) {
  :root {
    --vw: 1;
    --base: 1px;
  }
}

/* ===============================================================================
View Transition
=============================================================================== */

@view-transition {
  navigation: auto;
}

/* ルートインデックス（トップ）から遷移してきたときのアニメーション */
html:active-view-transition-type(from-home) {
  &::view-transition-old(root) {
    animation: 1.0s ease both blur-out-home;
  }
  &::view-transition-new(root) {
    animation: 4.0s ease both blur-in-home;
  }
}

/* それ以外の通常の遷移 */
html:active-view-transition-type(from-subpage) {
  &::view-transition-old(root) {
    animation: 1s ease both blur-out;
  }
  &::view-transition-new(root) {
    animation: 1s ease both blur-in;
  }
}

/* 独自のキーフレーム（ぼかし用）を定義 */
@keyframes blur-out {
  from { filter: blur(0px); opacity: 1; }
  to { filter: blur(20px); opacity: 0; }
}

@keyframes blur-in {
  from { filter: blur(20px); opacity: 0; }
  to { filter: blur(0px); opacity: 1; }
}

@keyframes blur-out-home {
  0% { filter: blur(0px); opacity: 1; }
  25% { filter: blur(20px); opacity: 1; }
  100% { filter: blur(20px); opacity: 0; }
}

@keyframes blur-in-home {
  0% { filter: blur(20px); opacity: 0; }
  50% { filter: blur(20px); opacity: 0; }
  100% { filter: blur(0px); opacity: 1; }
}

/* ===============================================================================
Reset
=============================================================================== */
:where(html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video) {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
:where(article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section) {
  display: block;
}

:where(ol, ul) {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  border: none;
}

input, textarea, button, select {
  font-family: inherit;
}