@charset "UTF-8";
@import url(../../css/common.css);
/*==================================================================*/
/* contact style css　*/
/*==================================================================*/
/* Page Settings */
/*------------------------------------*/
/* titlearea
---------------------------------------- */
#title {
  background: url("../image/title_bg.jpg") center 100% no-repeat;
  background-size: cover;
}
#title h1 {
  width: 100%;
  white-space: nowrap;
}

.t-area span {
  font-size: 0.6em;
}

.catch-title {
  margin-bottom: 4em;
}
.catch-title h3 {
  margin-bottom: 2%;
  font-size: 2.5em;
  color: #005bac;
  text-align: center;
}
.catch-title h3 span {
  font-size: 0.6em;
}
.catch-title p {
  text-align: center;
}

.product p {
  margin-bottom: 4em;
  text-align: center;
}
.product p.img-area {
  margin-bottom: 8em;
}
.product p.img-area img {
  width: 100%;
}

.flow {
  zoom: 1;
}
.flow:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  height: 0;
}
.flow .sp-title {
  display: none;
}
.flow .flow-box01 {
  background: url("../image/bg_flow01.jpg") no-repeat 0 0;
  background-size: cover;
}
.flow .flow-box02 {
  background: url("../image/bg_flow02.jpg") no-repeat 0 0;
  background-size: cover;
}
.flow .flow-box03 {
  background: url("../image/bg_flow03.jpg") no-repeat 0 0;
  background-size: cover;
}
.flow .detail-area {
  position: relative;
  background: url(../image/arrow01.png) no-repeat 0 100%;
  width: 90%;
  padding-left: 210px;
}
.flow .detail-area-last {
  position: relative;
  background: url(../image/arrow03.png) repeat-y 0 100%;
  width: 90%;
  padding-left: 210px;
}
.flow p.title {
  position: absolute;
  top: 0;
  left: 0;
}
.flow p.setumei {
  padding: 2% 0 1% 2%;
  font-size: 1.5em;
}
.flow .detail-box {
  width: 90%;
}
.flow .detail-box p img {
  width: 100%;
}
.flow .detail-box .photo-area {
  padding-top: 1%;
  /* movie
  ---------------------------------------- */
}
.flow .detail-box .photo-area dl {
  width: 100%;
  padding: 0 0 2em 2em;
}
.flow .detail-box .photo-area dl dt {
  margin-bottom: 1em;
}
.flow .detail-box .photo-area dl dd {
  text-indent: -0.5em;
}
.flow .detail-box .photo-area .airjet {
  margin: 0 0 2em 2em;
}
.flow .detail-box .photo-area .airjet .movie {
  margin-bottom: 1em;
  line-height: 1;
}
.flow .detail-box .photo-area .airjet .movie.sp {
  display: none;
}
.flow .detail-box .photo-area .airjet .movie iframe {
  width: 100%;
}
.flow .detail-box .photo-area .airjet .movie video {
  width: 100%;
  height: 100%;
}
.flow .detail-box .photo-area .airjet p {
  text-indent: -0.5em;
}

@media screen and (max-width: 767px) {
  .catch-title {
    width: 94%;
    margin: 0 auto 4em;
  }
  .catch-title h3 {
    margin-bottom: 2%;
    font-size: 2em;
    line-height: 1.2em;
    color: #005bac;
    text-align: left;
  }
  .catch-title p {
    text-align: left;
  }
  .catch-title p .fig {
    text-align: center;
  }

  .product p.img-area {
    margin-bottom: 2em;
  }

  .flow .sp-title {
    width: 100%;
    display: block;
    background: #005bac;
  }
  .flow .sp-title p {
    width: 30%;
    padding: 0 2%;
    background: #262626;
    font-size: 1.5em;
    color: #fff;
  }
  .flow .arrow {
    display: none;
  }
  .flow .detail-area {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: none;
  }
  .flow .detail-area p {
    padding: 2% 0 1% 2%;
    font-size: 1.2em;
  }
  .flow .detail-area p.title {
    display: none;
  }
  .flow .detail-area-last {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: none;
  }
  .flow .detail-area-last p {
    padding: 2% 0 1% 2%;
    font-size: 1.2em;
  }
  .flow .detail-area-last p.title {
    display: none;
  }
  .flow .detail-box {
    width: 85%;
    margin: 0 auto;
  }
  .flow .detail-box p img {
    width: 100%;
  }
  .flow .detail-box .photo-area {
    padding-top: 4%;
  }
  .flow .detail-box .photo-area dl {
    width: 100%;
    padding: 0 0 2em 0;
  }
  .flow .detail-box .photo-area dl dt {
    margin-bottom: 1em;
  }
  .flow .detail-box .photo-area dl dt img {
    width: 100%;
  }
  .flow .detail-box .photo-area dl dd {
    width: 96%;
    margin: 0 auto;
    text-align: left;
  }
  .flow .detail-box .photo-area .airjet {
    margin: 0 0 1em;
  }
  .flow .detail-box .photo-area .airjet .movie.sp {
    display: block;
    margin: 0 auto;
  }
  .flow .detail-box .photo-area .airjet .movie.pc {
    display: none;
  }
  .flow .detail-box .photo-area .airjet p {
    font-size: 1em;
  }
}