body.kawakyu-modal-open{overflow:hidden}
.kawakyu-modal{
  position:fixed;
  inset:0;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  border:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.kawakyu-modal::backdrop{background:#000}

/* モーダルは dialog を閉じる前に退場アニメーションを完了させる。 */
.kawakyu-modal[open][data-modal-state="opening"]{
  animation:kawakyu-modal-fade-in .32s ease both;
}
.kawakyu-modal[open][data-modal-state="closing"]{
  animation:kawakyu-modal-fade-out .28s ease both;
}
.kawakyu-modal[open][data-modal-state="opening"]::backdrop{
  animation:kawakyu-modal-backdrop-in .32s ease both;
}
.kawakyu-modal[open][data-modal-state="closing"]::backdrop{
  animation:kawakyu-modal-backdrop-out .28s ease both;
}
.kawakyu-modal > article{
  transform-origin:center top;
  will-change:transform,opacity;
}
.kawakyu-modal[open][data-modal-state="opening"] > article{
  animation:kawakyu-modal-panel-in .52s cubic-bezier(.22,1,.36,1) both;
}
.kawakyu-modal[open][data-modal-state="closing"] > article{
  animation:kawakyu-modal-panel-out .24s cubic-bezier(.4,0,1,1) both;
}

@keyframes kawakyu-modal-fade-in{from{opacity:0}to{opacity:1}}
@keyframes kawakyu-modal-fade-out{from{opacity:1}to{opacity:0}}
@keyframes kawakyu-modal-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes kawakyu-modal-backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes kawakyu-modal-panel-in{
  from{opacity:0;transform:translate3d(0,24px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes kawakyu-modal-panel-out{
  from{opacity:1;transform:translate3d(0,0,0) scale(1)}
  to{opacity:0;transform:translate3d(0,12px,0) scale(.992)}
}

@media (prefers-reduced-motion:reduce){
  .kawakyu-modal[open],
  .kawakyu-modal[open]::backdrop,
  .kawakyu-modal > article{animation:none!important}
}