.videoBtn::before, .aboutArea .textBox, .portfolioList .Img, .pcList .Img, .newsList .Img, .portfolioList .Txt, .pcList .Txt, .pcList .itemBox .items, .pcList .leftBox, .pcList .rightBox, .newsList .item, .characteristicArea .wrap > .Img, .characteristicArea .wrap > .Txt, .characteristicList > li {
  box-sizing: border-box;
}

.titleBox em span, .titleBox h2 span, #banner .wrap .title, .bannerLogoBox svg, .bannerLogoBox h2::before, .bannerLogoBox h2 span, .bannerVideoBox, .closeVideoBtn, .scrollDownBtn::before, .bgLogoRound, .aboutArea .textBox, .aboutArea .titleBox h1, .aboutArea .Txt, .portfolioClassList, #portfolioDataBox, .portfolioList .Img a::before, .portfolioList .Img a::after, .pcList .Img a::before, .pcList .Img a::after, .newsList .Img a::before, .newsList .Img a::after, .portfolioList .Img img, .pcList .Img img, .newsList .Img img, .portfolioList .Txt p, .pcList .Txt p, .portfolioList .mClassTitle, .pcList .mClassTitle, .newsList, .newsList .Img::before, .characteristicArea .wrap > .Img::before, .characteristicList > li, .characteristicList svg {
  transition: all .5s ease-out;
}

.titleBox em span, .titleBox h2 span, #banner .wrap .title, .bannerLogoBox h2 span, .aboutArea .titleBox h1, .aboutArea .Txt, .portfolioClassList, #portfolioDataBox, .portfolioList .Txt p, .pcList .Txt p, .portfolioList .mClassTitle, .pcList .mClassTitle, .portfolioList h3 a, .pcList h3 a, .newsList, .newsList .Img::before, .characteristicList > li, .bannerLogoBox h2::before, .aboutArea .textBox, .characteristicArea .linkBtn {
  opacity: 0;
}

.titleBox em span, .titleBox h2 span {
  -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
          transform: translateX(20px);
}

#banner .wrap .title, .bannerLogoBox h2 span, .aboutArea .titleBox h1, .aboutArea .Txt, .portfolioClassList, #portfolioDataBox, .portfolioList .Txt p, .pcList .Txt p, .portfolioList .mClassTitle, .pcList .mClassTitle, .portfolioList h3 a, .pcList h3 a, .newsList, .newsList .Img::before, .characteristicList > li {
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
}

.titleBox.show em span, .titleBox.show h2 span, #banner .current .title, .bannerLogoBox.show h2::before, .bannerLogoBox.show h2 span, .aboutArea.show .textBox, .aboutArea.show .titleBox h1, .aboutArea.show .Txt, .portfolioArea.show .portfolioClassList, .portfolioArea.show #portfolioDataBox, .portfolioList .item:hover .Txt p, .portfolioList .current .Txt p, .pcList .item:hover .Txt p, .pcList .current .Txt p, .portfolioList .item:hover .mClassTitle, .portfolioList .current .mClassTitle, .pcList .item:hover .mClassTitle, .pcList .current .mClassTitle, .portfolioList .item:hover h3 a, .portfolioList .current h3 a, .pcList .item:hover h3 a, .pcList .current h3 a, .newsArea.show .newsList, .newsList .item:hover .Img::before, .characteristicArea.show .characteristicList > li, .characteristicArea.show .linkBtn {
  -webkit-transform: translate(0);
      -ms-transform: translate(0);
          transform: translate(0);
  opacity: 1;
}

.bannerArea {
  position: relative;
}

#banner .wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 100%;
  margin: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 150px;
  padding-bottom: 150px;
}

#banner .wrap.textHL {
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

#banner .wrap.textHC {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#banner .wrap.textHC.textVC {
  text-align: center;
}

#banner .wrap.textHR {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

#banner .wrap.textVT {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

#banner .wrap.textVC {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

#banner .wrap.textVB {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

#banner .wrap .title {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1px;
  display: none;
}

.bannerLogoBox {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -63px;
  margin-top: -74.5px;
  z-index: 1;
}

.bannerLogoBox.show h2::before {
  transition-delay: 4.3s;
}

.bannerLogoBox.show h2 span:nth-child(1) {
  transition-delay: 3.35s !important;
}

