@charset "UTF-8";
@import "../../../../../css/common.css";
/*==================================================================*/
/* style css　*/
/*==================================================================*/
/* concept
---------------------------------------------------------------------------- */
#concept {
  /* ヘッダー*/
}
#concept header .header-in nav ul li.nav_concept a {
  border-bottom: 4px solid #f21c00;
  padding-bottom: 4px !important;
}
#concept header .header-in nav ul li.nav_concept a.hvr-underline-reveal:before {
  background: none !important;
}
#concept .title-area {
  background: url("../concept/image/bg_concept.jpg") no-repeat 100% 0%;
  background-attachment: fixed;
  background-size: 100%;
}
#concept .yume {
  width: 100%;
  margin-bottom: 7em;
  padding-bottom: 6em;
  text-align: center;
}
#concept .yume h2 {
  margin-bottom: 1em;
  font-weight: bold;
  font-size: 2.5em;
}
#concept .history {
  position: relative;
  padding: 2em 0 10em 0;
  /* clear hack */
}
#concept .history .inblock .box {
  position: absolute;
  top: 0;
}
#concept .history .inblock #box1 {
  top: -10%;
  left: 10%;
  z-index: -1;
  width: 50%;
}
#concept .history .inblock #box2 {
  top: 50%;
  left: 38%;
  z-index: -2;
}
#concept .history .inblock #box3 {
  top: 200px;
  left: 50px;
  z-index: -3;
  width: 30%;
}
#concept .history .inblock .txt {
  width: 44%;
  float: right;
  padding: 4em 1em 0 0;
  line-height: 2.2em;
  text-shadow: -1px -1px 0px #fff, 1px -1px 0px #fff, 1px 1px 0px #fff, -1px 1px 0px #fff;
}
#concept .history .inblock .txt em {
  font-weight: bold;
  font-size: 1.5em;
  display: block;
  margin-bottom: 1em;
}
#concept .history .inblock {
  zoom: 1;
}
#concept .history .inblock:after {
  content: ".";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}
#concept .photo {
  width: 100%;
}
#concept .photo img {
  width: 100%;
}
#concept .workflow {
  width: 100%;
  padding: 6em 0;
  background: url("../concept/image/bg_workflow.gif") repeat 0 0;
  background-attachment: fixed;
}
#concept .workflow h2 {
  text-align: center;
}
#concept .workflow .step dl {
  margin-bottom: 1.5em;
}
#concept .workflow .step dl dt {
  display: inline-block;
  margin-right: 20px;
}
#concept .workflow .step dl dd {
  display: inline-block;
  font-weight: bold;
  font-size: 1.8em;
  line-height: 1em;
}
#concept .workflow .step dl dd span {
  display: block;
  font-size: 0.6em;
  color: #f21c00;
}
#concept .workflow .l-area {
  width: 50%;
  margin: 0 auto 0 0;
}
#concept .workflow .l-area dl {
  background: url("../concept/image/line.gif") no-repeat 100% 30%;
  background-size: 30%;
}
#concept .workflow .l-area p {
  padding-right: 2em;
}
#concept .workflow .r-area {
  width: 53%;
  margin: 0 0 0 auto;
  text-align: right;
}
#concept .workflow .r-area dl {
  background: url("../concept/image/line.gif") no-repeat 10% 35%;
  background-size: 30%;
}
#concept .workflow .r-area p {
  padding-left: 4em;
  text-align: left;
}

/** timeline box structure **/
.timeline {
  list-style: none;
  padding: 20px auto 20px;
  position: relative;
}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 5px;
  background-color: #000;
  left: 50%;
  margin-left: -1.5px;
}

.tldate {
  display: block;
  width: 200px;
  background: #414141;
  border: 3px solid #212121;
  color: #ededed;
  margin: 0 auto;
  padding: 3px 0;
  font-weight: bold;
  text-align: center;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.35);
}

.timeline li {
  margin-bottom: 25px;
  position: relative;
}

.timeline li:before, .timeline li:after {
  content: " ";
  display: table;
}

.timeline li:after {
  clear: both;
}

.timeline li:before, .timeline li:after {
  content: " ";
  display: table;
}

/** timeline panels **/
.timeline li .timeline-panel {
  padding: 20px;
  position: relative;
}

/** timeline circle icons **/
.timeline li .tl-circ {
  position: absolute;
  top: 23px;
  left: 50%;
  text-align: center;
  background: #fff;
  color: #fff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-left: -16px;
  border: 10px solid #000;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  z-index: 99999;
}

/** timeline content **/
.tl-heading h4 {
  margin: 0;
  color: #c25b4e;
}

.tl-body p, .tl-body ul {
  margin-bottom: 0;
}

.tl-body > p + p {
  margin-top: 5px;
}

