@charset "utf-8";
/*------------------------------------------------------------
 common Style
------------------------------------------------------------*/
#gHeader {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 100;
}
#pagePath {
  margin-bottom: 0;
  background: #000;
  padding-top: 81px;
}

.bold {
  font-weight: bold;
}

.colorBlack {
  color: #333 !important;
}

.colorWhite {
  color: #fff !important;
}

.serif {
  font-family: YuMincho, Yu Mincho, "游明朝", serif;
}

.wrap {
  margin: auto;
  width: 94%;
  max-width: 800px;
}

.inlineBlock {
  display: inline-block;
}

main {
  margin-bottom: 0 !important;
  font-feature-settings: "palt";
  letter-spacing: 3px;
}

main img {
  max-width: 100%;
  height: auto;
}

main .image,
main figure {
  position: relative;
}

main .text {
  display: inline-block;
  text-align: justify;
  letter-spacing: .5px;
  line-height: 1.9;
  font-size: 13px;
}

main .image .text,
main figure .text {
  position: absolute;
}

main .commonLinkButton01 {
  margin: auto;
  padding-top: 50px;
  max-width: 290px;
}

@media (min-width:1025px){
  main .button a:hover {
    opacity: .7;
  }
}


/*------------------------------------------------------------
 pc - tablet Style
------------------------------------------------------------*/

main .mainVisual,
main .mainImageArea {
  position: relative;
  background: linear-gradient(90deg, #dae4ee, #dae4ee 50%, #d4e0ec 50%, #d4e0ec);
}

main .mainVisual h2,
main .mainImageArea .text {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 36%;
  max-width: 720px;
  transform: translateX(-50%);
  z-index: 2;
}

main .mainVisual .image,
main .mainImageArea .image {
  margin: auto;
  max-width: 2000px;
}

main section.intro .image01 {
  max-width: 840px;
}

main section.intro .image01 .text {
  left: 12%;
  top: 40.2%;
  width: 31%;
}

main section.intro {
  position: relative;
  background: url(../img/intro-bg.jpg) no-repeat center top;
  background-size: cover;
  overflow: hidden;
  z-index: 1;
}

main section.intro h3 {
  text-align: center;
  font-size: 20px;
  font-weight: normal;
}

main section.intro h3 span {
  display: inline-block;
  margin-top: 10px;
  border-bottom: 1px solid #000;
  letter-spacing: 5px;
  font-size: 200%;
}

main section.intro h3 img {
  display: block;
  position: relative;
  margin: -8px auto -20px;
  max-width: 640px;
  z-index: -1;
}

main .commonArrowArea01 {
  position: relative;
  padding: 90px 0 130px;
  text-align: center;
  background: #fff;
}

main .commonArrowArea01:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 100px;
  left: 50%;
  width: 40px;
  height: 14px;
  background: url(../img/icon-arrow01.png) no-repeat center center;
  background-size: 100% 100%;
  transform: translateX(-50%);
}

main .commonArrowArea01 .text {
  text-align: center;
  letter-spacing: 3px;
}

main .commonArrowArea01 .text01 {
  display: block;
  color: #595153;
  font-size: 20px;
}

main .commonArrowArea01 .text02 {
  display: inline;
  color: #383839;
  font-size: 30px;
  border-bottom: 1px solid #000;
}

main .commonButton01 {
  margin: auto;
  padding-top: 70px;
  max-width: 290px;
  line-height: 1;
  text-align: center;
  letter-spacing: 2px;
  font-size: 13px;
}

main .commonButton01 a {
  display: block;
  position: relative;
  padding: 14px 0 13px;
  color: #fff;
  background: #595153;
}

main .commonButton01 a:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}

main .commonButton01.white a {
  color: #595153;
  background: #fff;
}

main .commonButton01.white a:after {
  border-color: #595153;
}

main .sections {
  position: relative;
  padding-bottom: 100px;
  background: url(../img/section01-bg.jpg) no-repeat center top;
  background-size: cover;
  z-index: 1;
}

main .sections:after {
  content: '';
  display: block;
  position: absolute;
  top: 36%;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .5), transparent);
  z-index: -1;
}