.bannerLogoBox.show h2 span:nth-child(2) {
  transition-delay: 3.5s !important;
}

.bannerLogoBox.show h2 span:nth-child(3) {
  transition-delay: 3.65s !important;
}

.bannerLogoBox.show h2 span:nth-child(4) {
  transition-delay: 3.8s !important;
}

.bannerLogoBox.show svg {
  fill: #fff;
  transition-delay: 2s;
}

.bannerLogoBox.show svg path {
  stroke-dasharray: 1187;
}

.bannerLogoBox svg {
  display: block;
  width: 126px;
  height: 124px;
  fill: transparent;
  stroke: #fff;
  margin-left: auto;
  margin-right: auto;
}

.bannerLogoBox svg path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: 2s ease-out;
}

.bannerLogoBox h2 {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -4px;
  font-size: 0;
}

.bannerLogoBox h2::before {
  content: url("../images/logoTextEn.png");
  position: absolute;
  bottom: -18px;
  left: 50%;
  z-index: 1;
  line-height: 0;
  margin-left: -64.5px;
}

.bannerLogoBox h2 span {
  display: block;
  width: 17px;
  height: 25px;
  color: transparent;
  background-position: 50%;
  background-repeat: no-repeat;
}

.bannerLogoBox h2 span:first-child {
  background-image: url("../images/logoText1.png");
}

.bannerLogoBox h2 span:nth-child(2) {
  background-image: url("../images/logoText2.png");
}

.bannerLogoBox h2 span:nth-child(3) {
  background-image: url("../images/logoText3.png");
}

.bannerLogoBox h2 span:nth-child(4) {
  background-image: url("../images/logoText4.png");
}

.bannerLogoBox h2 span + span {
  margin-left: 7px;
}

.bannerVideoBox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  width: 100%;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.bannerVideoBox.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.bannerVideoBox.show .closeVideoBtn {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 1s;
}

.videoBtn, .closeVideoBtn {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 76px;
  margin-top: -50px;
  opacity: 0;
  pointer-events: none;
}

.videoBtn {
  position: absolute;
  right: 6%;
  padding-top: 85px;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  pointer-events: none;
}

.videoBtn.show {
  opacity: 1;
  pointer-events: auto;
}

.videoBtn:hover::before {
  -webkit-animation: 7s round linear both infinite;
          animation: 7s round linear both infinite;
}

.videoBtn::before, .videoBtn::after {
  content: '';
  position: absolute;
  z-index: 1;
}

.videoBtn::before {
  top: 0;
  left: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px dashed #48b9e8;
}

.videoBtn::after {
  top: 6px;
  left: 6px;
  width: 63px;
  height: 63px;
  background: url("../images/playBtn.png") 50% no-repeat;
}

.closeVideoBtn {
  position: absolute !important;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #48b9e8;
  border: none;
  outline: none;
  cursor: pointer;
}

.closeVideoBtn:hover {
  background-color: #a38664;
}

.closeVideoBtn::before, .closeVideoBtn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  margin-left: -10px;
  background-color: #fff;
}

.closeVideoBtn::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.closeVideoBtn::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.scrollDownBtn {
  position: absolute;
  left: 50%;
  bottom: 50px;
  z-index: 1;
  width: 114px;
  padding-top: 70px;
  margin-left: -57px;
  font-size: 13px;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  text-align: center;
}

.scrollDownBtn:hover {
  letter-spacing: 1px;
}

.scrollDownBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 50px;
  margin-left: -.5px;
  background: linear-gradient(to top, transparent 32%, #fff 0, #fff 66%, transparent 0, transparent 100%) 50% 100%/1px 300% no-repeat;
  -webkit-animation: 2.3s scrollDownAni linear both infinite;
          animation: 2.3s scrollDownAni linear both infinite;
}

@-webkit-keyframes scrollDownAni {
  0% {
    background-position-y: 100%;
  }
  100% {
    background-position-y: 0;
  }
}

@keyframes scrollDownAni {
  0% {
    background-position-y: 100%;
  }
  100% {
    background-position-y: 0;
  }
}

.mainArea {
  padding-top: 0;
  padding-bottom: 0;
}

.bgLogoRound {
  z-index: 1;
  width: 500px;
  height: 500px;
  margin-top: -85px;
  opacity: 0;
}

.bgLogoRound img {
  width: 100%;
  padding-left: 55%;
}

