@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
/*============================================================================

 top

=============================================================================*/
#page-top .obi_txt {
  max-width: 280px;
}

/* mainVisual
-------------------------------------------------------*/
#mainVisual {
  position: relative;
  width: 100%;
  height: calc(100vh - 90px);
  background-image: url(../../images/top/mainphoto.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media screen and (max-width: 767.98px) {
  #mainVisual {
    background-image: url(../../images/top/sp/mainphoto_sp.jpg);
  }
}
#mainVisual #mvTitle {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: auto;
  width: 50%;
  width: 800px;
  width: 50vw;
}
@media screen and (min-width: 768px), print {
  #mainVisual #mvTitle {
    min-width: 560px;
  }
}
@media screen and (max-width: 767.98px) {
  #mainVisual #mvTitle {
    width: 750px;
    width: 75vw;
  }
}
#mainVisual #mvTxt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: auto;
  width: 90%;
  max-width: 1160px;
}

/*============================================================================
 concept
=============================================================================*/
#concept {
  background-image: url(../../images/top/concept_bg.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  padding-bottom: 450px;
}

@media screen and (min-width: 641px) and (max-width: 1000px) {
  #concept {
    padding-bottom: 300px;
  }
}
@media screen and (max-width: 640px) {
  #concept {
    padding-bottom: 160px;
  }
}
/* imagephoto
-------------------------------------------------------*/
#concept #imagePhoto {
  width: 93%;
  max-width: 1160px;
  padding-top: 70px;
  padding-bottom: 200px;
  margin-left: auto;
  margin-right: auto;
}

#concept #imagePhoto ul li {
  width: 18.2%;
  max-width: 200px;
}

@media screen and (min-width: 641px) and (max-width: 1000px) {
  #concept #imagePhoto {
    padding-top: 50px;
    padding-bottom: 130px;
  }
}
@media screen and (max-width: 640px) {
  #concept #imagePhoto {
    padding-top: 20px;
    padding-bottom: 70px;
  }
}
/* concept_in
-------------------------------------------------------*/
#concept #concept_in {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}

#concept #concept_in .font--serif {
  font-size: 3.75em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 767.98px) {
  #concept #concept_in .font--serif {
    font-size: 2.125em;
    white-space: nowrap;
  }
}

#concept #concept_in .txt20 {
  margin-top: 50px;
}
@media screen and (max-width: 767.98px) {
  #concept #concept_in .txt20 {
    margin-top: 30px;
  }
}

/*============================================================================
 topNav
=============================================================================*/
#topNav {
  background-color: #efefef;
  padding-bottom: 20px;
}
@media screen and (max-width: 767.98px) {
  #topNav {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
#topNav.--col3 .inner {
  max-width: 1160px;
}
#topNav.--col3 ul li {
  width: 31.8181818182%;
}
#topNav.--col4 .inner {
  max-width: 1260px;
}
#topNav.--col4 ul li {
  width: 23.75%;
}
#topNav .inner {
  position: relative;
  top: -66px;
  z-index: 10;
}
@media screen and (max-width: 767.98px) {
  #topNav .inner {
    top: auto;
    z-index: 10;
  }
}
#topNav ul li {
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 767.98px) {
  #topNav ul li {
    width: 80% !important;
    margin-inline: auto;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
  }
}
@media screen and (max-width: 767.98px) {
  #topNav ul li + li {
    margin-top: 20px;
  }
}
#topNav ul li a {
  position: relative;
  display: block;
  overflow: hidden;
}
#topNav ul li a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 10px solid rgba(255, 255, 255, 0.5);
  z-index: 2;
}
@media screen and (max-width: 767.98px) {
  #topNav ul li a:before {
    border: 7px solid rgba(255, 255, 255, 0.5);
  }
}
#topNav ul li a .obi_txt {
  z-index: 10;
  position: absolute;
  left: 0;
  top: 10%;
  width: 80.701754386%;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media screen and (max-width: 767.98px) {
  #topNav ul li a .obi_txt {
    font-size: 1.125em;
    padding-top: 1px;
  }
}
#topNav ul li a img {
  position: relative;
}
@media (any-hover: hover) {
  #topNav ul li a img {
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  #topNav ul li a:hover img {
    -webkit-transform: scale(1.07);
            transform: scale(1.07);
    opacity: 0.5;
  }
}

/*============================================================================
 support
=============================================================================*/
#support {
  background-color: #f9f6f2;
  padding-top: 100px;
  padding-bottom: 150px;
}

#support .titleWrap {
  padding-top: 0;
}

#support .titleWrap h3 {
  letter-spacing: 0.03em;
}

#support .flex .flexL {
  width: 38.2%;
  max-width: 420px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#support .flex .flexL p {
  margin-bottom: 20px;
}

#support .flex .flexR {
  width: 52.46%;
  max-width: 640px;
}

@media screen and (max-width: 1000px) {
  #support .inner {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  #support .flex .flexL,
  #support .flex .flexR {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  #support .flex .flexL {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 641px) and (max-width: 1000px) {
  #support {
    padding-top: 70px;
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 640px) {
  #support {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
/*============================================================================
 movie
=============================================================================*/
#movie {
  padding-top: 100px;
  padding-bottom: 150px;
}

#movie .inner .video {
  cursor: pointer;
}

@media screen and (min-width: 641px) and (max-width: 1000px) {
  #movie {
    padding-top: 70px;
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 640px) {
  #movie {
    padding-top: 50px;
    padding-bottom: 70px;
  }
}/*# sourceMappingURL=style_top.css.map */