main .sections h4 {
  max-width: none;
  text-align: center;
}

main .sections h4 img {
  width: auto;
  height: 70px;
  opacity: .5;
}

main .sections .image01 .text01 {
  padding: 15px 0;
  width: 48%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
  line-height: 1.7;
  font-size: 17px;
}

main .sections .image01 .text02 {
  width: 48.6%;
}

main .sections .image02 .text .annotation {
  display: block;
  font-size: 13px;
  color: #595153;
}

main .sections .image02 .text01,
main .sections .image02 .text03 {
  top: 10.6%;
  left: 20.7%;
  width: 46%;
  line-height: 1.7;
  font-size: 19px;
}

main .sections .image02 .text02,
main .sections .image02 .text04 {
  top: 32%;
  left: 8.8%;
  width: 58.5%;
  line-height: 1.9;
  font-size: 15px;
}

main .sections .image02 .text03 {
  top: 55.2%;
}

main .sections .image02 .text04 {
  top: 76.5%;
}

main .section01 .image01 .text01 {
  left: 13%;
  top: 44%;
}

main .section01 .image01 .text02 {
  left: 12.8%;
  top: 61%;
}

main .section02 {
  background-image: url(../img/section02-bg.jpg);
}

main .section02 .image01 .text01 {
  left: 37%;
  top: 44%;
}

main .section02 .image01 .text02 {
  left: 36.8%;
  top: 61%;
}

main .section03 {
  padding-bottom: 320px;
  background-image: url(../img/section03-bg.jpg);
}

main .section03:after {
  display: none;
}

main .section03 .image01 .text01 {
  left: 10%;
  top: 48.5%;
}

main .section03 .image01 .text02 {
  left: 9.8%;
  top: 65.5%;
}

main .section03 .image02 .text01 {
  top: 10%;
}

main .section03 .image02 .text02 {
  top: 30.2%;
}

main .section03 .image02 .text03 {
  top: 58%;
}

main .section03 .image02 .text04 {
  top: 78.3%;
}

main .section04 {
  position: relative;
  padding-top: 100px;
  padding-bottom: 0 !important;
  background: #080808;
}

main .section04:after {
  display: none;
}

main .section04 h4 {
  position: absolute;
  top: -220px;
  left: 50%;
  max-width: 700px;
  transform: translateX(-50%);
  z-index: 2;
}

main .section04 h4 img {
  opacity: 1;
}

main .section04 .image {
  position: relative;
  right: -10%;
  max-width: 1200px;
}

main .section04 .button {
  position: absolute;
  top:  80%;
  left: 0;
  /*right: 38%;*/
  width: 100%;
  padding: 0;
  /*transform: translateX(-50%);*/
}

main .section04 h4 img {
  width: 100%;
  height: auto;
}

main .mainImageArea .text {
  top: 19.5%;
}

main .mainImageArea .button {
  position: absolute;
  top:  86%;
  left: 50%;
  width: 100%;
  padding: 0;
  transform: translateX(-50%);
}



@media all and (max-width: 1024px) {
}


/*------------------------------------------------------------
 sp Style
------------------------------------------------------------*/

