@charset "UTF-8";
/*color*/
/* mixinCSS Document */
/*----------common----------*/
/*alt*/
/*hover*/
/*
 各ページ.css（ファイル名変更可）
 本サイト各ページ用CSS
*/
#introArea {
  background-color: #041f3b;
  background: url("../images/common/bg_Bl.jpg") repeat;
  padding-top: 3%;
  position: relative;
}
#introArea:after {
  content: "";
  background: url("../images/common/town1.png") no-repeat center bottom;
  width: 100%;
  height: 0;
  padding-top: 23.42%;
  background-size: contain;
  display: block;
  margin-top: -9%;
}
#introArea h3 {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url("../images/intro/h3tit.png") no-repeat center;
  width: 192px;
  height: 106px;
  margin: 0 auto 3%;
}
#introArea .item01 {
  background: url("../images/common/cloud01.png") no-repeat;
  width: 277px;
  height: 42px;
  position: absolute;
  left: -5%;
  top: 10%;
  z-index: 1;
}
#introArea .item02 {
  background: url("../images/common/cloud02.png") no-repeat;
  width: 344px;
  height: 115px;
  position: absolute;
  right: -5%;
  top: 12%;
  z-index: 1;
}
#introArea .introInner {
  z-index: 100;
  position: relative;
}
#introArea .introInner .introText {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url("../images/intro/intro.png") no-repeat center;
  width: 880px;
  height: 219px;
  margin: -5% auto 1%;
}
#introArea .introInner .image {
  width: 880px;
  margin: 0 auto 3%;
}
#introArea .introInner .image img {
  width: 100%;
}
#introArea .introInner .text {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url("../images/intro/text.png") no-repeat center;
  width: 880px;
  height: 539px;
  margin: auto;
}

/* ---------------------------------
 SP（〜600px）
--------------------------------- */
@media only screen and (max-width: 600px) {
  #introArea .introInner .introText {
    background: url("../images/intro/intro_sp.png") no-repeat center !important;
    width: 92% !important;
    height: 0;
    padding-top: 35.66% !important;
    background-size: contain !important;
    margin-bottom: 4% !important;
  }
  #introArea .introInner .text {
    background: url("../images/intro/text_sp.png") no-repeat center !important;
    width: 100%;
    height: 0;
    padding-top: 136.38% !important;
    background-size: contain !important;
  }
}
/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
  #introArea {
    padding-top: 4%;
  }
  #introArea h3 {
    width: 27.33%;
    height: 0;
    padding-top: 15.09%;
    background-size: contain;
  }
  #introArea .item01 {
    width: 30%;
    height: 0;
    padding-top: 5.36%;
    background-size: contain;
    top: 4%;
  }
  #introArea .item02 {
    width: 30%;
    height: 0;
    padding-top: 10.03%;
    background-size: contain;
    top: 2%;
  }
  #introArea .introInner {
    width: 90%;
    margin: auto;
  }
  #introArea .introInner .introText {
    width: 100%;
    height: 0;
    padding-top: 24.89%;
    background-size: contain;
  }
  #introArea .introInner .image {
    width: 100%;
  }
  #introArea .introInner .text {
    width: 100%;
    height: 0;
    padding-top: 61.25%;
    background-size: contain;
  }
}
/* ---------------------------------
 PC（993px〜）
--------------------------------- */