@charset "UTF-8";
/* CSS Document */
* {
  padding: 0;
  margin: 0;
  font-size: 14px;
}
html, body {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
html, body {
  color: #161616;
  width: 100%;
  height: 100%;
  z-index: 0;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 230%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upsidedouwn span {
  display: inline-block;
  transform: scaleY(-1);
  padding-bottom: 3px
}
#loading_container {
  width: 100px;
  height: 100px;
  position: absolute;
  margin: auto;
  display: block;
}
.L {
  position: absolute;
  left: 5%;
  top: 50%;
  -webkit-animation: L 2s infinite;
}
.O {
  position: absolute;
  left: 18%;
  top: 50%;
  -webkit-animation: O 2s infinite;
  -webkit-animation-delay: 100ms;
}
.A {
  position: absolute;
  left: 35%;
  top: 50%;
  -webkit-animation: A 2s infinite;
  -webkit-animation-delay: 200ms;
}
.D {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: D 2s infinite;
  -webkit-animation-delay: 300ms;
}
.I {
  position: absolute;
  left: 65%;
  top: 50%;
  -webkit-animation: I 2s infinite;
  -webkit-animation-delay: 400ms;
}
.N {
  position: absolute;
  left: 75%;
  top: 50%;
  -webkit-animation: N 2s infinite;
  -webkit-animation-delay: 500ms;
}
.G {
  position: absolute;
  left: 90%;
  top: 50%;
  -webkit-animation: G 2s infinite;
  -webkit-animation-delay: 600ms;
}
@-webkit-keyframes L {
  0% {
    top: 0px;
    opacity: 0;
  }
  50% {
    top: 50px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@-webkit-keyframes O {
  0% {
    top: 0px;
    opacity: 0;
  }
  50% {
    top: 50px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@-webkit-keyframes A {
  0% {
    top: 0px;
    opacity: 0;
  }
  50% {
    top: 50px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@-webkit-keyframes D {
  0% {
    top: 0px;
    opacity: 0;
  }
  50% {
    top: 50px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@-webkit-keyframes I {
  0% {
    top: 0px;
    opacity: 0;
  }
  50% {
    top: 50px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@-webkit-keyframes N {
  0% {
    top: 0px;
    opacity: 0;
  }
  50% {
    top: 50px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
@-webkit-keyframes G {
  0% {
    top: 0px;
    opacity: 0;
  }
  50% {
    top: 50px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}
/* ホバー */
img a {
  transition: 0.3s;
}
img a:hover {
  opacity: 0.5;
}
/* スマフォ */
@media only screen and (max-width: 750px) {
  html, body {
    line-height: 130%;
  }
}
a:hover img {
  transform: scale(1.03); /*画像の拡大率*/
  transition-duration: 0.1s; /*変化に掛かる時間*/
}
/* スマホ　改行 */
.sp_inline {
  display: none
}
@media screen and (max-width:640px) {
  .sp_inline {
    display: inline
  }
}
/* パソコン　改行 */
.pc_inline {
  display: inline
}
@media screen and (max-width:600px) {
  .pc_inline {
    display: none
  }
}
/* 画像　レスポンシブ */
@media (max-width: 640px) {
  .pc {
    display: none !important;
    ;
  }
  .sp {
    display: block !important;
    ;
  }
}
@media (min-width: 641px) {
  .pc {
    display: block !important;
    ;
  }
  .sp {
    display: none !important;
    ;
  }
}

.b-20 {
  width: 4%;
  float: left;
  margin-left: -18px;
}
.b-90 {
  width: 25%;
  float: left;
  margin-left: -7px;
}
.b-300 {
  width: 71%;
  float: left;
}
/* パソコンの画像 */
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
/* スマフォ画像 */
@media only screen and (max-width: 750px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
/* ページトップへ */
#category {
  position: fixed;
  bottom: 120px;
  right: 20px;
}
#category i {
  padding-top: 6px
}
#category a {
  background-color: #D6D6D6;
  padding: 0;
  margin: 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
}
#category a:hover {
  text-decoration: none;
  opacity: 0.7;
}
/* ページトップへ */
#pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#pagetop i {
  padding-top: 6px
}
#pagetop a {
  background-color: #8B9FB3;
  padding: 0;
  margin: 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
}
#pagetop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.white-grade-mask-container {
  padding: 0px;
  margin: 0px;
}
.white-grade-mask {
  position: relative;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: auto;
  padding-top: 70px;
  background: linear-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, .9) 20px, rgba(255, 255, 255, 1) 40px);
}
.container-button {
  height: 100px;
  margin-top: 200px;
  padding-bottom: 200px
}
.button-gray {
  width: auto;
  margin: 0 auto;
  text-align: center;
}
.button-gray a {
  border: solid 1px #333;
  padding: 16px 72px;
  text-align: center;
}
/* youtube　サムネイル用 */
.global_wrapper {
  width: 100%;
  margin: 0 auto;
}
.youtube {
  position: relative;
  width: 100%;
  height: 100%;
}
.player {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
/* youtube　レスポンシブ */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/* movie 表示 */
.box-black {
  background: #242424;
  padding: 5px 0 5px 5px;
  color: #fff;
  width: 70px;
  height: 18px;
  margin: 10px;
  text-align: center;
  float: left;
}
.triangle {
  width: auto;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #fff;
  float: left;
}
.triangle-text {
  float: left;
  height: 10px;
  width: auto;
  margin-top: -10px
}
.movie-text {
  float: left;
  width: auto;
  margin-top: 6px;
  font-size: 12px
}
/* スマフォ画像 */
@media only screen and (max-width: 750px) {
  .triangle-text {
    margin-top: -16px
  }
  .movie-text {
    margin-top: 2px
  }
}
/* 見出し */
.midashi {
  width: 100%;
  margin: 160px auto 80px;
}
.h1-en {
  font-size: 26px;
  color: #8C8C8C;
}
.h1-jp {
  font-size: 16px;
  color: #8C8C8C;
}
/*フッター*/
footer a {
  text-decoration: none;
  color: inherit;
  font-size: 10px
}
footer a:hover {
  text-decoration: none;
  color: #004400
}
.f-menu {
  width: 200px;
  margin: auto;
}
.f-menu li {
  list-style: none;
  float: left;
  margin-left: 20px;
}