@media all and (max-width: 767px) {
  main {
    margin-bottom: 50px !important;
  }

  main .text {
    font-size: 3.5vw;
  }

  main .mainVisual h2,
  main .mainImageArea .text {
    top: 12%;
    left: 20%;
    width: 77%;
    max-width: none;
    transform: none;
  }

  main section.intro .image01 {
    margin-bottom: 15vw;
    max-width: 840px;
  }

  main section.intro .image01 .text {
    top: 62.5%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
  }

  main section.intro {
    background-image: url(../img/sp/intro-bg.png);
    background-color: #e7ecf0;
    background-position: center top;
    background-size: 100% auto;
  }

  main section.intro h3 {
    padding-bottom: 7vw;
    font-size: 5.5vw;
  }

  main section.intro h3 span {
    margin-top: 5vw;
    font-size: 180%;
  }

  main section.intro h3 img {
    display: block;
    margin: auto;
    padding-bottom: 16.3vw;
    width: 100%;
    max-width: none;
  }

  main .commonArrowArea01 {
    padding: 15vw 0 30vw;
  }

  main .commonArrowArea01:after {
    bottom: 18vw;
    width: 12vw;
    height: 4vw;
  }

  main .commonArrowArea01 .text01 {
    font-size: 5vw;
  }

  main .commonArrowArea01 .text02 {
    font-size: 6vw;
  }

  main .commonButton01 {
    padding-top: 3vw;
    max-width: 70vw;
    font-size: 4vw;
  }

  main .commonButton01 a {
    padding: 5vw 0 5vw;
  }

  main .commonButton01 a:after {
    right: 4vw;
    width: 3vw;
    height: 3vw;
    margin-top: -1.5vw;
  }

  main .sections {
    padding-bottom: 18vw;
    background-image: url(../img/sp/section01-bg.png);
    background-color: #eeefee;
    background-position: center top;
    background-size: 100% auto;
  }

  main .sections:after {
    display: none;
  }

  main .sections h4 {
    padding-bottom: 18vw;
    width: 85%;
  }

  main .sections h4 img {
    width: 100%;
    height: auto;
    opacity: 1;
  }

  main .sections .image01 {
    margin-bottom: 7vw;
  }

  main .sections .image01 .text01 {
    left: 50% !important;
    padding: 3vw 0;
    width: 70%;
    font-size: 4.3vw;
    transform: translateX(-50%);
  }

  main .sections .image01 .text02 {
    left: 50% !important;
    width: 70%;
    transform: translateX(-50%);
  }

  main .sections .image02 .text .annotation {
    font-size: 2vw;
    line-height: 1.2;
  }

  main .sections .image02 .text01,
  main .sections .image02 .text03 {
    top: 10%;
    left: 33.5%;
    width: 54%;
    line-height: 1.7;
    font-size: 3.5vw;
  }

  main .sections .image02 .text02,
  main .sections .image02 .text04 {
    top: 18%;
    left: 21%;
    width: 60%;
    line-height: 2;
    font-size: 3.3vw;
  }

  main .sections .image02 .text03 {
    top: 50.8%;
  }

  main .sections .image02 .text04 {
    top: 58.7%;
  }

  main .sections .image02 {
    padding-left: 3vw;
  }

  main .section01 .image01 .text01 {
    top: 65%;
  }

  main .section01 .image01 .text02 {
    top: 76.8%;
  }

  main .section02 {
    background-image: url(../img/sp/section02-bg.png);
    background-color: #e7ecf0;
  }

  main .section02 .image01 .text01 {
    top: 69.5%;
  }

  main .section02 .image01 .text02 {
    top: 79.5%;
  }

  main .section02 .image02 .text01 {
    top: 9.8%;
  }

  main .section02 .image02 .text02 {
    top: 17.5%;
  }

  main .section02 .image02 .text03 {
    top: 49.4%;
  }

  main .section02 .image02 .text04 {
    top: 57.2%;
  }

  main .section03 {
    padding-bottom: calc(100px + 11%);
    background-image: url(../img/sp/section03-bg.png);
  }

  main .section03 .image01 .text01 {
    top: 68%;
  }

  main .section03 .image01 .text02 {
    top: 77.2%;
  }

  main .section03 .image02 .text01 {
    top: 9.4%;
  }

  main .section03 .image02 .text02 {
    top: 17%;
  }

  main .section03 .image02 .text03 {
    top: 50.6%;
  }

  main .section03 .image02 .text04 {
    top: 58%;
  }

  main .section04 {
    margin-top: 0;
    padding-top: 40%;
    background: #060606;
  }

  main .section04 h4 {
    top: -11%;
    width: 90%;
    padding-bottom: 0;
    max-width: none;
  }

  main .section04 .image {
    right: 0;
    max-width: none;
  }

  main .section04 .button {
    top: 167vw;
    right: auto;
    left: 50%;
  }

  main .mainImageArea .text {
    top: 13%;
    left: 16%;
    width: 80%;
  }

  main .mainImageArea .button {
    display: none;
  }
}