@charset "UTF-8";

.Lefty {
  margin-right: 6.25vw;
}

.Righty {
  margin-left: 6.25vw;
}

.s-top-contents {
  position: relative;
  margin-top: 80px;
}

.s-top-contents .LR-wrapper {
  background-color: #fff;
  padding: 80px 0 0 0;
  -webkit-box-shadow: 1px 0px 50px -10px rgba(0, 0, 26, 0.2);
          box-shadow: 1px 0px 50px -10px rgba(0, 0, 26, 0.2);
}

.s-top-contents .LR-wrapper .LR-wrapper_inner {
  background-color: #fff;
  padding: 0px 6.25vw 0 0;
  margin: 10px 0 0 0;
  position: relative;
  z-index: 10;
}

.s-top-contents .LR-wrapper .LR-wrapper_inner .s-top-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 30px 0 80px 6.25vw !important;
  width: 100%;
}

.s-top-contents .LR-wrapper .LR-wrapper_inner .s-top-group figure {
  /*-webkit-flex: 1;
						flex: 1;
						margin-right: 6.25vw;*/
  width: 47%;
}

.s-top-contents .LR-wrapper .LR-wrapper_inner .s-top-group figure img {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .s-top-contents .LR-wrapper .LR-wrapper_inner .s-top-group figure {
    width: 100%;
  }
}

.s-top-contents .LR-wrapper .LR-wrapper_inner .s-top-group .s-top-group_block {
  width: 47%;
}

@media screen and (max-width: 640px) {
  .s-top-contents .LR-wrapper .LR-wrapper_inner .s-top-group .s-top-group_block {
    width: 100%;
    padding-top: 50px;
  }
}

.s-top-contents .primary_visual {
  position: relative;
  height: 420px;
  background-image: url("../img/top/primary_bg_01.jpg");
  background-attachment: fixed;
  z-index: -1;
  -webkit-filter: grayscale(0.7);
          filter: grayscale(0.7);
  background-position: top;
  opacity: .5;
}

.s-top-contents .primary_visual:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.s-top-contents .primary_visual img {
  width: 100%;
}

.s-top-contents .primary_visual_md {
  position: relative;
  height: 420px;
  background-image: url("../img/top/primary_bg_02.jpg");
  background-attachment: fixed;
  z-index: -1;
  -webkit-filter: grayscale(0.7);
          filter: grayscale(0.7);
  background-position: center;
  opacity: .5;
}

.s-top-contents .primary_visual_md:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.s-top-contents .primary_visual_md img {
  width: 100%;
}

.center-contents {
  width: 75vw;
  margin: auto;
}

.center-contents .s-top-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
}

.center-contents .s-top-group figure {
  /*-webkit-flex: 1;
			flex: 1;
			margin-right: 6.25vw;*/
  width: 47%;
}

@media screen and (max-width: 640px) {
  .center-contents .s-top-group figure {
    width: 100%;
  }
}

.center-contents .s-top-group figure img {
  width: 100%;
}

.center-contents .s-top-group .s-top-group_block {
  width: 47%;
}

@media screen and (max-width: 640px) {
  .center-contents .s-top-group .s-top-group_block {
    width: 100%;
    padding-bottom: 50px;
  }
}

#TopPage {
  padding-top: 380px;
  position: relative;
}

#TopPage:before {
  /*background: rgba(20, 57, 120, 0.02);
		background-image: radial-gradient(#e1d5aa 30%, transparent 30%);
		background-size: 2px 2px;*/
}

#TopPage h2.MainH2 {
  -webkit-transition: 0.7s ease-in;
  transition: 0.7s ease-in;
  padding: 0 0 0 6.25vw;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 40px;
  line-height: 2.2;
  margin-bottom: 70px;
  font-weight: 600;
  position: fixed;
  top: 150px;
  z-index: 2;
  color: #eee;
  mix-blend-mode: difference;
}

@media screen and (max-width: 640px) {
  #TopPage h2.MainH2 {
    font-size: 28px;
  }
}

#TopPage h2.MainH2 span {
  font-size: 2vw;
}

@media screen and (max-width: 640px) {
  #TopPage h2.MainH2 span {
    font-size: .9em;
  }
}

#TopPage h2.MainH2.fade {
  -webkit-filter: opacity(0);
          filter: opacity(0);
}

#TopPage section {
  padding: 6em 0 6em;
}

.EarlyScroll_Bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 22vw;
  max-width: 350px;
  height: 80vh;
  z-index: -1;
  background-color: #C7D2D9;
}

@media screen and (max-width: 640px) {
  .EarlyScroll_Bg {
    height: 50vh;
  }
}

/*# sourceMappingURL=top.css.map */