/* recet css */
html,
body {
  height: 100vh;
}
a, img {
  display: block;
  width: 100%;
  text-decoration: none;
}
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 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.p-canvas-webgl {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}
header div a {
  height: auto;
  transition: transform 0.1s;
}

header div a:hover {
  animation: shake 0.1s cubic-bezier(.36, .07, .19, .97) infinite;
}

@keyframes shake {

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }

  20% {
    transform: translate(-1px, 0) rotate(-1deg);
  }

  40% {
    transform: translate(1px, 0) rotate(1deg);
  }

  60% {
    transform: translate(-1px, 0) rotate(0);
  }

  80% {
    transform: translate(1px, 0) rotate(0);
  }
}
@media ( max-width:768px ) {
  html,
    body {
      height: 100vh;
    }
  header {
      position: fixed;
      display: flex;
      flex-flow: column;
      top: 4vh;
      /* 上部のマージンを20vhに設定 */
      left: 0;
      right: 0;
      margin: auto;
      height: 50vh;
      /* 高さを60vhに設定して、下部のマージンを20vhにする */
      width: 40vw;
      z-index: 2;
      justify-content: space-between;
      /* 子要素間の間隔を等しくする */
    }
    h1 {
      text-indent: 0; /* 大きな値を一時的に無効化 */
      overflow: visible; /* 子要素が隠れないように */
    }
    h1 a {
      background: url('https://airbnb-apartment.akikito.tokyo/img/Akikito_logoH1.png?v=2') no-repeat center center / contain;
      height: 50vw;
      width: 50vw;
      opacity: 1; /* フル表示 */
      transition: none; /* アニメーションの影響を除外 */
    }
    header div a img {
      border: rgba(250, 250, 251, 0.3) solid 0.5rem;
    }
    footer {
      color: #fff;
      z-index: 4;
      font-size: 1.2rem;
      position: fixed;
      bottom: 2rem;
      left: 0;
      width: 100%;
      text-align: center;
      font-family: 'Karla', sans-serif;
    }
}
@media ( min-width:769px ) {
  header {
    position: fixed;
    top: 14vw;
    left: 0;
    right: 0;
    margin: auto;
    height: 26vw;
    width: 80%;
    display: flex;
    justify-content: space-between;
    z-index: 2;
  }
  h1 {
    width: 26vw;
    height: 26vw;
    text-indent: -9999999999rem;
    }
    h1 a {
    filter: blur(3px);
    opacity: .5;
    height: 26vw;
    background: url('/img/Akikito_logo.svg') no-repeat;
    background-size: 100%;
    transition: 1.0s;

  }
  h1 a:hover {
    opacity: 1;
    filter: blur(0px);
  }
  header div {
    width: 12vw;
    padding-top: 2rem;
    }
  header div a {
      height: auto;
    }
  header div a img {
    border: rgba(250, 250, 251, 0.3) solid 12px;
  }
  h1 a {
    filter: blur(3px);
    opacity: .5;
    height: 26vw;
    background: url(../img/Akikito_logo.svg) no-repeat;
    background-size: 100%;
    transition: 1.0s;

  }
  h1 a:hover {
    opacity: 1;
    filter: blur(0px);
  }
  footer {
    color: #fff;
    z-index: 4;
    font-size: 1.2rem;
    position: fixed;
    bottom: 2rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Karla', sans-serif;
  }
    footer small {
      letter-spacing: 3px;
    }
}