@media (max-width: 1180px) {
  .bgLogoRound img {
  display: none;
  }
}

/*
.bgLogoRound::before {
  width: 150px;
  height: 150px;
  margin-top: -75px;
  margin-left: -75px;
}
*/
.bgLogoRound svg:first-child {
  width: 280px;
  margin-top: 2px;
  margin-left: 3px;
}

.bgLogoRound svg:nth-child(2) {
  margin-top: -34px;
  margin-left: -35px;
}

.aboutArea {
  position: relative;
  height: 960px;
  background-position: 50%;
  background-repeat: no-repeat;
}

.aboutArea.show .titleBox h1 {
  transition-delay: .5s;
}

.aboutArea.show .Txt {
  transition-delay: .8s;
}

.aboutArea.show .bgLogoRound {
  opacity: 1;
  transition-delay: 1.5s;
}

.aboutArea .wrap {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 1110px;
  height: 100%;
}

.aboutArea .textBox {
  position: relative;
  max-width: 635px;
  padding: 120px 130px;
  /*background-color: #fffdfb;*/
  background-color: rgba(248, 252, 255, 0.9);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}

.aboutArea .titleBox {
  margin-bottom: 55px;
}

.aboutArea .titleBox h1 {
  display: inline-block;
  margin-top: 20px;
  padding-bottom: 10px;
  font-size: 18px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(201, 184, 164, 0.3);
}

.aboutArea .Txt {
  line-height: 1.8;
}

.aboutArea .bgLogoRound {
  top: auto;
  left: auto;
  right: -25px;
  bottom: -30px;
}

.portfolioArea {
  padding-top: 70px;
  padding-bottom: 70px;
}

.portfolioArea.show .portfolioClassList {
  transition-delay: .5s;
}

.portfolioArea.show #portfolioDataBox {
  transition-delay: .8s;
}

.portfolioArea .wrap {
  position: relative;
}

.portfolioArea .titleBox {
  text-align: left;
}

.portfolioArea .prevTextArrow {
  left: -70px;
}

.portfolioArea .nextTextArrow {
  right: -70px;
}

.portfolioClassList {
  position: absolute;
  top: 64px;
  right: 0;
  z-index: 1;
  margin-right: -23px;
}

.portfolioClassList li {
  display: inline-block;
}

.portfolioClassList a {
  display: block;
  padding: 10px 23px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

.portfolioClassList a.current, .portfolioClassList a:hover {
  color: #48b9e8;
}

.portfolioList .item:hover .Img a::before, .portfolioList .item.current .Img a::before, .pcList .item:hover .Img a::before, .pcList .item.current .Img a::before, .newsList .item:hover .Img a::before, .newsList .item.current .Img a::before {
  opacity: 1;
}

.portfolioList .item:hover .Img a::after, .portfolioList .item.current .Img a::after, .pcList .item:hover .Img a::after, .pcList .item.current .Img a::after, .newsList .item:hover .Img a::after, .newsList .item.current .Img a::after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  transition-delay: .5s;
}

.portfolioList .item:hover .Img img, .portfolioList .item.current .Img img, .pcList .item:hover .Img img, .pcList .item.current .Img img, .newsList .item:hover .Img img, .newsList .item.current .Img img {
  opacity: .5;
}

.portfolioList .Img, .pcList .Img, .newsList .Img {
  position: relative;
  line-height: 0;
  background-color: #000;
  overflow: hidden;
}

.portfolioList .Img a, .pcList .Img a, .newsList .Img a {
  display: block;
}

.portfolioList .Img a::before, .portfolioList .Img a::after, .pcList .Img a::before, .pcList .Img a::after, .newsList .Img a::before, .newsList .Img a::after {
  content: '';
  position: absolute;
  z-index: 1;
  margin: auto;
}

.portfolioList .Img a::before, .pcList .Img a::before, .newsList .Img a::before {
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  border: 1px dashed rgba(201, 184, 164, 0.5);
  opacity: 0;
}

