common.css

@charset "UTF-8";
:root {
  --article-height: calc(var(--article-width)*0.75);
  --article-row-gap: 2vw;
}

body {
  color: #333;
  font-family: Verdana, "Yu Gothic", sans-serif;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  display: none;
}

body header {
  background-image: url(./img/title-logo10.png);
  width: 95vw;
  height: 18.04vw;
  /* 画像;970x175なので h=w*(h/w) = 100vw*(175/970) = 18.04vw */
  margin: 2vh auto;
  border-bottom: #333;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

body #main-contents, body #error-page {
  margin: 0 1em 3em;
}

body #main-contents.hide, body #error-page.hide {
  display: none;
}

body #hamMenu {
  display: none;
  transition: 1200ms;
  margin: 0;
  padding: 0;
  list-style: none;
  position: fixed;
  top: 50vh;
  left: 0;
  width: 100vw;
  z-index: 100;
  color: #ffffff;
  font-weight: 900;
  text-align: center;
}

body #hamMenu.showing {
  display: inline-block;
  animation: showHamMenu 1200ms both;
}

body #hamMenu li {
  margin: 0.4em 0;
}

body #right-hamMenu-button.active,
body #left-hamMenu-button.active {
  z-index: 105;
}

@keyframes showHamMenu {
  from {
    opacity: 0;
    display: inline-block;
  }
  to {
    opacity: 1;
    display: inline-block;
  }
}

@media screen and (min-width: 960px) {
  :root {
    --article-width: 28vw;
  }
  body::-webkit-scrollbar {
    width: 10px;
    height: 100%;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 50, 0.5);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #8b2e2e;
  }
}

@media screen and (min-width: 480px) and (max-width: 960px) {
  /*tablet & smartphone(Side)*/
  :root {
    --article-width: 43vw;
  }
}

@media screen and (max-width: 480px) {
  /*smartphone(Vertical)*/
  :root {
    --article-width: 88vw;
    --article-row-gap: 6vw;
  }
  [id*="hamMenu-button"] {
    position: fixed;
    top: 50vh;
    height: 8vh;
    width: 8vh;
    transition: 600ms;
    border-radius: 50%;
  }
  [id*="hamMenu-button"] span {
    position: absolute;
    display: block;
    width: 25%;
    height: 6%;
    background: #eee;
    border-radius: 20%;
    transition: 700ms;
  }
  .active[id*="hamMenu-button"] span,
  [id*="hamMenu-back"] {
    background: #5ca04d;
  }
  [id*="hamMenu-back"] {
    position: fixed;
    top: 50vh;
    height: 8vh;
    width: 8vh;
    /* z-index: 98; */
    border-radius: 50%;
    transition: 500ms;
  }
  #left-hamMenu-button {
    left: -4vh;
    /* z-index: 99; */
    /* background: rgb(255, 180, 0); */
    background: transparent;
  }
  #left-hamMenu-button span {
    left: 60%;
  }
  #left-hamMenu-button span:nth-of-type(1) {
    top: 42.5%;
    transform: rotate(45deg);
  }
  #left-hamMenu-button span:nth-of-type(2) {
    top: 57.5%;
    /* calc(100% - 42.5%) */
    transform: rotate(-45deg);
  }
  #left-hamMenu-button.active {
    transform: translateX(8vh);
    background: #eee;
    /* z-index: 99; */
  }
  #left-hamMenu-button.active span:nth-of-type(1) {
    transform: translate(-1.7vh, 0.6vh) rotate(-45deg) scale(2);
  }
  #left-hamMenu-button.active span:nth-of-type(2) {
    transform: translate(-1.7vh, -0.6vh) rotate(45deg) scale(2);
  }
  #left-hamMenu-back {
    left: -4vh;
  }
  #left-hamMenu-back.active {
    transform: scale(30);
    z-index: 98;
    /* border-radius: 0%; */
  }
  .left-disappear-animation {
    transform: translateX(-4vh);
  }
  #right-hamMenu-button {
    right: -4vh;
    /* z-index: 99; */
  }
  #right-hamMenu-button span {
    right: 60%;
  }
  #right-hamMenu-button span:nth-of-type(1) {
    top: 42.5%;
    transform: rotate(-45deg);
  }
  #right-hamMenu-button span:nth-of-type(2) {
    top: 57.5%;
    transform: rotate(45deg);
  }
  #right-hamMenu-button.active {
    background: #eee;
    transform: translateX(-8vh);
  }
  #right-hamMenu-button.active span:nth-of-type(1) {
    transform: translate(1.7vh, 0.6vh) rotate(45deg) scale(2);
  }
  #right-hamMenu-button.active span:nth-of-type(2) {
    transform: translate(1.7vh, -0.6vh) rotate(-45deg) scale(2);
  }
  #right-hamMenu-back {
    right: -4vh;
  }
  #right-hamMenu-back.active {
    transform: scale(30);
  }
  .right-disappear-animation {
    transform: translateX(4vh);
  }
  .hamMenu-contents {
    text-decoration: none;
  }
}
/*# sourceMappingURL=common.css.map */