@charset "utf-8";

main {
  position: relative;
  background: #fff;
  padding: 0 0 0.1px;
  margin-bottom: 50px;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}

#conceptArea {
  padding: 0.1px 0 0;
  background: url(../img/concept/bg.jpg) no-repeat top center / cover;
  overflow: hidden;
}
#conceptArea .txt_box {
  background: rgba(0, 0, 0, 0.6);
  width: calc(100% - 100px);
  margin: 0 auto;
  color: #fff;
  outline: 1px solid #ac8450;
  outline-offset: -10px;
  padding: 4.5%;
  letter-spacing: 0.1em;
  margin: 10% auto;
}
#conceptArea .txt_box .head {
  width: 29.23076923%;
  max-width: 380px;
  margin: 0 auto;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}
#conceptArea .txt_box .subhead {
  display: block;
  font-size: min(2.2vw, 30px);
  margin: 6% auto 2%;
  /*writing-mode: vertical-rl;
  line-height: 2;*/
  line-height: 1.7;
  letter-spacing: 0.15em;
  text-align: center;
  color: #ece3ba;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}
#conceptArea .txt_box .copy {
  font-size: min(1.1vw, 15px);
  line-height: 2;
  text-align: center;
}
#conceptArea .txt_box .copy .line {
  display: inline-block;
  width: 3em;
  height: 1px;
  background: #fff;
  vertical-align: middle;
}
#conceptArea .facade {
  width: 53.28571429%;
  margin: 0 auto;
}

@media only screen and (max-width : 1024px) {

  #conceptArea .txt_box .head {
    width: 43%;
    padding: 2% 0 1%;
  }


}

@media only screen and (max-width : 767px) {

  #conceptArea .txt_box {
    width: 90%;
    outline-offset: -5px;
    padding: 10% 5%;
    margin: 10% auto;
  }
  #conceptArea .txt_box .head {
    width: 65%;
    padding: 0;
  }
  #conceptArea .txt_box .subhead {
    font-size: 17px;
    line-height: 1.75;
    margin: 30px auto 15px;
  }
  #conceptArea .txt_box .copy {
    font-size: 13px;
    line-height: 1.75;
    text-align: justify;
  }
  #conceptArea .txt_box .copy .line {
    width: 4.5em;
    height: 1px;
    transform: scale(0.7);
    margin: -0.15em -0.5em 0 -0.8em;
  }
  #conceptArea .facade {
    width: 76%;
  }

}