@charset "UTF-8";

/*----------------------------------------共通----------------------------------------*/
body {
  /******ゴシック******/
  font-family: "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN W3",
    "Arial", "Yu Gothic", "Meiryo", sans-serif;
  /* font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; */
  /******明朝体******/
  /* font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN W3", "Yu Mincho", "MS PMincho", serif; */
  /* font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; */
  color: #000;
  font-size: 1.6rem;
}

.container {
  min-height: 100vh;
  position: relative;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

section {
  padding: 5em 3% 0;
}

.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin: 3% auto;
}

.youtube img {
  width: 100%;
}

.youtube iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 768px) {}

/*----------------------------------------ローディング---------------------------------------*/
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1s infinite ease-in-out;
}

@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/*----------------------------------------header----------------------------------------*/
header {
  background: #fff;
}

header .inner {
  margin: 1em auto;
}

header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

header h2 {
  width: 30%;
  max-width: 300px;
}

header .logo {
  width: 25%;
  right: 0;
  top: 15%;
}

header .tel {
  width: 14%;
  right: 26%;
  top: 15%;
}

header ul li {
  font-weight: bold;
  margin: 0 1em 0 0;
}

header ul li a {
  color: #000;
}

header ul li a span {
  color: #fff;
  background: #f2792d;
  padding: 0.5em 1em;
}

header ul li a span.japan {
  background: #93b131;
}

header .fixed {
  position: fixed;
  max-width: 1000px;
  background: #fff;
}

/*----------------------------------------共通----------------------------------------*/
#slider {
  padding: 5em 0 0;
  overflow: hidden;
}

#slider .box {
  padding: 2em 0;
}

/* #slider .box:not(:last-child) {
  margin: 0 auto 2em;
} */

#slider .box.menu {
  background: #009845;
}

#slider .box.expo {
  background: #0068b7;
  position: relative;
  overflow: hidden;
}

#slider .box h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 1em;
  margin: 0 0 1em;
}

#slider .box.menu h2 {
  color: #fff;
}

#slider .box.expo h2 {
  color: #fff;
}

#slider .box.expo h3 {
  color: #fff;
  font-size: 1.6rem;
  font-weight: normal;
  text-align: center;
  margin: -1em 0 1em;
}

#slider .box .swiper-slide {}

#slider .box .swiper-slide img {
  width: 100%;
}

/*----------------------------------------footer----------------------------------------*/
footer {
  position: relative;
  /* background: url(..img/common/footer_back.png); */
  background-position: center;
  padding: 1em;
  overflow: hidden;
}

footer .footer {
  position: absolute;
  width: 150%;
  height: 400%;
  top: 200%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0.5px solid;
  background: #d6ad53;
  border-radius: 100%;
  z-index: -1;
}

footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

footer ul li {
  font-weight: bold;
  margin: 0 5px;
}

footer ul li a {
  color: #000;
}