@charset "utf-8";
* {
  padding: 0;
  margin: 0
}

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4
}

*,
::before,
::after {
    background-repeat: no-repeat;
    box-sizing: inherit
}

::before,
::after {
    text-decoration: inherit;
    vertical-align: inherit
}


@keyframes motion-title-bg {
    0% {
        height: 0%
    }

    100% {
        height: 100%
    }
}

@keyframes motion-title-bg2 {
    0% {
        width: 0%
    }

    100% {
        width: 100%
    }
}

@keyframes motion-title-bg3 {
    0% {
        height: 0%
    }

    100% {
        height: 100%
    }
}

html {
  font-family: YakuHanJPs_Noto, "Noto Sans JP", sans-serif;
  text-align: center;
  overflow-y: scroll;
}

body {
  font-style: normal;
  counter-reset: num;
  color: #000;
}

hr {
  overflow: visible;
  height: 0
}

details,
main {
  display: block;
}

.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-table;
}

/*\*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

ul,
ol {
  list-style-type: none;
}

a {
  background-color: transparent
}

a:active,
a:hover {
  outline-width: 0
}

#wrapper {
    width: 100%;
}
a {
  text-decoration: none;
  color: currentColor;
}
header {
  width: 100%;
}

@media screen and (max-width: 767px) {
  #header h1 {
    width: 35%;
    max-width: 150px;
    margin-left: 20px;
    margin-top: 5px;
  }
  #header h1 img {
    width: 100%;
  }
  .spNone {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  #header h1 {
    width: 17%;
    margin-left: 30px;
  }
  #header h1 img {
    width: 100%;
  }
  .mt_no {
    margin-top: -10px;
  }
  .pcNone {
    display: none;
  }
}