.portfolioList .Img a::after, .pcList .Img a::after, .newsList .Img a::after {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 3px solid #48b9e8;
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.portfolioList .Img img, .pcList .Img img, .newsList .Img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolioList .item:hover .Txt p, .portfolioList .current .Txt p, .pcList .item:hover .Txt p, .pcList .current .Txt p {
  transition-delay: .4s;
}

.portfolioList .item:hover h3 a, .portfolioList .current h3 a, .pcList .item:hover h3 a, .pcList .current h3 a {
  transition-delay: .2s;
}

.portfolioList .item, .pcList .item {
  position: relative;
}

.portfolioList .Txt, .pcList .Txt {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 30px;
  pointer-events: none;
}

.portfolioList .Txt p, .pcList .Txt p {
  height: 45px;
  font-size: 13px;
  color: #fff;
}

.portfolioList .mClassTitle, .pcList .mClassTitle {
  margin-bottom: 20px;
  font-size: 13px;
  color: #48b9e8;
  letter-spacing: 1px;
}

.portfolioList h3 a, .pcList h3 a {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 21px;
  color: #fff;
}

.portfolioList {
  display: none;
}

.pcList .itemBox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: -8px;
  margin-right: -8px;
}

.pcList .itemBox .items {
  padding: 8px;
}

.pcList .leftBox {
  width: 66.7%;
}

.pcList .leftBox .items, .pcList .leftBox .item, .pcList .leftBox .Img, .pcList .leftBox .Img a {
  height: 100%;
}

.pcList .rightBox {
  width: 33.4%;
}

.newsArea {
  /*background-color: #fffbf6;*/
  background: url('../images/newsbg.jpg');
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 70px;
}

.newsArea.show .newsList {
  transition-delay: .5s;
}

.newsArea.show .bgLogoRound {
  opacity: 1;
  transition-delay: 1.1s;
}

.newsArea .titleBox {
  margin-bottom: 45px;
}

.newsArea .wrap {
  position: relative;
}

.newsArea .bgLogoRound {
  top: 185px;
  left: -75px;
}

.newsList li {
  float: left;
  width: 48%;
  margin: 0 1% 2% 1%;
}

@media (max-width: 1180px) {
  .newsList li {
  width: 48%;
  margin: 0 1% 2% 1%;
  }
}

@media (max-width: 768px) {
  .newsList li {
    float: none;
  width: 100%;
  margin: 0 0 2% 0;
  }
}

.newsList .item {
  /*max-width: 390px;*/
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
  /*-webkit-box-shadow: 0 0 5px #ccc;
  -moz-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;*/
}

.newsList .item:hover .Img::before {
  transition-delay: .5s;
}

.newsList .item:hover h3 a {
  color: #48b9e8;
}

.newsList .Img::before {
  content: '\f002';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin-left: -11px;
  margin-top: -12px;
  font-family: FontAwesome;
  font-size: 24px;
  line-height: 1;
  color: #48b9e8;
}

.newsList .Txt {
  padding-top: 10px;
}

.newsList h3 a {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 1px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.newsList .date {
  margin-top: 10px;
  font-size: 13px;
  color: #555;
}

.sortBox {
  display: inline-block;
  color: #48b9e8;
  font-size: 15px;
}

.sortBox::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 1px;
  margin-left: 10px;
  background-color: #413d39;
}

.characteristicArea {
  /*padding-top: 70px;*/
}

.characteristicArea iframe {
  width: 50%;
  height: 700px;
}

@media (max-width: 1180px) {
.characteristicArea iframe {
  width: 100%;
  height: 500px;
}
}

.characteristicArea.show .wrap > .Img::before {
  width: 0;
}

.characteristicArea.show .characteristicList > li:nth-child(1) {
  transition-delay: 0.7s;
}

.characteristicArea.show .characteristicList > li:nth-child(2) {
  transition-delay: 0.9s;
}

.characteristicArea.show .characteristicList > li:nth-child(3) {
  transition-delay: 1.1s;
}

.characteristicArea.show .characteristicList > li:nth-child(4) {
  transition-delay: 1.3s;
}

.characteristicArea.show .linkBtn {
  transition-delay: 2s;
}

