@charset "UTF-8";
:root {
  --grid-maxWidth: 192rem; /* max container width 1920px */
}
body{
  /* min-height: 100vh; */
}
h1 {
  font-size: x-large;
}

.nav {
  line-height: 0.2;
}

.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.dialog_inner{
  overflow-y: scroll;
  height: 500px;
}
/*背景ぼかし*/
  .header {
    /*背景ぼかし*/
    backdrop-filter: blur(10px);
    background-color: rgba(216, 203, 212, 0.233);
  }
  .footer {
    /*背景ぼかし*/
    backdrop-filter: blur(10px);
    background-color: rgba(216, 203, 212, 0.233);
  }

  /*dialogの表示方法*/
  #dialog{
    transform:scale(0);
    opacity:0;
    /* transition:
      transform 0.5s; */
  }
  #dialog.open{
    background-color: #0000ff;
    transform:scale(1);
    opacity:1;
    transition:
      opacity 0.5s,
      background-color 0.5s,
      transform 0.5s;
  }
  #dialog.close{
    transform:scale(0);
    opacity:0;
    transition:
      opacity 0.5s,
      transform 0.5s;
  }

@media (max-width: 599px) {
  /*header可動
  footer可動*/
  .header {
      width: 100%;
      z-index: 100;
  }

  .main {
      flex: 1;
  }

  .footer {
      position: relative;
      width: 100%;
      z-index: 200;
      align-self: auto;
  }
}

@media (min-width: 600px) {
  /*header固定
  footer固定*/
  .header {
      top: 0;
      left: 0;
      position: sticky;
      width: 100%;
      z-index: 100;
  }

  .main {
      flex: 1;
  }

  .footer {
      position: sticky;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 200;
      align-self: flex-end;
  }
}
@media (min-width: 900px) {
  /*header固定
  footer可動*/
  .header {
      top: 0;
      left: 0;
      position: sticky;
      width: 100%;
      z-index: 100;
  }

  .main {
      flex: 1;
  }

  .footer {
      position: relative;
      width: 100%;
      z-index: 200;
      align-self: auto;
  }
}

@media (min-width: 1200px) {
  /*header可動
  footer固定*/
  .header {
    position: relative;
    width: 100%;
    z-index: 100;
  }

  .main {
      flex: 1;
  }

  .footer {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    align-self: flex-end;
  }
}