@media screen and (max-width: 1025px) {
  .title-area {
    background: url("../concept/image/bg_concept.jpg") no-repeat 100% 0%;
    background-attachment: scroll !important;
    background-size: cover !important;
  }
}
@media screen and (max-width: 769px) {
  /*===========================================================================*/
  /*  media quary:767px  */
  /*===========================================================================*/
  .yume {
    margin-bottom: 0 !important;
  }
  .yume h2 {
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 2.5em;
  }
  .history {
    position: static !important;
    padding: 0;
    /* clear hack */
  }
  .history .inblock .photo-area {
    margin: 0 !important;
    padding: 0 !important;
    height: 50vh;
    position: relative !important;
  }
  .history .inblock .photo-area .box {
    position: absolute;
  }
  .history .inblock .photo-area #box1 {
    top: 0 !important;
    left: 0 !important;
    z-index: -1;
    width: auto !important;
  }
  .history .inblock .photo-area #box2 {
    top: 50% !important;
    left: 58% !important;
    z-index: 1 !important;
  }
  .history .inblock .photo-area #box3 {
    top: 56% !important;
    left: 50px;
    z-index: -3;
    width: 30%;
  }
  .history .inblock .txt {
    margin: 0 auto 2em !important;
    width: 100% !important;
    float: none !important;
    padding: 0;
    line-height: 2.2em;
    text-shadow: -1px -1px 0px #fff, 1px -1px 0px #fff, 1px 1px 0px #fff, -1px 1px 0px #fff;
  }
  .history .inblock .txt em {
    font-weight: bold;
    font-size: 1.5em;
    display: block;
    margin-bottom: 1em;
  }
  .history .inblock {
    zoom: 1;
  }
  .history .inblock:after {
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
  }
  .workflow {
    width: 100%;
    padding: 6em 0;
    background: url("../concept/image/bg_workflow.gif") repeat 0 0;
    background-attachment: fixed;
  }
  .workflow h2 {
    text-align: center;
  }
  .workflow .l-area {
    width: 100% !important;
    margin: 0 auto 0 0;
  }
  .workflow .l-area dl {
    background: none !important;
  }
  .workflow .l-area p {
    padding-right: 0;
  }
  .workflow .r-area {
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .workflow .r-area dl {
    background: none !important;
  }
  .workflow .r-area p {
    padding-left: 0 !important;
    text-align: left;
  }
  /** timeline box structure **/
  .timeline {
    list-style: none;
    padding: 20px auto 20px;
    position: static !important;
  }
  .tl-circ {
    display: none;
  }
  .timeline:before {
    top: 0;
    bottom: 0;
    position: static;
    content: " ";
    width: 5px;
    background-color: none !important;
    left: 50%;
    margin-left: -1.5px;
  }
  .timeline li:before, .timeline li:after {
    content: " ";
    display: table;
  }
  .timeline li:after {
    clear: both;
  }
  .timeline li:before, .timeline li:after {
    content: " ";
    display: table;
  }
  /** timeline panels **/
  .timeline li .timeline-panel {
    padding: 20px;
    position: relative;
    background: #efefef;
  }
  /** timeline circle icons **/
  .timeline li .tl-circ {
    position: absolute;
    top: 23px;
    left: 50%;
    text-align: center;
    background: #fff;
    color: #fff;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin-left: -16px;
    border: 10px solid #000;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    z-index: 99999;
  }
}
@media screen and (max-width: 479px) {
  /*===========================================================================*/
  /*  media quary:479px  */
  /*===========================================================================*/
  .yume {
    margin-bottom: 0em;
    padding-bottom: 0 !important;
    text-align: left !important;
  }
  .yume h2 {
    font-size: 1.8em !important;
  }
  .history {
    padding: 2em 0 3em 0 !important;
  }
  .history .inblock .photo-area {
    height: 40vh !important;
  }
  .history .inblock .photo-area #box1 {
    width: 90% !important;
  }
  .history .inblock .photo-area #box2 {
    top: 60% !important;
    left: 50% !important;
  }
  .history .inblock .photo-area #box3 {
    top: 60% !important;
    left: 50px;
    z-index: -3;
    width: 30%;
  }
  .photo {
    margin: 0 auto 4em;
  }
  .workflow {
    padding: 0 10px !important;
  }
  .workflow h2 {
    font-size: 2em;
  }
  .workflow .timeline-panel {
    width: 100% !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }
  .workflow .inblock {
    width: 98% !important;
  }
  .workflow .l-area dl {
    background-size: 59%;
  }
  .workflow .l-area p {
    padding-right: 0.5em !important;
  }
  .workflow .r-area dl {
    background: url("../concept/image/line.gif") no-repeat 10% 68%;
    background-size: 59%;
  }
  .workflow .r-area p {
    padding-left: 2.5em !important;
  }
  .workflow dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .workflow dl dt {
    width: 10%;
  }
  .workflow dl dt img {
    width: auto !important;
    max-height: 35px !important;
  }
  .workflow dl dd {
    width: 90%;
    font-size: 1.2em !important;
  }
}