@charset "utf-8";

:root {
  --door-color: black;
  --door-shadow: gray;
  --nano-white: rgba(247, 251, 254, 1);
  --bg-color: rgba(218, 236, 243, 1);
  --bg-color2: #B8928B;
  --frame-color: #DBC0D9;
  --h2-color: #D788AF;
  --font-color: #927EAF;
  --font-zen: 'Zen Maru Gothic', sans-serif;
}

body {
  background-color: var(--bg-color);
  background-image: url(../img/bg/mainbg4.png);
  background-size: 330px;
}

main {
  margin: 0 auto 40px;
}

main section {
  position: relative;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

section h2 {
  z-index: 2;
  position: absolute;
  width: max-content;
  top: -15px;
  right: 5px;
  color: var(--h2-color);
  padding: 0px 10px 5px;
  border-radius: 6px;
  border: 2px solid var(--h2-color);
  background-color: var(--nano-white);
  box-shadow: 1px 2px 5px var(--door-shadow);
  font-family: var(--font-zen);
  font-weight: 900;
}

section dl {
  line-height: 1.5;
  color: var(--font-color);
  margin: 41px auto 100px;
  padding: 2.5em 1.5em 3em;
  background-color: rgba(247, 251, 254, 0.7);
  border-radius: 11px;
  border: 2px solid var(--font-color);
  box-shadow: 1px 1px 4px var(--door-shadow);
  font-family: var(--font-zen);
}

dt img {
  width: 200px;
}

dt img:hover {
  opacity: 0.8;
}

section dd {
  margin-bottom: 2.85em;
}

section dd:last-of-type {
  margin-bottom: 0;
}

@keyframes skewanime {
  100% {
    left: -10%;
    /*画面の見えていない左から右へ移動する終了地点*/
  }
}

@media (max-width: 800px) {
  body {
    background-size: 220px;
  }

  section h2 {
    right: 6px;
  }

  section dl {
    margin: 31px auto 86px;
    padding: 2.5em 0.8em 3em;
  }
}