.characteristicArea .wrap {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.characteristicArea .wrap > .Img, .characteristicArea .wrap > .Txt {
  width: 50%;
}

.characteristicArea .wrap > .Img {
  position: relative;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.characteristicArea .wrap > .Img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url("../images/dark.jpg");
}

.characteristicArea .wrap > .Img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.characteristicArea .wrap > .Txt {
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
  max-width: 590px;
  margin-left: auto;
  padding-top: 50px;
  padding-right: 105px;
}

.characteristicArea .titleBox {
  text-align: left;
}

.characteristicArea .titleBox em {
  text-transform: none;
}

.characteristicArea .titleBox h2 {
  margin-top: 15px;
  margin-left: -5px;
}

.characteristicArea .linkBtn {
  position: absolute;
  top: 50%;
  left: -75px;
  z-index: 2;
  margin-top: -75px;
}

.characteristicArea .linkBtn em, .characteristicArea .linkBtn h3 {
  color: #111;
}

.characteristicArea .linkBtn em {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.characteristicList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.characteristicList > li {
  width: 50%;
  padding-bottom: 45px;
}

.characteristicList > li:hover svg {
  fill: #48b9e8;
}

.characteristicList svg {
  fill: #60564c;
}

.characteristicList h3 {
  margin-top: 17px;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 1px;
}

.characteristicList p {
  color: #bbb;
}

@media (max-width: 1340px) and (min-width: 1024px) {
  #portfolioDataBox {
    width: calc(100% - 200px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1230px) {
  .characteristicArea .wrap > .Txt {
    padding-top: 0;
    padding-left: 20px;
  }
  .portfolioClassList {
    margin-right: 0;
  }
}

@media (max-width: 1180px) {
  #banner .wrap {
    padding-top: 80px;
    padding-bottom: 30px;
  }
  .scrollDownBtn {
    display: none;
  }
  .aboutArea .wrap {
    width: 100%;
  }
  .characteristicArea .wrap > .Txt {
    padding-right: 0;
  }
  .portfolioList .current .Img a::before, .pcList .Img a::before {
    opacity: 1;
  }
  .portfolioList .current .Img a::after, .pcList .Img a::after {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    transition-delay: .5s;
  }
  .portfolioList .current .Img img, .pcList .Img img {
    opacity: .5;
  }
}

@media (max-width: 960px) {
  .bannerLogoBox {
    margin-left: -44.5px;
    margin-top: -57px;
  }
  .bannerLogoBox svg {
    width: 80px;
    height: 79px;
  }
  .bannerLogoBox h2 {
    margin-top: 10px;
  }
  .aboutArea {
    background-position-x: 0;
  }
  .aboutArea .textBox {
  background-color: rgba(255, 253, 251, 0.9);
  }
  .characteristicArea .wrap {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .characteristicArea .wrap > .Img, .characteristicArea .wrap .Txt {
    width: 100%;
  }
  .characteristicArea .wrap > .Img {
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
  }
  .characteristicArea .wrap > .Txt {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
    padding-right: 20px;
  }
  .characteristicArea .linkBtn {
    top: auto;
    bottom: -75px;
    left: 50%;
    margin-top: 0;
    margin-left: -75px;
  }
}

@media (max-width: 768px) {
  .bannerLogoBox {
    display: none;
  }
  #banner .wrap.textHL, #banner .wrap.textHR {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #banner .wrap.textVT, #banner .wrap.textVB {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .aboutArea {
    padding-top: 50px;
    padding-bottom: 50px;
    height: auto;
  }
  .aboutArea .textBox {
    max-width: none;
    padding: 50px 30px;
  }
  .newsArea {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .newsList .Txt {
    padding-top: 10px;
  }
  .newsList h3 a {
    margin-bottom: 10px;
    font-size: 17px;
  }
  .characteristicArea {
    padding-top: 30px;
  }
  .portfolioList {
    display: block;
  }
  .pcList {
    display: none;
  }
  .portfolioArea {
    padding-top: 60px;
    padding-bottom: 30px;
  }
  .portfolioArea .titleBox {
    margin-bottom: 20px;
    text-align: center;
  }
  .portfolioClassList {
    position: static;
    margin-bottom: 30px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .characteristicArea .wrap > .Txt {
    max-width: none;
  }
  .characteristicArea .titleBox {
    text-align: center;
  }
  .characteristicArea .titleBox em {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .aboutArea .titleBox {
    margin-bottom: 30px;
  }
  .aboutArea .bgLogoRound {
    display: none;
  }
}

@media (max-width: 400px) {
  #banner .wrap .title {
    display: none;
  }
  .characteristicList > li {
    width: 100%;
    padding-bottom: 30px;
    text-align: center;
  }
  .characteristicList svg {
    fill: #48b9e8;
  }
  .characteristicList h3 {
    margin-top: 5px;
  }
}