@charset "UTF-8";

/* html
====================================================*/

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 10px
}

@media only screen and (max-width:1200px) {
  html {
    font-size: .8vw
  }
}

@media only screen and (max-width:992px) {
  html {
    font-size: 1.2vw
  }
}

@media only screen and (max-width:640px) {
  html {
    font-size: 1.8vw
  }
}

@media only screen and (max-width:480px) {
  html {
    font-size: 2.5vw
  }
}

@media only screen and (max-width:360px) {
  html {
    font-size: 3vw
  }
}

/* responsive
====================================================*/
@media (min-width: 769px) {
  .sp-none {
    display: block;
  }

  .xs-none {
    display: block;
  }

  .xs-block {
    display: none;
  }

  .pc-none {
    display: none;
  }

  .tab-block {
    display: none;
  }
}

@media (min-width: 769px) and (max-width:992px) {
  .tab-block {
    display: block;
  }

  .tab-none {
    display: none;
  }
}

@media (max-width:768px) {
  .sp-none {
    display: none;
  }

  .tab-block {
    display: none;
  }

  .pc-none {
    display: block;
  }
}

@media (max-width:576px) {
  .xs-none {
    display: none;
  }

  .xs-block {
    display: block;
  }
}


/* main-2022
====================================================*/
.main-2022 {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  color: #164C6C;
}

.main-2022 h1 {
  font-size: 50px;
  font-size: 5.0rem;
}

.main-2022 h1.mv-txt-key {
  color: white;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 200%;
  font-weight: 700;
}

.main-2022 .mv-txt-lead {
  font-size: 50px;
  font-size: 5.0rem;
  line-height: 1.2;
}

.main-2022 h2 {
  font-size: 50px;
  font-size: 5.0rem;
}

.main-2022 h3 {
  font-size: 50px;
  font-size: 5.0rem;
}

.main-2022 h4 {
  font-size: 22px;
  font-size: 2.2rem;
}

.main-2022 h5 {
  font-size: 18px;
  font-size: 1.8rem;
}

.main-2022 li, .main-2022 li a, .main-2022 li p, .main-2022 p, .main-2022 a {
  font-size: 16px;
  font-size: 1.6rem;
}

@media (max-width:768px) {
  .main-2022 h1 {
    font-size: 35px;
    font-size: 3.5rem;
  }

  .main-2022 h1.mv-txt-key {
    font-size: 16px;
    font-size: 1.6rem;
  }

  .main-2022 .mv-txt-lead {
    font-size: 35px;
    font-size: 3.5rem;
  }

  .main-2022 h2 {
    font-size: 35px;
    font-size: 3.5rem;
  }

  .main-2022 h3 {
    font-size: 35px;
    font-size: 3.5rem;
  }

  .main-2022 h4 {
    font-size: 20px;
    font-size: 2.0rem;
  }

  .main-2022 h5 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .main-2022 p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 150%;
  }

  .main-2022 li, .main-2022 li a, .main-2022 li p, .main-2022 a {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media (max-width:640px) {
  .main-2022 h1 {
    font-size: 29px;
    font-size: 2.9rem;
  }

  .main-2022 h1.mv-txt-key {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 175%;
  }

  .main-2022 .mv-txt-lead {
    font-size: 29px;
    font-size: 2.9rem;
  }

  .main-2022 h2 {
    font-size: 25px;
    font-size: 2.5rem;
  }

  .main-2022 h3 {
    font-size: 25px;
    font-size: 2.5rem;
  }

  .main-2022 h4 {
    font-size: 16px;
    font-size: 1.6rem;
  }

  .main-2022 h5 {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .main-2022 p {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 175%;
  }

  .main-2022 li, .main-2022 li a, .main-2022 li p, .main-2022 a {
    font-size: 15px;
    font-size: 1.5rem;
  }
}


/* container-2022
====================================================*/
.container-2022 {
  width: 82%;
  max-width: 1600px;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

.second-page .container-2022 {
  width: 82%;
  max-width: 1200px;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

.container.fullsc {
  width: 90%;
  max-width: 1600px;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width:768px) {
  .container-2022, .second-page .container-2022 {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  .container.fullsc {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
  }
}


/* responsive
====================================================*/
.sp-none-1200 {
  display: block;
}

@media (max-width:1200px) {
  .sp-none-1200 {
    display: none;
  }
}

.pc-none-1200 {
  display: none;
}

@media (max-width:1200px) {
  .pc-none-1200 {
    display: block;
  }
}

.sp-none-1105 {
  display: block;
}

@media (max-width:1105px) {
  .sp-none-1105 {
    display: none;
  }
}

.pc-none-1105 {
  display: none;
}

@media (max-width:1105px) {
  .pc-none-1105 {
    display: block;
  }
}

.sp-none-1000 {
  display: block;
}

@media (max-width:1000px) {
  .sp-none-1000 {
    display: none;
  }
}

.sp-none-1024 {
  display: block;
}

@media (max-width:1000px) {
  .sp-none-1024 {
    display: none;
  }
}

.pc-none-1000 {
  display: none;
}

@media (max-width:1000px) {
  .pc-none-1000 {
    display: block;
  }
}

.sp-none-992 {
  display: block;
}

@media (max-width:992px) {
  .sp-none-992 {
    display: none;
  }
}

.pc-none-992 {
  display: none;
}

@media (max-width:992px) {
  .pc-none-992 {
    display: block;
  }
}

.sp-none-640 {
  display: block;
}

@media (max-width:640px) {
  .sp-none-640 {
    display: none;
  }
}

.sp-none-768 {
  display: block;
}

.pc-none-768 {
  display: none;
}

@media (max-width:768px) {
  .sp-none-768 {
    display: none;
  }

  .pc-none-768 {
    display: block;
  }
}

.pc-none-640 {
  display: none;
}

@media (max-width:640px) {
  .pc-none-640 {
    display: block;
  }
}

.pc-2022 {
  display: block;
}

.tab-2022 {
  display: none;
}

.sp-2022 {
  display: none;
}

@media (max-width:992px) {
  .pc-2022 {
    display: none;
  }

  .tab-2022 {
    display: block;
  }

  .sp-2022 {
    display: none;
  }
}

@media (max-width:768px) {
  .tab-2022 {
    display: none;
  }

  .sp-2022 {
    display: block;
  }
}

.txt-center {
  text-align: center;
}

.img-full {
  width: 100%;
  height: auto;
}


/* body
====================================================*/
#wrapper {
  font-size: 16px;
  font-size: 1.6rem;
}

.home #wrapper, .post-type-archive-column #wrapper, .tax-column_cats #wrapper, .tax-column_tags #wrapper, .single-column #wrapper {
  overflow: visible;
  font-size: 16px;
  font-size: 1.6rem;
}

.home #wrapper section, .home #wrapper #top-main01, .home #wrapper #top-projects.home #wrapper #top-projects-txt, .home #wrapper #coordinate, .home #wrapper #top-products, .home #wrapper #top-parallax, .home #wrapper #top-menu, .home #wrapper #top-officetour, .home #wrapper #top-contact-2022 {
  overflow: hidden;
}

#wrapper.scroll-2022 {
  overflow: visible;
}

@media (max-width:768px) {
  .home #wrapper, .post-type-archive-column #wrapper, .tax-column_cats #wrapper, .tax-column_tags #wrapper, .single-column #wrapper {
    overflow: hidden;
  }
}


/* trailmade ttl
====================================================*/
.trailmade-title-box {
  margin: 0 0 100px;
}

.trailmade-title-box h2 {
  font-family: 'Trailmade', serif;
  font-size: 120px;
  font-size: 12.0rem;
  color: #EEEEEE;
  line-height: 1;
  text-align: center;
}

.trailmade-title-box.top-title-orange h2 {
  color: #ECDBCC;
}

.trailmade-title-box h2 span {
  font-family: 'futura-pt', serif;
  font-size: 150px;
  font-size: 15.0rem;
  margin-right: -5px;
}

.trailmade-title-box .trailmade-title-ja {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  font-weight: bold;
  text-align: center;
  margin: -45px 0 0;
  font-size: 20px !important;
  font-size: 2.0rem !important;
}

@media (max-width:768px) {
  .trailmade-title-box {
    margin: 0 0 40px;
  }

  .trailmade-title-box h2 {
    font-size: 7.6rem;
  }

  .trailmade-title-box h2 span {
    font-size: 10.0rem;
    margin-right: -5px;
  }
}


/* flex
====================================================*/
.flex-area-2022 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-2022 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-2022.end {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.flex-33-left-2022, .flex-33-right-2022, .flex-33-center-2022 {
  flex-basis: 33.33333333%;
  width: 33.33333333%;
}

.flex-50-left-2022, .flex-50-right-2022 {
  flex-basis: 50%;
  width: 50%;
}

.flex-50-left-2022 {
  padding-right: 15px;
}

.flex-50-right-2022 {
  padding-left: 15px;
}

.flex-60-left-2022 {
  flex-basis: 60%;
  width: 60%;
  padding-right: 15px;
}

.flex-60-right-2022 {
  flex-basis: 60%;
  width: 60%;
  padding-left: 15px;
}

.flex-40-right-2022 {
  flex-basis: 40%;
  width: 40%;
  padding-left: 15px;
}

.flex-40-left-2022 {
  flex-basis: 40%;
  width: 40%;
  padding-right: 15px;
}

.flex-33-2022 {
  padding: 0px 10px;
  flex-basis: 33.33333333%;
  width: 33.33333333%;
}

.flex-33-left-2022 {
  padding-right: 20px;
}

.flex-33-right-2022 {
  padding-left: 20px;
}

.flex-33-center-2022 {
  padding: 0 10px;
}

.left-50-2022, .right-50-2022 {
  width: 50%;
}

.left-50-2022 {
  padding-right: 15px;
  width: 50%;
}

.right-50-2022 {
  padding-left: 15px;
  width: 50%;
}

.left-30-2022 {
  padding-right: 15px;
  width: 30%;
}

.right-70-2022 {
  padding-left: 15px;
  width: 70%;
}

.w-70-2022 {
  width: 70%;
  margin: 0 auto;
}

.w-80-2022 {
  width: 80%;
  margin: 0 auto;
}

.w-90-2022 {
  width: 90%;
  margin: 0 auto;
}

@media (max-width:768px) {
  .flex-area-2022 {
    display: block;
  }

  .flex-2022 {
    display: flex;
  }

  .flex-50-left-2022, .flex-50-right-2022, .flex-33-left-2022, .flex-33-right-2022, .flex-33-center-2022, .left-50-2022, .right-50-2022, .flex-60-left-2022, .flex-60-right-2022, .flex-40-left-2022, .flex-40-right-2022 {
    flex-basis: 100%;
    width: 100%;
  }

  .flex-33-2022 {
    flex-basis: 100%;
    width: 100%;
    padding: 0px;
  }

  .flex-50-left-2022, .flex-50-right-2022, .left-50-2022, .right-50-2022, .flex-60-left-2022, .flex-60-right-2022, .flex-40-left-2022, .flex-40-right-2022 {
    padding: 0;
  }

  .flex-33-left-2022 {
    padding-right: 0px;
  }

  .flex-33-right-2022 {
    padding-left: 0px;
  }

  .flex-33-center-2022 {
    padding: 0px;
  }

  .left-30-2022 {
    padding-right: 0px;
    width: 100%;
  }

  .right-70-2022 {
    padding-left: 0px;
    width: 100%;
  }

  .w-70-2022 {
    width: 100%;
    margin: 0 auto;
  }

  .w-80-2022 {
    width: 100%;
    margin: 0 auto;
  }

  .w-90-2022 {
    width: 100%;
    margin: 0 auto;
  }
}

/* loading
====================================================*/
.load-2022 {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #F1EBE6;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}

.load-2022.is-close-2022 {
  opacity: 0;
  visibility: hidden;
}

#load-area-2022 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#load-area-2022 svg {
  min-width: 130%;
  width: initial !important;
  height: 95vh !important;
}

.load-2022.is-close-2022.ic-none-2022 #load-area-2022 {
  display: none;
}

@media (max-width:768px) {
  #load-area-2022 svg {
    min-width: 220% !important;
    width: 220% !important;
  }
}


/* zoom
====================================================*/
.zoom-img-2022 {
  overflow: hidden;
}

/* arrow
====================================================*/
.hover-menu-arrow-2022 {
  position: relative;
  display: block;
  transition: .3s;
}

.hover-menu-arrow-2022::before {
  content: '';
  position: absolute;
  top: 40%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(135deg);
  transform: translateY(-50%) rotate(135deg);
  transition: .3s;
}

.header-animation .hover-menu-arrow-2022::before {
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
}

.header-under-2022 .hover-menu-arrow-2022::before {
  border-top: 1px solid #1e1e1e !important;
  border-right: 1px solid #1e1e1e !important;
}

/*arrow 2022 blue*/
.arrow-box-blue {
  position: relative;
  text-align: center;
  margin: 50px 0;
  transition: all .5s;
}

.arrow-box-blue p {
  position: relative;
  display: inline-block;
  background-color: #164C6C;
  color: #fff;
  padding: 15px 90px 15px 25px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

.arrow-box-blue p::before {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-box-blue p::after {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.arrow-box-blue:hover {
  text-align: center;
  transition: all .5s;
}

.arrow-box-blue p:hover {
  background-color: #ECDBCC;
  color: #164C6C;
  transition: all .5s;
}

.arrow-box-blue p:hover::before {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-box-blue p:hover::after {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

/*arrow 2022 white*/
.arrow-box-white {
  position: relative;
  text-align: center;
  z-index: 10;
  margin: 50px 0;
  transition: all .5s;
}

.arrow-box-white p {
  position: relative;
  display: inline-block;
  background-color: #F2EDE2;
  color: #164C6C;
  padding: 15px 100px 15px 25px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

.arrow-box-white p::before {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-box-white p::after {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.arrow-box-white:hover {
  text-align: center;
  transition: all .5s;
}

.arrow-box-white p:hover {
  background-color: #164C6C;
  color: #fff;
  transition: all .5s;
}

.arrow-box-white p:hover::before {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-box-white p:hover::after {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

/*arrow right 2022*/
.arrow-right-2022 {
  display: block;
  position: relative;
  color: #164C6C;
  padding: 15px 100px 15px 0px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

.arrow-right-2022::before {
  position: absolute;
  top: 50%;
  right: 30px;
  content: "";
  vertical-align: middle;
  width: 40px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-right-2022::after {
  position: absolute;
  top: 50%;
  right: 30px;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.arrow-right-2022:hover::before {
  position: absolute;
  top: 50%;
  right: 10px;
  content: "";
  vertical-align: middle;
  width: 60px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-right-2022:hover::after {
  position: absolute;
  top: 50%;
  right: 10px;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

/*arrow bottom 2022*/
.arrow-bottom-2022 {
  display: inline-block;
  position: relative;
  color: #fff;
  width: 205px;
  padding: 15px 0px 50px 0px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

.arrow-bottom-2022::before {
  position: absolute;
  bottom: 28px;
  right: 50%;
  content: "";
  vertical-align: middle;
  width: 40px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  transition: all .5s;
}

.arrow-bottom-2022::after {
  position: absolute;
  bottom: 25px;
  right: calc(50% - 17px);
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateX(50%) rotate(45deg);
  transform: translateX(50%) rotate(45deg);
  transition: all .5s;
}

.arrow-bottom-2022:hover::before {
  position: absolute;
  bottom: 28px;
  right: calc(50% - 20px);
  content: "";
  vertical-align: middle;
  width: 60px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  transition: all .5s;
}

.arrow-bottom-2022:hover::after {
  position: absolute;
  bottom: 25px;
  right: calc(50% - 46px);
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateX(50%) rotate(45deg);
  transform: translateX(50%) rotate(45deg);
  transition: all .5s;
}

@media (max-width:768px) {
  .arrow-bottom-2022 {
    width: 100%;
    padding: 15px 0px 50px 0px;
    transition: all .5s;
  }

  .arrow-bottom-2022::before {
    position: absolute;
    top: 50%;
    bottom: auto;
    right: 60px;
    content: "";
    vertical-align: middle;
    width: 40px;
    height: 1px;
    background: #164C6C;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .5s;
  }

  .arrow-bottom-2022::after {
    position: absolute;
    top: 50%;
    bottom: auto;
    right: 60px;
    content: "";
    vertical-align: middle;
    width: 7px;
    height: 7px;
    border-top: 1px solid #164C6C;
    border-right: 1px solid #164C6C;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    transition: all .5s;
  }

  .arrow-bottom-2022:hover::before {
    position: absolute;
    bottom: auto;
    right: 60px;
    width: 60px;
    height: 1px;
    background: #fff;
    transition: all .5s;
  }

  .arrow-bottom-2022:hover::after {
    position: absolute;
    bottom: auto;
    right: 30px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    transition: all .5s;
  }
}

/* open menu
====================================================*/
.list-btn-2022 {
  cursor: pointer;
  padding: 10px 0;
  display: block;
  position: relative;
  border-bottom: 1px solid #164C6C;
}

.list-btn-2022::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 10;
  width: 18px;
  height: 1px;
  background: #164C6C;
  transform: translateY(-50%);
  transform-origin: 50% 0%;
  transition: .3s;
}

.list-btn-2022::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 19px;
  z-index: 10;
  width: 1px;
  height: 18px;
  background: #000;
  transform: translateY(-50%);
  transform-origin: 50% 0%;
  transition: .3s;
}

.list-btn-2022.open:before {
  top: 50%;
  right: 10px;
  opacity: 0;
  transform: rotate(90deg) translateY(-50%);
}

.list-btn-2022.open:after {
  top: 50%;
  right: 19px;
  opacity: 1;
  transform: rotate(90deg) translateY(-50%);
}

.list-child-2022 {
  display: none;
}

.list-child-2022.open {
  display: block;
  margin: 10px 0;
  transition: .5s;
}

.list-child-2022 p {
  padding: 5px 0;
}

/*header munu*/
#common-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  height: 80px;
  background: transparent;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: .5s all;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
}

#common-header.header-of-2022.is-active {
  opacity: 1;
  visibility: visible;
  transition: .5s all;
}

#common-header.header-under-2022.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  background: #fff;
  transition: .5s all;
}

#common-header.header-under-2022.header-bl-2022 {
  opacity: 1 !important;
  visibility: visible !important;
  background: #fff;
}

#common-header.hum-active-2022 {
  opacity: 1 !important;
  visibility: visible !important;
  transition: .5s all;
}

#common-header.header-bl-2022 {
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, .2);
}

#common-header.header-bl-2022.header-animation {
  background: #fff;
}

#common-header.header-bl-2022 .container-2022 {
  opacity: 1;
}

#common-header>.container-2022 {
  display: flex;
  align-items: center;
}

#common-header .logo-2022 {
  top: 23px;
  left: 40px;
  z-index: 900;
  line-height: 100% !important;
  transition: .5s all;
  position: fixed;
}

#common-header .logo-2022 img {
  height: 35px;
}

#common-header-logo2022 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 70;
  height: 90px;
  background: transparent;
  color: #fff;
  transition: .5s all;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
}

#common-header-logo2022.none-2022 {
  display: none !important;
}

#common-header-logo2022>.container-2022 {
  display: flex;
  align-items: center;
}

#common-header-logo2022 .logo-2022 {
  top: 23px;
  left: 40px;
  z-index: 90;
  line-height: 100% !important;
  transition: .5s all;
  position: fixed;
}

#common-header-logo2022 .logo-2022 img {
  height: 35px;
}

.header-under-2022 .first {
  opacity: 0 !important;
}

.header-under-2022 .second {
  opacity: 1 !important;
}

.header-nav-wrapper-2022 {
  display: block;
  margin-left: auto;
}

.header-nav-list-2022 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 80px;
}

.header-nav-list-2022 li {
  position: relative;
  padding-left: 20px;
}

.header-nav-list-2022 li a {
  font-weight: 400;
  font-size: 14px;
  font-size: 1.4rem;
  color: #fff;
  transition: .5s all;
}

.header-nav-list-2022 li div.hover-menu-arrow-2022 {
  font-weight: 400;
  font-size: 14px;
  font-size: 1.4rem;
  color: #fff;
  padding-right: 15px;
  cursor: pointer;
}

#common-header.header-animation .header-nav-list-2022 li a, #common-header.header-animation .header-nav-list-2022 li div, #common-header.header-under-2022 .header-nav-list-2022 li div {
  color: #164C6C;
}

#common-header.header-under-2022 .header-nav-list-2022 li a {
  color: #164C6C;
}

#common-header .header-item-bg a {
  border: 1px solid #fff;
  color: #fff;
  padding: 10px;
  transition: all .5s;
}

#common-header .header-item-bg a:hover {
  background-color: #fff;
  color: #164C6C;
  transition: all .5s;
}

#common-header.header-animation .header-item-bg a, #common-header.header-under-2022 .header-item-bg a {
  border: 1px solid #164C6C;
  color: #164C6C !important;
  padding: 10px;
  transition: all .5s;
}

#common-header.header-animation .header-item-bg a:hover, #common-header.header-under-2022 .header-item-bg a:hover {
  background-color: #164C6C;
  color: #fff !important;
  transition: all .5s;
}

.nav-1400 {
  display: block;
}

.nav-menu-1400 {
  display: none;
}

@media (max-width:768px) {
  .list-btn-2022 {
    padding: 0;
  }

  #common-header {
    height: 55px;
  }

  #common-header .logo-2022 img {
    height: 20px;
    width: unset;
  }

  #common-header-logo2022 .logo-2022 img {
    height: 20px;
    width: unset;
  }

  #common-header-logo2022 {
    height: 55px;
  }
}

/*hover menu*/
.overray-bg-2022 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(53, 55, 59, .3);
  z-index: 50;
  visibility: hidden;
  transition: all .5s;
}

.overray-bg-2022.shadow-2022 {
  z-index: 50;
  visibility: visible;
}

.header-nav-list-2022 li .sub-menu-2022 {
  position: absolute;
  top: 15px;
  display: none;
  width: 430px;
}

.header-nav-list-2022 li .sub-menu-2022.sub-menu2-2022 {
  position: absolute;
  top: 15px;
  display: none;
  width: 260px;
}

.header-nav-list-2022 li .sub-menu-2022 li {
  display: block;
  padding: 0;
  border-bottom: 1px solid #707070;
}

.header-nav-list-2022 li .sub-menu-2022 li:first-child {
  padding-top: 32px;
}

.header-nav-list-2022 li .sub-menu-2022 li:last-child {
  border-bottom: none;
}

.header-nav-list-2022 li .sub-menu-2022 li a {
  display: block;
  padding: 15px;
  color: #164C6C;
  background-color: #fff;
}

.header-nav-list-2022 li:hover .sub-menu-2022 {
  top: 15px;
  z-index: 100;
}

.sub-menu-2022 .arrow-right-2022::before {
  right: 40px;
  background: #164C6C;
}

.sub-menu-2022 .arrow-right-2022::after {
  right: 40px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
}

.sub-menu-2022 .arrow-right-2022:hover::before {
  right: 20px;
}

.sub-menu-2022 .arrow-right-2022:hover::after {
  right: 20px;
}

#nav-torigger-2022 {
  display: block;
  transition: .5s all;
}

#common-header.header-opac, #nav-torigger.header-opac {
  opacity: 1;
  transition: .5s all;
}

/*#common-header a img {transition: all .5s ease;width: 150px;}*/
#common-nav .nav-logo-2022 {
  position: absolute;
  top: 28px;
  left: 40px;
  transition: all .5s ease;
}

#common-nav .nav-logo-2022 img {
  height: 50px;
}

.common-nav-list-wrapper-2022 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  max-width: 90%;
}

#common-nav .common-nav-list-wrapper-2022 a {
  color: #164C6C;
  font-weight: 300;
  line-height: 180%;
  display: block;
  padding: 6px 0;
}

#common-nav .common-nav-list-wrapper-2022 a.hum-b-2022 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  padding: 12px 0;
}

#common-nav .common-nav-list-wrapper-2022 a.hum-btxt-2022 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  padding: 8px 0 0;
}

#common-nav .common-nav-list-wrapper-2022 .header-sns-2022 a:nth-of-type(2) {
  padding: 5px 0;
}

#common-nav .common-nav-list-wrapper-2022 .header-sns-2022 a:nth-of-type(2) img {
  height: 26px;
}

@media (max-width:992px) {
  #common-nav .common-nav-list-wrapper-2022 .header-sns-2022 a:nth-of-type(2) img {
    height: 22px;
  }
}

@media (max-width:768px) {
  #common-nav {
    padding-top: 60px;
  }

  #common-nav .common-nav-list-wrapper-2022 .header-sns-2022 a:nth-of-type(2) {
    line-height: 162%;
  }

  #common-nav .common-nav-list-wrapper-2022 .header-sns-2022 a:nth-of-type(2) img {
    height: 25px;
  }
}

a.hum-sub-2022 {
  margin-left: 15px;
}

#common-nav .common-nav-list-wrapper-2022 .row {
  padding: 0px 0 70px;
}

#common-nav .common-nav-list-wrapper-2022 .row:nth-child(2) {
  padding: 20px 0 0px;
}

#common-nav .bg-blue-2022 {
  text-align: center;
  width: 100%;
  background-color: #164C6C;
  margin: 0 auto;
  transition: all .5s;
}

#common-nav .bg-blue-2022:hover {
  background-color: #ECDBCC;
  color: #164C6C;
}

#common-nav .bg-blue-2022 a {
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  padding: 20px;
}

/*ハンバーガーメニュー PC下部*/
#common-nav {
  overflow-x: hidden;
}

.common-nav-bottomarea-2022 {
  margin-top: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.common-nav-side-wrapper-2022 a img {
  vertical-align: middle;
  margin-left: 2px;
}

.common-side-nav-2022 {
  display: flex;
  align-items: center;
}

.common-side-nav-2022 li {
  margin-right: 40px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.3;
}

.common-side-nav-2022 a img {
  vertical-align: middle;
  margin-left: 2px;
}

.copy-head-2022 {
  color: #164C6C;
  line-height: 120%;
  text-align: left;
}

.common-nav-menu-logo-2022 {
  display: flex;
}

.common-nav-menu-logo-2022 img {
  display: block;
  width: 100%;
  max-width: 180px;
}

.header-sns-2022 {
  display: flex;
  align-items: flex-end;
  margin-right: 50px;
}

.header-sns-2022 a {
  margin-right: 15px;
}

.header-sns-2022 a:last-child {
  margin-right: 0px;
}

.header-sns-2022 img {
  width: auto !important;
  height: 30px;
  object-fit: cover;
}

.nav-sp-2022 {
  padding: 10px 0;
  border-bottom: 1px solid #164C6C;
}

#common-nav-sp-2022 {
  display: none;
}

.common-nav-bottom-2022 {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
}

.common-nav-bottom-2022 li {
  /*width:50%;flex-basis:50%;*/
  width: 100%;
  background-color: #164C6C;
  padding: 18px 0;
}

.common-nav-bottom-2022 li a p {
  text-align: center;
  color: #fff;
}

.common-nav-list-right-2022 {
  border-left: 1px solid #fff;
}

@media (max-width:1400px) {
  .nav-1400 {
    display: none;
  }

  .nav-menu-1400 {
    display: block;
  }

  .nav-menu-1400 .header-nav-list-2022 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    height: 36px;
  }

  .header-nav-list-2022 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
  }
}

@media (max-width:1024px) {
  #common-header .logo-2022 {
    top: 20px;
    left: 40px;
    z-index: 900;
    line-height: 100% !important;
    transition: all .5s ease;
  }

  .header-nav-wrapper-2022 {
    display: none;
  }
}

@media (max-width:992px) {
  #common-nav .bg-blue-2022 {
    text-align: center;
    width: 200px;
    background-color: #164C6C;
    margin: 0 auto;
  }

  #common-nav .bg-blue-2022 a {
    font-weight: 400;
    color: #fff;
    padding: 20px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .common-side-nav-2022 li {
    margin-right: 20px;
  }

  .common-nav-list-wrapper-2022 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    max-width: 94%;
  }

  .common-nav-menu-logo-2022 img {
    display: block;
    width: 100%;
    max-width: 160px;
  }

  .header-sns-2022 {
    display: flex;
    align-items: flex-end;
    margin-right: 30px;
  }

  .header-sns-2022 a {
    margin-right: 10px;
  }

  .header-sns-2022 a:last-child {
    margin-right: 0px;
  }

  .header-sns-2022 img {
    width: auto !important;
    height: 25px;
    object-fit: cover;
  }
}

@media (max-width:768px) {
  #common-header .logo-2022, #common-header-logo2022 .logo-2022 {
    transform: none;
    left: 20px;
    /* width: 33.33333%;
    max-width: 170px; */
  }

  #common-header-logo2022 h1.logo-2022 {
    transform: none;
    left: 10px;
    /* width: 33.33333%;
    max-width: 170px; */
  }

  #common-nav .bg-blue-2022 {
    text-align: center;
    width: 200px;
    background-color: #164C6C;
    margin: 0 auto;
  }

  .common-nav-bottom-2022 {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }

  #common-nav-sp-2022 {
    display: block;
  }

  .common-nav-bottom-2022 {
    display: flex;
    position: fixed;
    bottom: -60px;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all .5s;
  }

  .menu-hide-2022 .common-nav-bottom-2022 {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all .5s;
  }

  #common-nav .nav-logo-2022 {
    position: absolute;
    top: 26px;
    left: 20px;
    transition: all .5s ease;
    width: 33.33333%;
    max-width: 170px;
  }

  .common-nav-list-wrapper-2022 {
    margin-top: 0px;
    margin-bottom: 0px;
    max-width: 100%;
    padding: 0 20px;
  }

  #common-nav .common-nav-list-wrapper-2022 a {
    color: #164C6C;
    font-weight: 300;
    line-height: 180%;
    display: block;
    padding: 8px 0;
  }

  #common-nav .nav-btnarea-2022 li {
    margin-top: 5px;
  }

  #common-nav .nav-btnarea-2022 li a {
    font-size: 14px;
    font-size: 1.4rem;
  }

  #common-nav .nav-btnarea-2022 li a img {
    vertical-align: middle;
    margin-left: 3px;
  }

  #common-nav .common-nav-list-wrapper-2022 a.hum-b-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 20px 0;
    width: 85%;
    display: inline-block;
  }

  #common-nav .bg-blue-2022 {
    width: 100%;
    margin: 0px auto;
  }

  #common-nav .bg-blue-last-2022 {
    text-align: center;
    width: 100%;
    background-color: #164C6C;
    margin: 0 auto;
    margin: 0px auto 4px;
  }

  #common-nav .bg-blue-2022 a {
    font-size: 1.4rem;
    color: #fff;
    padding: 20px;
    height: auto;
  }

  #common-nav .bg-blue-2022 a, #common-nav .bg-blue-last-2022 a {
    font-weight: 400;
    color: #fff;
    padding: 20px;
  }

  .common-nav-list-wrapper-2022 .common-box {
    margin: 40px 0;
  }

  .common-nav-list-wrapper-2022 .flex-2022 .left-box-2022 {
    width: 50%;
    padding-right: 2px;
    margin-bottom: 4px;
  }

  .common-nav-list-wrapper-2022 .flex-2022 .right-box-2022 {
    width: 50%;
    padding-left: 2px;
    margin-bottom: 4px;
  }

  #common-nav .common-nav-list-wrapper-2022 .common-nav-side-wrapper-2022 {
    position: relative;
    bottom: 0px;
    left: 0px;
  }

  #common-nav .common-nav-list-wrapper-2022 .common-nav-side-wrapper-2022 a {
    text-align: center;
    padding: 6px 0;
  }

  .copy-head-2022 {
    color: #164C6C;
    line-height: 120%;
  }

  .common-nav-menu-logo-2022 {
    position: relative;
    right: 0px;
    bottom: 0px;
    width: 140px;
    margin: 0 auto;
  }

  .common-nav-menu-logo-2022 img {
    margin: 0;
    max-width: 140px;
  }

  .nav-sp-2022 {
    padding: 0;
    border-bottom: 1px solid #164C6C;
  }

  .header-sns-2022 {
    position: relative;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-sns-2022 a {
    margin-right: 15px;
  }

  .header-sns-2022 a:last-child {
    margin-right: 0px;
  }

  .header-sns-2022 img {
    width: auto !important;
    height: 30px;
    object-fit: cover;
  }
}

@media (max-width:576px) {
  #common-header h1.logo-2022 {
    position: absolute;
    left: 20px;
    width: 180px;
  }

  #common-header-logo2022 h1.logo-2022 {
    position: absolute;
    width: 180px;
  }
}

@media (max-width:420px) {
  #common-header h1.logo-2022 {
    left: 10px;
    width: 160px;
  }

  #common-header-logo2022 h1.logo-2022 {
    left: 5px;
    width: 160px;
  }
}

/*ハンバーガーメニュー ボタン*/
#nav-torigger-2022 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  width: 38px;
  height: 35px;
  z-index: 1000;
  transition: all .5s ease;
}

#nav-torigger-2022 span {
  position: absolute;
  left: 0;
  transition: all .5s ease
}

#nav-torigger-2022 span.hamburger {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
}

#nav-torigger-2022.header-tran span.hamburger {
  display: block;
  width: 100%;
  height: 2px;
  background: #164C6C;
}

.header-under-2022 #nav-torigger-2022 span.hamburger {
  display: block;
  width: 100%;
  height: 2px;
  background: #164C6C;
}

#nav-torigger-2022 span.hamburger:nth-of-type(1) {
  top: 6px
}

#nav-torigger-2022 span.hamburger:nth-of-type(2) {
  top: 16px;
  left: 3px;
}

#nav-torigger-2022 span.hamburger:nth-of-type(3) {
  top: 26px;
  opacity: 1;
}

#nav-torigger-2022.active span.hamburger {
  background: #164C6C;
}

#nav-torigger-2022.active span.hamburger:nth-of-type(1) {
  transform: translate(0, 6px) rotate(45deg)
}

#nav-torigger-2022.active span.hamburger:nth-of-type(2) {
  transform: translate(0, -4px) rotate(-45deg);
  left: 0px;
}

#nav-torigger-2022.active span.hamburger:nth-of-type(3) {
  opacity: 0
}

@media (max-width:768px) {
  #nav-torigger-2022 span.hamburger:nth-of-type(2) {
    top: 16px;
    left: 0px;
  }
}

/* main
====================================================*/
#main.bg-2022 {
  background-color: #F1EBE6;
  transition: all .3s;
}

#main.bg-2022.change-bg {
  background-color: #ffffff;
  transition: all .3s;
}

#main.bg-2022.change-bg2 {
  background-color: #F1EBE6;
  transition: all .3s;
}

#main.bg-2022.change-bg-tra {
  background-color: transparent;
  transition: all .1s;
}

/*mv-index-2022*/
.mv-index-2022 {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

@media (orientation: landscape) and (max-width:768px) {
  .mv-index-2022 {
    width: 100%;
    height: 700px;
    position: relative;
    overflow: hidden;
  }
}

/* .mv-index-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: rgba(0, 0, 0, .3);
} */

/*mv-txt*/
.mv-txt-2022 {
  position: absolute;
  top: 30%;
  left: 9%;
  z-index: 25;
}

.mv-txt-2022 h1 {
  color: #fff;
  font-weight: 400;
  margin-bottom: 10px;
}

.mv-txt-2022 .mv-txt-lead {
  color: #fff;
  font-weight: 400;
  margin-bottom: 10px;
}

.mv-txt-2022 .mv-txt-bottom-2022 {
  margin-top: 30px;
}

.mv-txt-2022 .mv-txt-bottom-2022 p {
  color: #fff;
  font-weight: 700;
  line-height: 200%;
}

.mv-txt-bottom-2022 .arrow-right-2022 {
  display: inline-block;
  margin-top: 30px;
}

.mv-txt-bottom-2022 .arrow-right-2022 p {
  font-size: 14px;
  font-size: 1.4rem;
}

@media (max-width:1024px) {
  .mv-txt-2022 {
    position: absolute;
    top: 30%;
    left: 12%;
    z-index: 20;
  }
}

@media (max-width:768px) {
  .mv-txt-2022 {
    position: absolute;
    top: 22%;
    left: 5%;
    z-index: 20;
  }

  .mv-txt-2022 h1 {
    margin-bottom: 5px;
  }

  .mv-txt-2022 .mv-txt-bottom-2022 {
    margin-top: 20px;
  }

  .mv-txt-2022 .mv-txt-bottom-2022 p {
    line-height: 190%;
  }

  .mv-txt-bottom-2022 .arrow-right-2022 {
    margin-top: 20px;
  }

  .mv-txt-bottom-2022 .arrow-right-2022 p {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

@media (max-width:640px) {
  .mv-txt-2022 {
    position: absolute;
    top: 22%;
    left: 5%;
    z-index: 20;
  }

  .mv-txt-2022 .mv-txt-bottom-2022 p {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 175%;
  }
}

/*mv-tour*/
.mv-tour-2022 {
  position: fixed;
  top: 40%;
  right: 0;
  z-index: 20;
  display: block;
  transition: all .5s;
  overflow: hidden;
}

.mv-tour-2022 a {
  position: relative;
  display: block;
  z-index: 20;
  transition: all .5s;
  margin-bottom: 10px;
}

.mv-tour-2022 a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, .0);
  z-index: 100;
  transition: all .5s;
}

.mv-tour-2022 a:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, .2);
  z-index: 100;
  transition: all .5s;
}

.mv-tour-2022 img {
  width: 58px;
  transition: all .5s;
}

.mv-tour-2022 p {
  color: #fff;
  font-weight: 400;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

@media (max-width: 786px) {
  .mv-tour-2022 {
    display: none;
  }
}

/*mv-swiper*/
.swiper-mv {
  position: relative;
  width: 100%;
  height: 100vh !important;
  overflow: hidden;
}

.swiper-mv .swiper-slide {
  height: 100vh;
}

.swiper-mv span {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
}

/*Firefox*/
@-moz-document url-prefix() {
  .swiper-mv {
    position: relative;
    width: 100%;
    height: 100vh !important;
    overflow: hidden;
  }

  .swiper-mv .swiper-slide {
    height: 100vh;
    -moz-height: 100vh;
  }

  .swiper-mv span {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
  }
}

.mv02_bg {
  background: url(../img/top/place25-sofa-office.jpg)no-repeat center center / cover;
}

.mv03_bg {
  background: url(../img/top/oliver-osaka-office.jpg)no-repeat center center / cover;
}

.mv04_bg {
  background: url(../img/top/place25-wonwchair-product.jpg)no-repeat center center / cover;
}



@media (max-width: 768px) {
  .swiper-mv span {
    min-width: initial;
    min-height: initial;
    width: 100%;
    height: 100%;
  }

  .mv02_bg {
    background: url(../img/top/place25-sofa-office-sp.jpg)no-repeat center center / auto 100%;
  }

  .mv03_bg {
    background: url(../img/top/oliver-osaka-office-sp.jpg)no-repeat center center / auto 100%;
  }

  .mv04_bg {
    background: url(../img/top/place25-wonwchair-product-sp.jpg)no-repeat center center / auto 100%;
  }
}

.slide-img01-2022 {
  -webkit-animation: zoom-p paused;
  animation: zoom-p paused;
}

@-webkit-keyframes zoom-p {
  0% {
    -webkit-transform: scale(1.10) rotate(0.001deg);
    transform: scale(1.10) rotate(0.001deg);
  }

  100% {
    -webkit-transform: scale(1.10) rotate(0.001deg);
    transform: scale(1.10) rotate(0.001deg);
  }
}

@keyframes zoomUp-p {
  0% {
    -webkit-transform: scale(1.10) rotate(0.001deg);
    transform: scale(1.10) rotate(0.001deg);
  }

  100% {
    -webkit-transform: scale(1.10) rotate(0.001deg);
    transform: scale(1.10) rotate(0.001deg);
  }
}

.swiper-slide-active .slide-img01-2022, .swiper-slide-duplicate-active .slide-img01-2022, .slide-img01-2022.is-play, .is-active .slide-img01-2022, .swiper-slide-prev .slide-img01-2022 {
  -webkit-animation: zoom 9s linear 0s 1 normal both;
  animation: zoom 9s linear 0s 1 normal both;
}

@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1.18) rotate(0.001deg);
    transform: scale(1.18) rotate(0.001deg);
  }

  100% {
    -webkit-transform: scale(1.10) rotate(0.001deg);
    transform: scale(1.10) rotate(0.001deg);
  }
}

@keyframes zoom {
  0% {
    -webkit-transform: scale(1.18) rotate(0.001deg);
    transform: scale(1.18) rotate(0.001deg);
  }

  100% {
    -webkit-transform: scale(1.10) rotate(0.001deg);
    transform: scale(1.10) rotate(0.001deg);
  }
}

.slide-link {
  color: #fff;
  font-size: 16px!important;
  position: absolute;
  left: 40px;
  bottom: 40px;
  text-decoration: underline;
}

.swiper-mv .swiper-slide{
  pointer-events: initial!important;
}

@media (max-width: 1000px) {
  .slide-link {
    display: none;
  }
}

/*news*/
.mv-newsbox {
  position: absolute;
  right: 10%;
  bottom: 8%;
  width: 500px;
  z-index: 10;
  color: #fff;
  padding: 20px 15px;
}

.mv-newsbox .slide-news {
  display: block;
  width: 100%;
  height: 100%;
}

.topnews-content-2022 {
  display: flex;
  align-items: center;
  height: 60px;
}

.topnews-txt-2022 {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  font-size: 25px;
  font-size: 2.5rem;
  color: #fff;
}

.mv-newsbox .topnews-txt-2022 {
  position: relative;
  z-index: 15;
}

.topnews-date-2022 {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  color: #fff;
  margin: 0 25px;
}

.topnews-title-2022 {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  line-height: 180%;
  color: #fff;
  width: 280px;
}

.swiper-mv-news .swiper-pagination-progressbar {
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: auto !important;
  bottom: -18px;
}

.swiper-mv-news .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}

.swiper-mv-news.swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-mv-news.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 1px;
  left: 0;
  top: 0;
}

@media (max-width: 992px) {
  .swiper-mv-news .swiper-pagination-progressbar {
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: auto !important;
    bottom: -30px;
  }
}

@media (max-width: 768px) {
  .mv-newsbox {
    position: absolute;
    right: auto;
    left: 0;
    bottom: 80px;
    width: 100%;
    z-index: 10;
    color: #fff;
    padding: 20px;
  }

  .topnews-content-2022 {
    display: flex;
    align-items: flex-start;
    height: 60px;
  }

  .mv-newsbox .topnews-txt-2022 {
    font-size: 20px;
    font-size: 2.0rem;
    color: #fff;
  }

  .topnews-date-2022 {
    color: #fff;
    margin: 15px 15px 0 0;
  }

  .topnews-title-2022 {
    color: #fff;
    margin: 15px 0 0;
  }

  .swiper-mv-news .swiper-pagination-progressbar {
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: auto !important;
    bottom: -41px;
  }
}

/*top_mv*/
.video-box-2022 {
  background-color: #ccc;
}

/*top-main01*/
.top-concept {
  margin-top: 100px
}

#top-main01 .common-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  padding: 0px 0 20px;
  background-color: #fff;
}

#top-main01 .common-box .arrow-box-blue {
  text-align: left;
  margin: 30px 0 50px 80px;
}

#top-main01 .common-box .arrow-box-blue p {
  position: relative;
  display: inline-block;
  padding: 15px 100px 15px 25px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

#top-main01 .common-box2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;
  position: relative;
  padding: 0px 5% 50px;
  background-color: #fff;
}

#top-main01 .common-box3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: left;
  position: relative;
  padding: 0px 0 20px;
}

#top-main01 .common-left-box {
  flex-basis: 40%;
  padding: 0;
  position: relative;
  top: -60px;
}

#top-main01 .common-right-box {
  flex-basis: 60%;
  background-color: #fff;
}

#top-main01 .common-right-box .common-txtarea-2022 {
  width: 100%;
  padding: 50px 80px;
}

#top-main01 .common-right-box .common-txtarea-2022 h2 {
  font-size: 35px;
  font-size: 3.5rem;
  font-weight: 400;
}

@media (min-width:1001px) and (max-width:1300px) {
  #top-main01 .common-box {
    align-items: unset;
  }

  #top-main01 .common-left-box {
    top: 0;
  }
}

@media (max-width:768px) {
  #top-main01 .common-right-box .common-txtarea-2022 h2 {
    font-size: 28px;
    font-size: 2.8rem;
  }
}

@media (max-width:576px) {
  #top-main01 .common-right-box .common-txtarea-2022 h2 {
    font-size: 23px;
    font-size: 2.3rem;
  }
}

#top-main01 .common-right-box h2, #top-main01 .common-right-box h3 {
  padding: 10px 0 20px;
  line-height: 150%;
}

#top-main01 .common-right-box p {
  padding: 0px;
  line-height: 200%;
}

#top-main01 .common-box2 p {
  font-size: 14px;
  font-size: 1.4rem;
  margin-top: 15px;
  text-align: center;
}

#top-main01 .flex-6 {
  flex-basis: 15%;
  padding: 10px;
}

#top-main01 .flex-6 img {
  display: block;
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
}

#top-main01 .arrow-right-2022::before {
  background-color: #164C6C;
}

#top-main01 .arrow-right-2022::after {
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
}

#top-main01 .flex-txt {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
}

.flex-7 {
  flex-basis: 16%;
  padding: 0.6vw 0px 0px;
  margin-right: 0.8%;
}

#top-main01 .eng-txt {
  text-align: right;
  margin: 0;
}

/*.flex-7:nth-child(1),.flex-7:nth-child(8){padding:10px 5px 10px 0;}
.flex-7:nth-child(7),.flex-7:nth-child(14){padding:10px 0px 10px 5px;}*/
.flex-7:nth-child(6n) {
  margin-right: 0;
}

.flex-7 img {
  width: 100%;
  height: auto;
}


/*common-box4*/
#top-main01 .common-box4 {
  position: relative;
  padding: 40px 0px;
}

#top-main01 .common-box4 .flex-box-2022 {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px 0 0;
}

#top-main01 .common-box4 .flex-3 {
  width: 33%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#top-main01 .common-box4 .flex-3.center-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: #164C6C;
}

#top-main01 .common-box4 .flex-3.center-2022::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: #164C6C;
}

#top-main01 .common-box4 .common-area {
  position: relative;
  padding: 20px;
  text-align: center;
  margin: 0px;
}

#top-main01 .common-box4 .common-area img {
  margin: 20px 0;
  width: 40%;
}

#top-main01 .common-box4 .common-area h4 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  padding: 0 0 25px;
}

#top-main01 .common-box4 .common-area p {
  text-align: left;
  padding: 0 10px;
}

#top-main01 .common-box4 .flex-3 .arrow-box-blue {
  margin: 30px 0 0;
}

#top-main01 .common-box4 .flex-3 .arrow-box-blue p {
  font-size: 1.4rem;
  width: 80%;
  min-height: 94px;
  padding: 15px 50px 15px 15px;
}

#top-main01 .common-box4 .flex-3 .arrow-box-blue p.flex-txt {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

#top-main01 .common-box4 .flex-3 .arrow-box-blue p::before {
  position: absolute;
  top: 50%;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#top-main01 .common-box4 .flex-3 .arrow-box-blue p::after {
  position: absolute;
  top: 50%;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

#top-main01 .common-box4 .flex-3 .arrow-box-blue p:hover::before {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#top-main01 .common-box4 .flex-3 .arrow-box-blue p:hover::after {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

@media (max-width:1300px) {
  #top-main01 .common-box4 .common-area h4 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 0 0 25px;
  }
}

@media (max-width:1200px) {
  #top-main01 .common-right-box .common-txtarea-2022 {
    width: 100%;
    padding: 50px 60px;
  }
}

@media (max-width:1000px) {
  .top-concept {
    margin-top: 20px;
  }

  #top-main01 .common-box {
    display: block;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0px;
    background-color: transparent;
  }

  #top-main01 .common-box .arrow-box-blue p {
    position: relative;
    display: inline-block;
    background-color: #164C6C;
    color: #fff;
    padding: 15px 80px 15px 25px;
    vertical-align: middle;
    text-decoration: none;
    transition: all .5s;
  }

  #top-main01 .common-left-box {
    flex-basis: 100%;
    width: calc(100% - 15px);
    padding: 0;
    margin-left: 0px;
    margin-right: auto;
    position: relative;
    top: 0px;
  }

  #top-main01 .common-right-box {
    flex-basis: 100%;
    width: calc(100% - 15px);
    padding: 0 0 30px;
    margin-left: auto;
    margin-right: 0px;
    position: relative;
    margin-top: -60px;
  }

  #top-main01 .common-right-box .common-txtarea-2022 {
    width: 100%;
    padding: 30px 20px;
  }

  #top-main01 .common-box .arrow-box-blue {
    text-align: left;
    margin: 30px 20px 50px;
  }

  #top-main01 .common-right-box h3 {
    padding: 10px 0 20px;
    line-height: 150%;
  }

  #top-main01 .common-right-box p {
    padding: 0px;
    line-height: 200%;
  }

  #top-main01 .common-box2 {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 40px 0;
    margin-right: -15px;
  }

  #top-main01 .flex-6 {
    flex-basis: 33.33333%;
    padding: 15px;
    margin-top: 2%;
    background: #fff;
  }

  #top-main01 .flex-6 img {
    display: block;
    max-width: 60%;
    margin: 0 auto;
  }

  #top-main01 .flex-txt {
    display: block;
    justify-content: space-between;
    margin: 80px 0 30px;
  }

  #top-main01 .flex-txt .sup-txt {
    font-size: 1.4rem;
    margin: 10px 0 0;
  }

  .flex-7 {
    flex-basis: 33%;
    margin-right: 0.5%;
    padding: 0.4vw 0 0;
  }

  .flex-7:nth-child(3n) {
    margin-right: 0;
  }

  /*.flex-7:nth-child(1),.flex-7:nth-child(8){padding:0;}
.flex-7:nth-child(7),.flex-7:nth-child(14){padding:0;}
.flex-7:nth-child(1),.flex-7:nth-child(4),.flex-7:nth-child(7),.flex-7:nth-child(10),.flex-7:nth-child(13){padding:4px 4px 4px 0;}
.flex-7:nth-child(2),.flex-7:nth-child(5),.flex-7:nth-child(8),.flex-7:nth-child(11),.flex-7:nth-child(14){padding:4px 4px;}
.flex-7:nth-child(3),.flex-7:nth-child(6),.flex-7:nth-child(9),.flex-7:nth-child(12){padding:4px 0px 4px 4px;}
*/
  #top-main01 .common-box4 .flex-box-2022 {
    display: block;
    flex-wrap: wrap;
    padding: 0px
  }

  #top-main01 .common-box4 .flex-3 {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 0;
  }

  #top-main01 .common-box4 .flex-3.center-2022::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    right: 0;
    width: 100%;
    height: 1px;
    background: #164C6C;
  }

  #top-main01 .common-box4 .flex-3.center-2022::after {
    content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: #164C6C;
  }

  #top-main01 .common-box4 .common-area {
    position: relative;
    padding: 0px 10px 20px;
    text-align: center;
    margin: 0px;
  }

  #top-main01 .common-box4 .common-area img {
    margin: 0px 0;
    width: 40%;
  }

  #top-main01 .common-box4 .common-area h4 {
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 600;
    padding: 15px 0;
  }

  #top-main01 .common-box4 .common-area p {
    text-align: left;
    padding: 0;
  }

  #top-main01 .common-box4 .flex-3 .arrow-box-blue {
    margin: 10px 0 0;
  }

  #top-main01 .common-box4 .flex-3 .arrow-box-blue p {
    font-size: 1.4rem;
    width: 75%;
    min-height: auto;
    padding: 15px 50px 15px 25px;
  }
}

@media (max-width:768px) {
  #top-main01 .common-box2 {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 20px 15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 15px;
  }

  #top-main01 .common-box2 p {
    font-size: 13px;
    font-size: 1.3rem;
    margin-top: 15px;
    text-align: center;
  }

  #top-main01 .common-box4 {
    position: relative;
    padding: 0;
    margin-left: 0;
    margin-right: 0px;
    margin-top: 0px;
  }

  #top-main01 .common-box4 .common-area h4 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 15px 0;
  }

  #top-main01 .flex-6 {
    flex-basis: 33.33333%;
    padding: 10px;
    margin-top: 2%;
    background: #fff;
  }

  #top-main01 .flex-6 img {
    display: block;
    max-width: 80%;
    margin: 0 auto;
  }

  .flex-7 {
    flex-basis: 49%;
    margin-right: 2%;
    padding: 1.9vw 0px 0px;
  }

  .flex-7:nth-child(2n) {
    margin-right: 0;
  }

  .flex-7:nth-child(3n) {
    margin-right: 2%;
  }

  .flex-7:nth-child(6n) {
    margin-right: 0% !important;
  }

  #top-main01 .trailmade-title-box .top-sub-title {
    margin: 25px 0 0 !important;
  }

  #top-main01 .common-box .arrow-box-blue {
    margin: 0 20px;
  }

  #top-main01 .flex-txt {
    margin: 40px 0 30px;
  }
}

/*top title area*/
.trailmade-title-box .top-sub-title {
  margin: 30px 0 15px;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 300;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
}

@media (max-width:768px) {
  .trailmade-title-box .top-sub-title {
    text-align: left;
    margin: 25px 0 50px;
  }
}

@media (max-width:576px) {
  #top-projects .trailmade-title-box .top-sub-title {
    margin: 25px 0 65px;
  }
}

@media (max-width:768px) {
  .trailmade-title-box p.top-title-2022 {
    font-size: 35px !important;
    font-size: 3.5rem !important;
  }

  /* #top-projects .trailmade-title-box p {
    margin: 0px 0 0;
  } */
}

@media (max-width:640px) {
  .trailmade-title-box p.top-title-2022 {
    font-size: 28px !important;
    font-size: 2.8rem !important;
  }

  .trailmade-title-box p {
    font-size: 13px;
    font-size: 1.3rem;
  }

  .trailmade-title-box .top-sub-title {
    font-size: 15px;
    font-size: 1.5rem;
  }

  .trailmade-title-box .trailmade-title-ja {
    margin: -35px 0 0;
    font-size: 1.8rem !important;
  }
}

/*top-projects*/
#top-projects {
  overflow-x: hidden;
}

.swiper-projects-2022 .text-block {
  font-size: 16px;
  font-size: 1.6rem;
  margin-top: 15px;
  margin-bottom: 20px;
  text-align: center;
}

.swiper-projects-2022 .text-block h4 {
  font-size: 16px;
  font-size: 1.6rem;
  color: #164C6C;
}

.top-com {
  text-align: center;
  font-weight: 300;
  line-height: 200%;
}

@media (max-width:768px) {
  #top-projects .top-title-box {
    padding: 0;
  }

  .swiper-projects-2022 .text-block h4 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 175%;
    margin-bottom: 0;
  }

  .top-title-box p {
    margin: 5px 0 0;
  }

  #top-projects .top-title-box .top-sub-title {
    text-align: left;
    margin: 25px 0 50px !important;
  }

  #top-projects .arrow-box-blue {
    margin: 30px 0 0;
  }

}

@media (max-width:576px) {
  #top-projects .top-title-box .top-sub-title {
    margin: 25px 0 65px !important;
  }

  .swiper-projects-2022 .text-block h4 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 175%;
  }
}


/*top-projects*/
#top-project-txt .common-box {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding: 0px 0 40px;
  margin-bottom: 50px;
  margin-top: 50px;
  width: 100%;
}

#top-project-txt .common-left-box {
  width: 100%;
  max-width: 600px;
  padding: 50px 60px;
  background-color: #fff;
  position: absolute;
  z-index: 15;
  margin-left: auto;
  right: 0;
}

#top-project-txt .common-left-box h2, #top-project-txt .common-left-box h3 {
  font-weight: 400;
  padding: 10px 0 20px;
  line-height: 150%;
}

#top-project-txt .common-left-box h2 {
  font-size: 35px;
  font-size: 3.5rem;
}

@media (max-width:768px) {

  #top-project-txt .common-left-box h2 {
    font-size: 30px;
    font-size: 3.0rem;
  }
}

@media (max-width:576px) {
  #top-project-txt .common-left-box h2 {
    font-size: 23px;
    font-size: 2.3rem;
  }
}

#top-project-txt .common-left-box .common-txtarea-2022 p {
  line-height: 200%;
}

#top-project-txt .arrow-box-blue {
  text-align: left;
  margin: 50px 0 0px;
}

#top-project-txt .common-right-box {
  width: 70%;
  padding: 0;
  position: relative;
  top: 30px;
  left: 0;
  z-index: 5;
  margin-right: auto;
}

@media (max-width:1200px) {
  #top-project-txt {
    overflow: unset !important;
  }

  #top-project-txt .common-box {
    display: block;
    margin: 0;
  }

  #top-project-txt .common-right-box {
    width: calc(100% - 15px);
    padding: 0;
    position: relative;
    z-index: 5;
    margin-left: 0px;
    margin-right: auto;
  }

  #top-project-txt .common-left-box {
    width: calc(100% - 15px);
    max-width: unset;
    padding: 50px 30px;
    position: relative;
    z-index: 15;
    margin-left: auto;
    margin-right: 0px;
    margin-top: -60px;
  }
}

@media (max-width:768px) {
  #top-project-txt .common-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
    padding: 0;
    margin-bottom: -50px;
    margin-top: 0;
    background-color: transparent;
  }

  #top-project-txt .common-left-box {
    flex-basis: 100%;
    width: calc(100% - 15px);
    padding: 0;
    max-width: initial;
    margin-left: 0;
    margin-right: auto;
    position: relative;
    top: -60px;
    order: 2;
  }

  #top-project-txt .common-left-box .common-txtarea-2022 {
    width: 100%;
    padding: 30px 20px;
  }

  #top-project-txt .arrow-box-blue {
    text-align: center;
    margin: 50px 0 0px;
  }

  #top-project-txt .common-right-box {
    flex-basis: 100%;
    width: calc(100% - 15px);
    padding: 0;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    top: 0px;
    order: 1;
  }
}

/*top-coordinate*/
#top-coordinate {
  overflow-x: hidden;
}

#top-coordinate .swiper-coordinate .swiper-wrapper {
  transition-timing-function: linear;
}

#top-coordinate .swiper-coordinate img {
  width: 100%;
}

#top-coordinate .arrow-box-blue {
  margin: 50px 0 0;
}

@media (max-width:768px) {
  #top-coordinate .top-title-box .top-sub-title {
    margin: 25px 0 30px !important;
  }
}

/*top-products*/
#top-products {
  background: #F1EBE6;
}

#top-products .common-box {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  margin: 0px 0 60px;
}

#top-products .common-left-box {
  flex-basis: 40%;
  padding: 40px 0;
}

#top-products .common-right-box {
  flex-basis: 60%;
  padding: 30px 45px;
  background-color: #fff;
}

#top-products .flex-6 {
  flex-basis: 16%;
  padding: 15px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#top-products .flex-6::before {
  content: '';
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  /* background-color: #D8CCB7; */
}

#top-products .flex-6 img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#top-products .flex-6 p {
  position: relative;
  z-index: 10;
  margin-top: -10px;
  color: #164C6C;
  text-align: center;
}

#top-products .flex-3 {
  flex-basis: 32%;
  padding: 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#top-products .flex-3 a {
  position: relative;
  z-index: 10;
}

#top-products .flex-3 img {
  position: relative;
  z-index: 3;
}

#top-products .flex-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, .16);
}

#top-products .flex-3 img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#top-products .flex-3 p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, .8);
  z-index: 10;
  margin-top: 0px;
  padding: 12px 0 14px;
  color: #164C6C;
  line-height: 100%;
  text-align: center;
}

.right-line-title {
  margin: 60px 0 30px;
  position: relative;
  z-index: 10;
}

.right-line-title h3 {
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  position: relative;
  z-index: 5;
  font-weight: 500;
  background-color: #F1EBE6;
  transition: all 1s;
  padding-right: 10px;
}

.right-line-title.change-bg h3 {
  background-color: #F1EBE6;
  transition: all 1s;
}

.right-line-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  height: 1px;
  background-color: #164C6C;
}

#top-products .common-box2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  ;
  margin: 0 auto;
}

.capcell-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 80%;
}

#top-products .common-box2-link {
  width: 49%;
  transition: all 0.4s;
}

#top-products .common-box2-link:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  /* #top-products {
    padding: 0 !important;
    margin: 0 !important;
  } */

  #top-products .common-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 0 60px;
  }

  #top-products .flex-6 {
    flex-basis: 48%;
    padding: 15px;
    margin-top: 4%;
    background-color: #fff;
    overflow: hidden;
    text-align: center;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    transition: all .5s ease-out;
  }

  #top-products .flex-6 p, #top-products .flex-3 p {
    font-size: 13px;
    font-size: 1.3rem;
  }

  #top-products .flex-3 {
    flex-basis: 100%;
    padding: 0;
    margin: 15px 0;
    overflow: hidden;
    text-align: center;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    transition: all .5s ease-out;
  }

  .right-line-title {
    margin-bottom: 0px;
    position: relative;
    z-index: 10;
  }

  .right-line-title h3 {
    font-size: 14px;
    font-size: 1.4rem;
  }

  #top-products .common-box2 {
    position: relative;
    display: block;
    margin: 0 auto;
  }

  #top-products .common-box2-link {
    width: 100%;
    margin:0;
    display: block;
  }
}

/*top-office*/
#top-office {
  background-color: #F1EBE6;
}

#top-office .common-box {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 40px 0;
}

#top-office .common-left-box {
  flex-basis: 50%;
  padding: 40px 0 40px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sticky__inner-2022 {
  position: sticky;
  position: -webkit-sticky;
  top: 150px;
}

#top-office .common-left-box .common-left-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
}

#top-office .common-left-box .common-text-area {
  content: '';
  position: absolute;
  top: 34%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
}

#top-office .top-title-box .top-sub-title {
  text-align: center;
}

#top-office .common-text-area .office-sub-txt {
  text-align: center;
  display: block;
  margin: 25px 0 35px;
}

#top-office .common-text-area .arrow-box-blue p {
  width: 80%;
  max-width: 380px;
}

#top-office .common-right-box {
  flex-basis: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow-y: visible;
}

#top-office .common-right-box h3 {
  margin: 10px 0 5px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #164C6C;
}

#top-office .common-right-box p {
  font-size: 13px;
  font-size: 1.3rem;
  color: #164C6C;
}

#top-office .flex-2 {
  width: 45%;
  margin: 2.5%;
}

#top-office .office-hover-2022 {
  overflow: hidden;
  transition: all .5s;
}

#top-office .office-hover-2022 img {
  transition: all .5s;
}

#top-office .office-hover-2022 img:hover {
  transform: scale(1.05);
  opacity: .7;
  transition-duration: 0.5s;
  transition: all .5s;
}

/*officetour-ページ*/
#office01 {
  padding-top: 16%;
}

#office02 {
  padding-top: 16%;
}

#office03 {
  padding-top: 16%;
}

#office04 {
  padding-top: 16%;
}

#office05 {
  padding-top: 16%;
}

#office06 {
  padding-top: 16%;
}

#office07 {
  padding-top: 16%;
}

#office08 {
  padding-top: 16%;
}

#office10 {
  padding-top: 16%;
  margin-top: -16%;
}

@media (max-width: 1300px) {
  #top-office .common-text-area .office-sub-txt {
    display: block;
    width: 90%;
    max-width: 295px;
    margin: 25px 0 35px 10%;
  }

  #top-office .common-text-area .arrow-box-blue p {
    width: 80%;
    max-width: 295px;
  }
}

@media (max-width: 850px) {
  #top-office .common-left-box .common-left-bg {
    width: 100%;
  }

  .sticky__inner-2022 {
    top: 170px;
  }
}

@media (max-width: 800px) {
  .sticky__inner-2022 {
    top: 200px;
  }
}

@media (max-width: 768px) {
  #top-office .common-box {
    display: block;
    flex-wrap: wrap;
    position: relative;
    padding: 40px 0 0;
  }

  #top-office .common-left-box {
    flex-basis: 50%;
    width: 100%;
    padding: 0px 0 0;
    margin-bottom: -50px;
    position: relative;
  }

  #top-office .common-left-box .common-text-area {
    content: '';
    position: absolute;
    top: 46%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
  }

  #top-office .common-text-area .office-sub-txt {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 25px auto 45px;
  }

  #top-office .common-text-area .arrow-box-blue p {
    width: auto;
    max-width: initial;
  }

  #top-office .common-right-box {
    flex-basis: 50%;
    display: block;
    overflow-y: visible;
  }

  #top-office .common-right-box h3 {
    margin: 10px 0;
    font-size: 16px;
    font-size: 1.6rem;
  }

  #top-office .common-right-box p {
    font-size: 13px;
    font-size: 1.3rem;
  }

  #top-office .flex-2 {
    width: 100%;
    margin: 30px 0;
  }

  #top-office .flex-2 img {
    width: 100%;
  }
}

@media (max-width: 640px) {
  #top-office .common-text-area .office-sub-txt {
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  #top-office .common-text-area .office-sub-txt {
    max-width: 100%;
  }
}

/*top-para*/
#top-parallax {
  overflow: hidden;
}

#top-parallax .parallax-2022 {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #E6DDC7;
  -webkit-background-size: cover;
  background-size: cover;
  overflow-x: hidden !important;
  z-index: -1;
}

.change-bg-tra #top-parallax .parallax-2022 {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/top/counter_sofa.jpg) no-repeat center center/cover;
  overflow-x: hidden !important;
  z-index: -1;
}

@media (max-width: 768px) {
  .change-bg-tra #top-parallax .parallax-2022 {
    background: url(../img/top/counter_sofa_sp.jpg) no-repeat center center/cover;
  }
}

/*top-menu*/
#top-menu h2 {
  font-family: 'futura-pt', serif;
  font-weight: 500;
  font-size: 34px;
  font-size: 3.4rem;
}

#top-menu {
  margin-top: 40vh;
  background-color: #F1EBE6;
}

#top-menu .common-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  position: relative;
  padding: 40px 0;
}

#top-menu .common-box .flex-4 {
  flex-basis: 25%;
  padding: 30px 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  transition: all .5s;
}

#top-menu .common-box .flex-4:hover {
  background-color: #ECDBCC;
}

#top-menu .common-box .flex-4:nth-child(2), #top-menu .common-box .flex-4:nth-child(3), #top-menu .common-box .flex-4:nth-child(4) {
  border-left: 0px;
  border-right: 1px solid #164C6C;
}

#top-menu .common-box .flex-4 h3 {
  font-family: 'futura-pt', serif;
  font-size: 30px;
  font-size: 3.0rem;
  color: #164C6C;
  text-align: center;
  padding: 10px 0;
  transition: all .5s;
}

#top-menu .common-box .flex-4 p {
  color: #164C6C;
  text-align: center;
  transition: all .5s;
}

#top-menu .common-box .flex-4:hover p {
  color: #164C6C;
  transition: all .5s;
}

#top-menu .common-box .flex-4:hover h3, #top-menu .common-box .flex-3:hover p {
  color: #164C6C;
  transition: all .5s;
}

#top-menu .comming-area-2022 {
  opacity: .5;
}

#top-menu .comming-area-2022 .comming-2022 {
  opacity: 1 !important;
}



@media (max-width: 992px) {
  #top-menu .common-box .flex-4 {
    flex-basis: 50%;
    margin: 30px 0;
    transition: all .5s;
  }

  #top-menu .common-box .flex-4:nth-child(3) {
    border-left: 1px solid #164C6C;
    border-right: 1px solid #164C6C;
  }
}

@media (max-width:768px) {
  #top-menu h2 {
    font-size: 30px;
    font-size: 3.0rem;
  }

  #top-menu {
    margin-top: 15vh;
  }

  #top-menu .common-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 40px 0;
  }

  #top-menu .common-box .flex-4 {
    flex-basis: 100%;
    padding: 40px 20px;
    margin: 0px 0;
    display: block;
  }

  #top-menu .common-box .flex-4:nth-child(1), #top-menu .common-box .flex-4:nth-child(2), #top-menu .common-box .flex-4:nth-child(3), #top-menu .common-box .flex-4:nth-child(4) {
    border-right: none;
    border-left: none;
  }

  #top-menu .common-box .flex-4:nth-child(1), #top-menu .common-box .flex-4:nth-child(2), #top-menu .common-box .flex-4:nth-child(3) {
    border-top: 1px solid #164C6C;
  }

  #top-menu .common-box .flex-4:nth-child(4) {
    border-top: 1px solid #164C6C;
    border-bottom: 1px solid #164C6C;
  }

  #top-menu .common-box .flex-4 h3 {
    font-size: 22px;
    font-size: 2.2rem;
    text-align: left;
    padding: 10px 0;
  }

  #top-menu .common-box .flex-4 p {
    font-size: 13px;
    font-size: 1.3rem;
    text-align: left;
  }
}


/*top-column*/
#top-column {
  background-color: #fff;
}

#top-column h2 {
  font-family: 'futura-pt', serif;
  font-weight: 500;
  font-size: 35px;
  font-size: 3.5rem;
}

#top-column .text-block time {
  color: #164C6C;
  text-align: right;
  margin-top: 10px;
  font-weight: normal;
}

#top-column .text-block .top-column-title {
  font-weight: 600;
  color: #164C6C;
  margin: 10px 0 15px;
}

#top-column .text-block a {
  font-size: 14px;
  font-size: 1.4rem;
  color: #164C6C;
  line-height: 130%;
  margin-right: 10px;
}

#top-column .swiper-top_column-area {
  margin: 0 auto;
  padding: 60px 0 0;
  overflow-x: hidden;
}

#top-column .swiper-button-next {
  width: 35px !important;
  top: -30px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

#top-column .swiper-button-prev {
  width: 35px !important;
  top: -30px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

#top-column .arrow-box-blue {
  margin: 50px 0 0;
}

/*PC用*/
#top-column .slide {
  width: 24%;
  margin-right: 1%;
}

#top-column .swiper-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 63%;
  z-index: 0;
}

#top-column .swiper-inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width:768px) {
  #top-column h2 {
    font-size: 30px;
    font-size: 3.0rem;
  }

  #top-column .arrow-box-blue {
    margin: 10px 0 0;
  }

  #top-column .swiper-button-next {
    width: 30px !important;
    top: -30px !important;
    background-size: 30px;
  }

  #top-column .swiper-button-prev {
    width: 30px !important;
    top: -30px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  #top-column .swiper-button-next {
    top: -30px !important;
    background-size: 30px;
  }

  #top-column .swiper-button-prev {
    top: -30px !important;
    background-size: 30px;
  }
}

/*top-officetour*/
#top-officetour {
  position: relative;
  overflow: hidden;
  height: 550px;
  z-index: 10;
  transition: all .5s;
}

#top-officetour .office-link-2022 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 50;
}

/* #top-officetour.page_tour-2022 {
  position: relative;
  background: url(../img/top/screen_desk_chair.jpg)no-repeat center center;
  background-size: cover;
  height: auto;
  z-index: 10;
} */

#top-officetour::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, .30);
  transition: all .5s;
}

#top-officetour.active-tour-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, .60);
  transition: all .5s;
}

#top-officetour::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(../img/top/office_reservation_bg.jpg)no-repeat center center;
  background-size: cover;
  height: 550px;
  z-index: 0;
  transition: all .5s;
}

#top-officetour.active-tour-2022::after {
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

#top-officetour .container-2022 {
  position: relative;
  z-index: 15;
}

#top-officetour.page_tour-2022 .container-2022 {
  width: 65%;
  background-color: #ECDBCC;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-right: 0;
}

#top-officetour .top-title-box {
  position: relative;
  z-index: 10;
  opacity: 1;
  transition: all .5s;
}

#top-officetour.active-tour-2022 .top-title-box {
  opacity: .7;
  transition: all .5s;
}

#top-officetour .top-title-box p {
  color: #fff;
  text-align: center;
}

#top-officetour .top-title-box .top-title-2022 {
  font-size: 40px;
  font-size: 4.0rem;
  font-family: 'futura-pt', serif;
  color: #fff;
  text-align: center;
}

#top-officetour .top-officetoursub-2022 {
  font-size: 23px;
  font-size: 2.3rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 30px 0 0;
  opacity: 1;
  transition: all .5s;
}

#top-officetour.active-tour-2022 .top-officetoursub-2022 {
  opacity: .7;
  transition: all .5s;
}

#top-officetour.page_tour-2022 .top-title-box p {
  color: #fff;
  text-align: center !important;
  margin: 0;
}

#top-officetour .common-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 30px 0;
  margin: 0 auto;
  z-index: 15;
  max-width: 45%;
  opacity: 1;
  transition: all .5s;
}

#top-officetour.active-tour-2022 .common-box {
  opacity: .7;
  transition: all .5s;
}

#top-officetour .common-box p {
  display: block;
  padding: 3px 10px;
  margin-right: 15px;
  color: #fff;
}

/*arrow-white*/
#top-officetour .arrow-box-white {
  position: relative;
  text-align: center;
  z-index: 100;
  margin: 0px 0;
  transition: all .5s;
}

#top-officetour .arrow-box-white p {
  position: relative;
  display: inline-block;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 25px 100px 25px 25px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
  font-weight: 400;
}

#top-officetour .arrow-box-white p::before {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#top-officetour .arrow-box-white p::after {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.arrow-box-white:hover {
  text-align: center;
  transition: all .5s;
}

/*hover*/
#top-officetour.active-tour-2022 .arrow-box-white p {
  background-color: #fff;
  color: #164C6C;
  transition: all .5s;
}

#top-officetour.active-tour-2022 .arrow-box-white p::before {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#top-officetour.active-tour-2022 .arrow-box-white p::after {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

@media (max-width: 992px) {
  #top-officetour .top-officetoursub-2022 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: 20px 0 0;
  }

  #top-officetour .common-box {
    position: relative;
    padding: 20px 0;
    margin: 0 auto;
    z-index: 15;
    max-width: 70%;
  }

  #top-officetour.page_tour-2022 {
    position: relative;
    background: #ECDBCC;
    background-size: cover;
    height: auto;
    z-index: 10;
  }

  #top-officetour.page_tour-2022 .container-2022 {
    width: 100%;
    background-color: #ECDBCC;
    padding-top: 80px;
    padding-bottom: 80px;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  #top-officetour {
    height: unset;
  }

  #top-officetour .top-officetoursub-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: 20px 0 0;
  }

  #top-officetour .common-box {
    max-width: 60%;
    padding: 10px 0;
  }

  /*arrow-white*/
  #top-officetour .arrow-box-white {
    margin: 10px 0;
  }

  #top-officetour .top-officetoursub-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: 20px 0 0;
  }

  #top-officetour .common-box {
    max-width: 100%;
    padding: 10px 0;
  }
}

/*top-contact-2022*/
#top-contact-2022 {
  background-color: #fff;
  padding: 40px 0;
  position: relative;
  z-index: 10;
}

#top-contact-2022 .common-box {
  padding: 60px;
  display: block;
  position: relative;
  background-color: #164C6C;
  color: #fff;
  /* vertical-align: middle; */
  text-decoration: none;
  transition: all .5s;
}

#top-contact-2022 .common-box:hover {
  opacity: .8;
  transition: all .5s;
}

#top-contact-2022 .common-box .top-title-box h2 {
  font-family: 'futura-pt', serif;
  color: #fff;
  text-align: left;
}

#top-contact-2022 .common-box .top-title-box p {
  font-size: 13px;
  font-size: 1.3rem;
  color: #fff;
  text-align: left;
  margin: 0;
}

#top-contact-2022 .common-box .top-title-box p.top-title-2022 {
  font-size: 28px;
  font-size: 2.8rem;
  color: #fff;
  text-align: left;
  line-height: 100%;
  margin: 0px 0 0px !important;
}

#top-contact-2022 .common-box .top-title-box p.top-sub-title {
  margin: 25px 0 0px !important;
}

#top-contact-2022 .common-box::before {
  position: absolute;
  top: 50%;
  left: 75%;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 150px;
  height: 2px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#top-contact-2022 .common-box::after {
  position: absolute;
  top: 50%;
  left: calc(75% + 126px);
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

#top-contact-2022 .common-box:hover::before {
  position: absolute;
  top: 50%;
  left: 75%;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 180px;
  transition: all .5s;
}

#top-contact-2022 .common-box:hover::after {
  position: absolute;
  top: 50%;
  left: calc(75% + 156px);
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 20px;
  transition: all .5s;
}

@media (max-width: 992px) {
  #top-contact-2022 .common-box::before {
    position: absolute;
    top: 50%;
    left: 70%;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 150px;
    height: 2px;
    background: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .5s;
  }

  #top-contact-2022 .common-box::after {
    position: absolute;
    top: 50%;
    left: calc(70% + 126px);
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    transition: all .5s;
  }

  #top-contact-2022 .common-box:hover::before {
    position: absolute;
    top: 50%;
    left: 70%;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 180px;
    transition: all .5s;
  }

  #top-contact-2022 .common-box:hover::after {
    position: absolute;
    top: 50%;
    left: calc(70% + 156px);
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 20px;
    height: 20px;
    transition: all .5s;
  }
}

@media (max-width: 768px) {
  #top-contact-2022 .top-sub-title {
    margin: 35px 0 0;
  }

  #top-contact-2022 .common-box {
    padding: 45px 40px 45px;
  }

  #top-contact-2022 .common-box .top-title-box .top-sub-title {
    text-align: left;
    margin: 25px 0 25px !important;
  }

  #top-contact-2022 .common-box::before {
    position: absolute;
    top: 50%;
    right: 50px;
    left: auto;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 70px;
    height: 1px;
    background: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .5s;
  }

  #top-contact-2022 .common-box::after {
    position: absolute;
    top: 50%;
    right: 50px;
    left: auto;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    transition: all .5s;
  }

  #top-contact-2022 .common-box:hover::before {
    position: absolute;
    top: 50%;
    right: 30px;
    left: auto;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 90px;
    height: 1px;
    background: #fff;
    transition: all .5s;
  }

  #top-contact-2022 .common-box:hover::after {
    position: absolute;
    top: 50%;
    right: 30px;
    left: auto;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 15px;
    height: 15px;
    transition: all .5s;
  }

  #top-contact-2022 .common-box .top-title-box p {
    font-size: 12px;
    font-size: 1.2rem;
    color: #fff;
    text-align: left;
  }
}

/*footer*/
#common-footer-2022 {
  padding-top: 80px;
  padding-bottom: 36px;
  background: #164C6C;
  position: relative;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  z-index: 10;
}

#common-footer-2022 .footer-nav-2022 {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  /* padding: 40px 0; */
  margin: 0 auto;
  z-index: 15;
}

#common-footer-2022 .footer-nav-2022 ul {
  flex-basis: 25%;
  z-index: 5;
  padding-right: 15px;
}

/* #common-footer-2022 .footer-nav-2022 ul:nth-child(1) {
  flex-basis: 35%;
} */

#common-footer-2022 .footer-nav-2022 ul:nth-child(4) {
  /* flex-basis: 15%; */
  padding-right: 0px;
}

#common-footer-2022 .footer-nav-list li {
  padding: 10px 0;
}

#common-footer-2022 .footer-nav-list .space-2022 {
  padding: 10px 0;
}

#common-footer-2022 .footer-nav-list li a {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 150%;
  color: rgba(255, 255, 255, .7);
}

#common-footer-2022 .footer-nav-list li a img {
  vertical-align: middle;
  margin-left: 3px;
}

#common-footer-2022 .footer-nav-sub-2022 {
  margin-left: 15px;
}

#common-footer-2022 li.footer-nav-b-2022 {
  padding: 15px 0 15px;
}

#common-footer-2022 li.footer-nav-b-2022 a {
  padding: 15px 0 15px;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
}

#common-footer-2022 li.footer-nav-c-2022 {
  padding: 15px 0 0;
}

#common-footer-2022 li.footer-nav-c-2022 a {
  padding: 15px 0;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
}

#common-footer-2022 .scroll-box-2022 {
  position: relative;
  height: 160px;
}

.top-scroll-2022 {
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 15;
  width: 150px;
  opacity: 10;
  transition: all .5s;
}

#scroll-footer-2022.top-scroll-2022.top-footer-2022 {
  opacity: 1;
  transition: all .5s;
}

.top-scroll-2022::before, .top-fixscroll-2022::before {
  content: "";
  position: absolute;
  bottom: 52px;
  left: 50%;
  width: 1px;
  height: 50px;
  background: #fff;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: all .5s;
}

.top-scroll-2022::after, .top-fixscroll-2022::after {
  content: "";
  position: absolute;
  bottom: 85px;
  left: 50%;
  width: 15px;
  height: 15px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  transition: all .5s;
}

.top-scroll-2022:hover::before, .top-fixscroll-2022:hover::before {
  content: "";
  position: absolute;
  bottom: 52px;
  left: 50%;
  width: 1px;
  height: 70px;
  background: #fff;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: all .5s;
}

.top-scroll-2022:hover::after, .top-fixscroll-2022:hover::after {
  content: "";
  position: absolute;
  bottom: 104px;
  left: 50%;
  width: 15px;
  height: 15px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  transition: all .5s;
}

.top-scroll-sp-2022 {
  display: none;
}

#common-footer-2022 .footer-nav-2022 .top-scroll-2022 img {
  width: 100%;
}

#common-footer-2022 .footer-logo-2022 {
  position: relative;
  width: 100%;
  margin: 30px 0;
  display: flex;
  justify-content: space-between;
}

#common-footer-2022 .footer-logo-2022 a img {
  width: 190px;
}

.footer-sns-2022 {
  /* position: absolute;
  right: 0;
  bottom: 0; */
  display: flex;
  align-items: center;
}

.footer-sns-2022 a {
  margin-right: 15px;
}

/* .footer-sns-2022 a:last-child {
  margin-right: 0px;
} */

.footer-sns-2022 img {
  width: auto !important;
  height: 30px;
  object-fit: cover;
}

.footer-sns-2022 a:nth-of-type(2) img {
  height: 26px;
}

.footer-sns-2022 .sns_tw_Img img {
  width: auto !important;
  height: 33px;
  object-fit: cover;
}

.copy-area-2022 {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.copy-area-2022 .privacy-2022 {
  display: block;
  color: #fff;
  line-height: 100%;
  margin-right: 20px;
  text-decoration: underline;
}

.copy-area-2022 .privacy-2022:last-child {
  margin-right: 0px;
}

.copy-area-2022 .privacy-2022 img {
  vertical-align: middle;
  margin-left: 3px;
}

.copy-area-2022-last {
  margin-top: 10px;
}

.copy-2022 {
  text-align: right;
  line-height: 120%;
}

.privacy-2022 small, .copy-2022 small {
  font-size: 12px;
  font-size: 1.2rem;
  color: #fff;
}

.copy-link {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 992px) {
  #common-footer-2022 .footer-nav-2022 ul {
    flex-basis: 25%;
    z-index: 5;
    padding-right: 10px;
  }

  #common-footer-2022 .footer-nav-2022 ul:nth-child(1) {
    flex-basis: 35%;
  }

  #common-footer-2022 .footer-nav-2022 ul:nth-child(4) {
    flex-basis: 15%;
    padding-right: 0px;
  }

  #common-footer-2022 .scroll-box-2022 {
    position: relative;
    height: 110px;
  }

  .top-scroll-2022 {
    position: absolute;
    top: 0px;
    right: 0;
    z-index: 15;
    width: 100px;
  }

  .top-fixscroll-2022 {
    opacity: 0;
    position: fixed;
    top: auto;
    bottom: 10%;
    right: 9%;
    z-index: 15;
    width: 100px;
    transition: all .5s;
  }

  .top-fixscroll-2022.fixed-2022 {
    opacity: 1;
    position: fixed;
    top: auto;
    bottom: 10%;
    right: 9%;
    z-index: 15;
    width: 100px;
    transition: all .5s;
  }

  .top-scroll-2022::before, .top-fixscroll-2022::before {
    content: "";
    position: absolute;
    bottom: 30px;
    width: 1px;
    height: 35px;
  }

  .top-scroll-2022::after, .top-fixscroll-2022::after {
    content: "";
    position: absolute;
    bottom: 48px;
    width: 15px;
    height: 15px;
  }

  .top-scroll-2022:hover::before, .top-fixscroll-2022:hover::before {
    content: "";
    position: absolute;
    bottom: 30px;
    width: 1px;
    height: 50px;
  }

  .top-scroll-2022:hover::after, .top-fixscroll-2022:hover::after {
    content: "";
    position: absolute;
    bottom: 63px;
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 768px) {
  #common-footer-2022 {
    padding-top: 20px;
    padding-bottom: 60px;
  }

  #common-footer-2022 .footer-nav-2022 {
    display: none;
  }

  #common-footer-2022 .scroll-box-2022 {
    display: none;
    height: 0px;
  }

  .top-scroll-sp-2022 {
    display: block;
    position: relative;
    width: 100%;
  }

  .top-scroll-sp-2022 .top-scroll-2022 {
    position: absolute;
    top: -120px;
    right: 0;
    z-index: 15;
    width: 100px;
    transition: all .5s;
  }

  .top-fixscroll-2022 {
    opacity: 0;
    position: fixed;
    top: auto;
    bottom: 10%;
    right: 15px;
    z-index: 15;
    width: 100px;
    transition: all .5s;
  }

  .top-fixscroll-2022.fixed-2022 {
    opacity: 1;
    position: fixed;
    top: auto;
    bottom: 10%;
    right: 15px;
    z-index: 15;
    width: 100px;
    transition: all .5s;
  }

  .top-scroll-2022::before, .top-fixscroll-2022::before {
    content: "";
    position: absolute;
    bottom: 30px;
    width: 1px;
    height: 35px;
  }

  .top-scroll-2022::after, .top-fixscroll-2022::after {
    content: "";
    position: absolute;
    bottom: 48px;
    width: 15px;
    height: 15px;
  }

  .top-scroll-2022:hover::before, .top-fixscroll-2022:hover::before {
    content: "";
    position: absolute;
    bottom: 30px;
    width: 1px;
    height: 50px;
  }

  .top-scroll-2022:hover::after, .top-fixscroll-2022:hover::before {
    content: "";
    position: absolute;
    bottom: 63px;
    width: 15px;
    height: 15px;
  }

  #common-footer-2022 .footer-logo-2022 {
    display: block;
  }

  #common-footer-2022 .footer-logo-2022 a img {
    width: 150px;
  }

  .footer-sns-2022 {
    position: relative;
    right: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    margin-top: 60px;
  }

  .footer-sns-2022 a {
    margin-right: 10px;
  }

  .copy-2022 {
    text-align: left;
    line-height: 120%;
  }

  .copy-area-2022 {
    display: block;
    margin-bottom: 10px;
  }

  .copy-2022 {
    margin-top: 30px;
  }

  .copy-area-2022-last {
    margin-top: 0px;
  }

  .copy-area-2022-last .copy-2022 {
    margin-top: 0px;
    margin-bottom: 30px;
  }

  .privacy-2022 small, .copy-2022 small {
    text-align: left;
    font-size: 10px;
    font-size: 1.0rem;
    color: #fff;
  }
}

@media (max-width: 576px) {
  .top-scroll-sp-2022 .top-scroll-2022 {
    position: absolute;
    top: -120px;
    right: 0;
    z-index: 15;
    width: 70px;
    transition: all .5s;
  }

  .top-fixscroll-2022 {
    opacity: 0;
    position: fixed;
    top: auto;
    bottom: 10%;
    right: 15px;
    z-index: 15;
    width: 70px;
    transition: all .5s;
  }

  .top-fixscroll-2022.fixed-2022 {
    opacity: 1;
    position: fixed;
    top: auto;
    bottom: 10%;
    right: 15px;
    z-index: 15;
    width: 70px;
    transition: all .5s;
  }

  .top-scroll-2022::before, .top-fixscroll-2022::before {
    content: "";
    position: absolute;
    bottom: 25px;
    width: 1px;
    height: 25px;
  }

  .top-scroll-2022::after, .top-fixscroll-2022::after {
    content: "";
    position: absolute;
    bottom: 33px;
    width: 12px;
    height: 12px;
  }

  .top-scroll-2022:hover::before, .top-fixscroll-2022:hover::before {
    content: "";
    position: absolute;
    bottom: 25px;
    width: 1px;
    height: 30px;
  }

  .top-scroll-2022:hover::after, .top-fixscroll-2022:hover::before {
    content: "";
    position: absolute;
    bottom: 38px;
    width: 12px;
    height: 12px;
  }
}


/*top-download*/
#top-download .swiper-top_download-area {
  margin: 0 auto;
  padding: 55px 0 0;
  overflow-x: hidden;
}

#top-download .text-block time {
  font-family: 'futura-pt', serif;
  color: #164C6C;
  text-align: right;
  margin-top: 10px;
}

#top-download .text-block .top-download-title {
  font-weight: 600;
  color: #164C6C;
  margin: 10px 0 15px;
}

#top-download .text-block a {
  font-size: 14px;
  font-size: 1.4rem;
  color: #164C6C;
  line-height: 130%;
  margin-right: 10px;
}

#top-download .swiper-button-next {
  width: 35px !important;
  top: -30px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

#top-download .swiper-button-prev {
  width: 35px !important;
  top: -30px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

/*PC用*/
#top-download .flex-area-2022 {
  align-items: stretch;
}

#top-download .flex-area-2022 .slide {
  width: 24%;
  margin-right: 1%;
}

#top-download .flex-area-2022 .swiper-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 63%;
  z-index: 0;
}

#top-download .flex-area-2022 .swiper-inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: cover;
}

@media (max-width:768px) {
  #top-download .arrow-box-blue {
    margin: 20px 0 0;
  }

  #top-download .swiper-button-next {
    width: 30px !important;
    top: -30px !important;
    background-size: 30px;
  }

  #top-download .swiper-button-prev {
    width: 30px !important;
    top: -30px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  #top-download .swiper-button-next {
    top: -30px !important;
    background-size: 30px;
  }

  #top-download .swiper-button-prev {
    top: -30px !important;
    background-size: 30px;
  }
}

@media (max-width:1000px) {
  #top-download .swiper-top_download-area {
    padding: 50px 0 0;
  }
}

.form_textlink {
  color: #164C6C;
  text-decoration: underline;
  transition: all 0.3s;
}

.form_textlink:hover {
  text-decoration: none;
}

/*top-solution*/
#top-solution .common-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  padding: 0px 0 20px;
  background-color: #fff;
}

#top-solution .flex-txt {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
}

/*common-box4*/
#top-solution .common-box4 {
  position: relative;
}

#top-solution .common-box4 .flex-box-2022 {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
}

#top-solution .common-box4 .flex-3 {
  width: 33%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#top-solution .common-box4 .flex-3.center-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: #164C6C;
}

#top-solution .common-box4 .flex-3.center-2022::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: #164C6C;
}

#top-solution .common-box4 .common-area {
  position: relative;
  padding: 20px;
  text-align: center;
  margin: 0px;
}

#top-solution .common-box4 .common-area img {
  margin: 20px 0;
  width: 40%;
}

#top-solution .common-box4 .common-area h4 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  padding: 0 0 25px;
}

#top-solution .common-box4 .common-area p {
  text-align: left;
  padding: 0 10px;
}

#top-solution .common-box4 .flex-3 .arrow-box-blue {
  margin: 30px 0 0;
}

#top-solution .common-box4 .flex-3 .arrow-box-blue p {
  font-size: 1.4rem;
  width: 80%;
  min-height: 94px;
  padding: 15px 50px 15px 15px;
}

#top-solution .common-box4 .flex-3 .arrow-box-blue p.flex-txt {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

#top-solution .common-box4 .flex-3 .arrow-box-blue p::before {
  position: absolute;
  top: 50%;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#top-solution .common-box4 .flex-3 .arrow-box-blue p::after {
  position: absolute;
  top: 50%;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

#top-solution .common-box4 .flex-3 .arrow-box-blue p:hover::before {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#top-solution .common-box4 .flex-3 .arrow-box-blue p:hover::after {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

@media (max-width:1300px) {
  #top-solution .common-box4 .common-area h4 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 0 0 25px;
  }
}

@media (max-width:1200px) {
  #top-solution .common-right-box .common-txtarea-2022 {
    width: 100%;
    padding: 50px 60px;
  }
}

@media (max-width:1000px) {
  #top-solution .common-box {
    display: block;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0px;
    background-color: transparent;
  }

  #top-solution .common-box .arrow-box-blue p {
    position: relative;
    display: inline-block;
    background-color: #164C6C;
    color: #fff;
    padding: 15px 80px 15px 25px;
    vertical-align: middle;
    text-decoration: none;
    transition: all .5s;
  }

  #top-solution .common-left-box {
    flex-basis: 100%;
    width: calc(100% - 15px);
    padding: 0;
    margin-left: 0px;
    margin-right: auto;
    position: relative;
    top: 0px;
  }

  #top-solution .common-right-box {
    flex-basis: 100%;
    width: calc(100% - 15px);
    padding: 0 0 30px;
    margin-left: auto;
    margin-right: 0px;
    position: relative;
    margin-top: -60px;
  }

  #top-solution .common-right-box .common-txtarea-2022 {
    width: 100%;
    padding: 30px 20px;
  }

  #top-solution .common-box .arrow-box-blue {
    text-align: left;
    margin: 30px 20px 50px;
  }

  #top-solution .common-right-box h3 {
    padding: 10px 0 20px;
    line-height: 150%;
  }

  #top-solution .common-right-box p {
    padding: 0px;
    line-height: 200%;
  }

  #top-solution .common-box2 {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 40px 0;
    margin-right: -15px;
  }

  #top-solution .flex-txt {
    display: block;
    justify-content: space-between;
    margin: 80px 0 30px;
  }

  #top-solution .common-box4 .flex-box-2022 {
    display: block;
    flex-wrap: wrap;
    padding: 0px
  }

  #top-solution .common-box4 .flex-3 {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 0;
  }

  #top-solution .common-box4 .flex-3:first-child {
    padding: 0 0 60px;
  }

  #top-solution .common-box4 .flex-3:last-child {
    padding: 60px 0 0;
  }

  #top-solution .common-box4 .flex-3.center-2022::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    right: 0;
    width: 100%;
    height: 1px;
    background: #164C6C;
  }

  #top-solution .common-box4 .flex-3.center-2022::after {
    content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: #164C6C;
  }

  #top-solution .common-box4 .common-area {
    position: relative;
    padding: 0px 10px 20px;
    text-align: center;
    margin: 0px;
  }

  #top-solution .common-box4 .common-area img {
    margin: 0px 0;
    width: 40%;
  }

  #top-solution .common-box4 .common-area h4 {
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 600;
    padding: 15px 0;
  }

  #top-solution .common-box4 .common-area p {
    text-align: left;
    padding: 0;
  }

  #top-solution .common-box4 .flex-3 .arrow-box-blue {
    margin: 10px 0 0;
  }

  #top-solution .common-box4 .flex-3 .arrow-box-blue p {
    font-size: 1.4rem;
    width: 75%;
    min-height: auto;
    padding: 15px 50px 15px 25px;
  }
}

@media (max-width:768px) {
  #top-solution .common-box2 {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 40px 0;
    margin-left: -15px;
    margin-right: -15px;
  }

  #top-solution .common-box2 p {
    font-size: 13px;
    font-size: 1.3rem;
    margin-top: 15px;
    text-align: center;
  }

  #top-solution .common-box4 {
    position: relative;
    padding: 0;
    margin-left: 0;
    margin-right: 0px;
    margin-top: 0px;
  }

  #top-solution .common-box4 .common-area h4 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 15px 0;
  }

  #top-solution .top-title-box .top-sub-title {
    margin: 25px 0 0 !important;
  }

  #top-solution .common-box .arrow-box-blue {
    margin: 30px 20px 0;
  }
}

/* top end
====================================================*/



/* second
====================================================*/
.bg-e7-2022 {
  background-color: #F3EAE0;
}

.bg-e6-2022 {
  background-color: #F1EBE6;
}

.bg-f8-2022 {
  background-color: #F1EBE6;
}

.bg-e5-2022 {
  background-color: #F3EAE0;
}

.bg-f2-2022 {
  background-color: #F3EAE0;
  position: relative;
  z-index: 10;
}

.of--title-box {
  position: relative;
}

.of-title-box .of-sub-2022 {
  font-weight: 500;
  margin: 0px;
}

.of-title-box .of-num-2022 {
  font-family: 'futura-pt', serif;
  font-size: 58px;
  font-size: 5.8rem;
  margin: 0px;
  font-weight: bold;
}

.of-title-box .of-title-2022 {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 175%;
  padding: 15px 0 25px;
}

.of-title-box .of-txt-2022 {
  margin-bottom: 20px;
  line-height: 200%;
  color: #333;
}

@media (max-width:768px) {
  .of-title-box .of-title-2022 {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 150%;
  }

  .of-title-box .of-num-2022 {
    font-family: 'futura-pt', serif;
    font-size: 35px;
    font-size: 3.5rem;
    margin: 0px;
  }
}

@media (max-width:576px) {
  .of-title-box .of-title-2022 {
    font-size: 23px;
    font-size: 2.3rem;
  }
}

/*line title 下位ページ*/
.of-line-title-2022 {
  position: relative;
  margin-bottom: 50px;
}

.of-line-title-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #484848;
}

.of-line-title-2022::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 2px;
  background-color: #484848;
}

.of-line-title-2022 h2, .of-line-title-2022 h3 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  line-height: 150%;
  color: #164C6C;
  text-align: center;
  padding: 35px 0 20px;
}

.of-line-title-2022 p {
  padding-top: 10px;
  line-height: 150%;
}

.of-line-title-2022 p.sub-txt-2022 {
  padding-top: 10px;
  line-height: 150%;
  max-width: 800px;
  margin: 0 auto;
}

.of-line-title-2022 .h2-cl-2022, .page-2022 .of-line-title-2022 .h2-cl-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 150%;
  color: #164C6C;
  text-align: left;
  padding: 10px 0 0;
}

@media (max-width:768px) {
  .of-line-title-2022 {
    position: relative;
    margin-bottom: 10px;
  }

  .of-line-title-2022 h2, .of-line-title-2022 h3 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 600;
    text-align: center;
    padding: 35px 0 20px;
  }

  .of-line-title-2022 p {
    font-size: 13px;
    font-size: 1.3rem;
    padding-top: 10px;
    line-height: 150%;
  }

  .of-line-title-2022 p.sub-txt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

/*office 下位ページ*/
.office-page-2022 .introduction-box {
  display: block;
  margin: 60px auto;
  max-width: 100%;
  background: #164C6C;
  padding: 50px 30px;
  transition: all .5s;
}

.office-page-2022 .introduction-box .flex-2022 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.office-page-2022 .introduction-box img {
  width: 35%;
}

.office-page-2022 .introduction-box .right-box-2022 {
  display: block;
  width: 60%;
  padding-left: 3%;
}

.office-page-2022 .introduction-box .cap-title20 {
  color: #fff;
  margin: 0 0 20px;
}

.office-page-2022 .introduction-box .intro-title {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 500;
  color: #fff;
  margin: 0px;
  padding-right: 15px;
  width: 85%;
}

.office-page-2022 .introduction-box .intro-pdf {
  width: 10%;
}

.office-page-2022 .introduction-box .intro-pdf img {
  width: 100%;
  max-width: 40px;
  vertical-align: middle;
}

.office-page-2022 .introduction-box:hover {
  background: #ECDBCC;
  transition: all .5s;
}

@media (max-width:992px) {
  .office-page-2022 .introduction-box {
    display: block;
    margin: 60px auto;
    max-width: 100%;
    padding: 15px 20px;
    transition: all .5s;
  }
}

@media (max-width:768px) {
  .office-page-2022 .introduction-box {
    display: block;
    margin: 65px auto;
    max-width: 100%;
    padding: 15px 20px;
    transition: all .5s;
  }

  .office-page-2022 .other-box .introduction-box {
    margin: 0 auto;
  }

  .office-page-2022 .introduction-box {
    display: block;
    margin: 0px auto 65px;
    max-width: 100%;
    padding: 15px 20px;
    transition: all .5s;
  }

  .office-page-2022 .introduction-box img {
    width: 40%;
  }

  .office-page-2022 .introduction-box .right-box-2022 {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    padding-left: 3%;
  }

  .office-page-2022 .introduction-box .bottom-flex {
    display: flex;
    align-items: center;
  }

  .office-page-2022 .introduction-box .intro-title {
    font-size: 20px;
    font-size: 2.0rem;
    margin: 15px 0 0;
    width: auto;
  }

  .office-page-2022 .introduction-box .cap-title20 {
    font-size: 1.6rem;
    margin: 20px;
  }

  .office-page-2022 .introduction-box p {
    margin: 0px;
  }

  /*.office-page-2022 .introduction-box .intro-title::after{content:'';display:inline-block;background:url(../img/icon-pdf-2022.svg)no-repeat bottom;background-size:cover;vertical-align: bottom;margin-bottom:3px;width:22px;height: 24px;transition: all .5s;}*/
}

@media (max-width:640px) {
  .office-page-2022 .introduction-box .cap-title20 {
    font-size: 1.4rem;
    margin: 20px;
  }

  .office-page-2022 .introduction-box .intro-title {
    font-size: 16px;
    font-size: 1.6rem;
    margin: 15px 0 0;
  }
}


/* MV
====================================================*/
.mv-office-2022 {
  width: 100%;
  position: relative;
}

.mv-office-2022 .mv-tour-2022 {
  top: 45%;
}

.mv-woodoffice {
  width: 100%;
  position: relative;
}

.mv-conceptbg-2022 {
  position: relative;
  background: url(../img/of-concept/of_concept_bg.jpg)no-repeat center right;
  background-size: cover;
  height: 500px;
}

.mv-designbg-2022 {
  position: relative;
  background: url(../img/of-design/of_design_bg.jpg)no-repeat center center;
  background-size: cover;
  height: 500px;
}

.mv-conceptbg-2022::before, .mv-designbg-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(68, 68, 68, 0.6) 0, transparent 30%, transparent 70%, transparent 100%);
}

.mv-flowbg-2022 {
  position: relative;
  background: url(../img/of-flow/of_flow_bg.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
  height: 660px;
}

.mv-flowbg-2022 .mv-topmenu-2022 {
  padding: 120px 0 0px;
}

/*.mv-conceptbg-2022::before,.mv-projectsbg-2022::before,.mv-designbg-2022::before,.mv-flowbg-2022::before{
	content:'';
    position: absolute;
    top:0;
    right:0;
    left:0;
	bottom:0;
	background-color:#cbcbcb;
	mix-blend-mode: multiply;
	z-index:0;
}*/
.mv-txtarea-2022 {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 30px 0 40px;
}

.mv-topmenu-2022 {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
}

.mv-topmenu-2022 a, .mv-topmenu-2022 p {
  font-size: 12px;
  font-size: 1.2rem;
  color: #164C6C;
}

.mv-flowbg-2022 .mv-topmenu-2022 a,
.mv-flowbg-2022 .mv-topmenu-2022 p {
  font-size: 12px;
  font-size: 1.2rem;
  color: #fff;
}

.mv-oftran-2022 .mv-topmenu-2022 a,
.mv-oftran-2022 .mv-topmenu-2022 p {
  font-size: 12px;
  font-size: 1.2rem;
  color: #fff;
}

.mv-topmenu-2022 span {
  margin: 0 10px;
}

.mv-flowbg-2022 .mv-topmenu-2022 span {
  margin: 0 10px;
  color: #fff;
}

.mv-toptxt-2022 {
  padding: 60px 0 0;
}

.mv-toptxt-2022 h1 {
  margin: 0px;
  font-size: 40px;
  font-size: 4.0rem;
  font-weight: 400;
  line-height: 150%;
}

.mv-toptxt-2022 h1 {
  margin: 0px;
  font-size: 40px;
  font-size: 4.0rem;
  font-weight: 400;
  line-height: 150%;
}

.mv-toptxt-2022 .mv-topsubtxt-2022 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  margin: 20px 0 0;
}

.mv-toptxt-2022 p {
  width: 60%;
  font-size: 1.6rem;
  font-size: 16px;
  font-weight: 300;
  margin: 30px 0 0;
}

@media (max-width:768px) {
  .mv-conceptbg-2022 {
    background: url(../img/of-concept/of_concept_bg_sp.jpg) no-repeat right/cover !important;
    height: 450px !important;
  }

  .mv-designbg-2022 {
    background: url(../img/of-design/of_design_bg_sp.jpg) no-repeat right/cover !important;
    height: 450px !important;
  }

  .mv-flowbg-2022 {
    background: url(../img/of-flow/of_flow_bg_sp.jpg) no-repeat right/cover !important;
    height: 450px !important;
  }

  /* .mv-oftransfer {
    background: url(../img/of-transfer/of_transfer_bg_sp.jpg) no-repeat right/cover!important;
    height: 450px!important;
  } */

  .mv-ofprojects-2022 {
    background: url(../img/of-projects/of_projects_bg_sp.jpg) no-repeat right/cover !important;
    height: 450px !important;
  }

  .mv-txtarea-2022 {
    padding: 20px 0;
  }

  .mv-area-2022 {
    width: 100%;
  }

  .mv-topmenu-2022 {
    display: none;
  }

  .mv-topmenu-2022 a, .mv-topmenu-2022 p {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 200%;
  }

  .mv-toptxt-2022 {
    margin: 0px 0 0;
    padding: 0;
  }

  .mv-toptxt-2022 h1 {
    font-size: 28px;
    font-size: 2.8rem;
  }

  .mv-toptxt-2022 .mv-topsubtxt-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    margin: 10px 0 0;
  }

  .mv-toptxt-2022 p {
    font-size: 15px;
    font-size: 1.5rem;
    width: 100%;
  }
}

@media (max-width:576px) {
  .mv-toptxt-2022 h1 {
    font-size: 23px;
    font-size: 2.3rem;
  }

  .mv-toptxt-2022 .mv-topsubtxt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
  }

  .mv-toptxt-2022 p {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

/*of-concept01-2022*/
#of-concept01-2022 {
  position: relative;
  margin: 0px;
}

#of-concept01-2022 .flex-area-2022 {
  align-items: stretch;
  padding: 30px 0;
}

.of-container-2022 {
  max-width: 800px;
  width: 100%;
  padding-right: 18%;
  padding-left: 0px;
}

.of-lefttop-2022 {
  position: relative;
  width: 50%;
}

.of-lefttop-2022 img {
  width: 100%;
  height: auto;
}

.of-righttop-2022 {
  position: relative;
  width: 50%;
}

.of-righttop-2022 .of-title-box {
  padding: 0 0 0 15%;
}

@media (max-width:768px) {
  .of-righttop-2022 {
    width: 100%;
  }

  .of-container-2022 {
    max-width: initial;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  .of-righttop-2022 img {
    width: 100%;
  }

  .of-righttop-2022 .of-title-box {
    padding: 0px;
  }
}

/*of-concept02-2022*/
#of-concept02-2022 .flex-area-2022 {
  align-items: stretch;
  padding: 30px 0;
}

@media (min-width:1900px) {
  #of-concept02-2022 .flex-area-2022 {
    padding: 50px 0;
  }
}

@media (max-width:992px) {
  #of-concept02-2022 .flex-area-2022 {
    display: block;
  }

  #of-concept02-2022 .flex-box {
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
  }

}

#of-concept02-2022 h3 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
  padding: 15px 0;
  text-align: center;
}

#of-concept02-2022 h4 {
  color: #fff;
  font-weight: 500;
  padding: 15px 0 30px;
}

#of-concept02-2022 p {
  color: #fff;
  font-weight: 300;
  line-height: 180%;
}

#of-concept02-2022 .common-area {
  background-color: #164C6C;
  text-align: center;
  padding: 60px 40px;
  min-height: 100%;
}

#of-concept02-2022 .common-area img {
  max-width: 45%;
}

@media (max-width:768px) {
  #of-concept02-2022 .flex-33-center-2022 {
    margin: 15px 0;
  }
}

/*top-para*/
#concept-parallax {
  overflow: hidden;
}

#concept-parallax .parallax-2022 {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #E6DDC7;
  -webkit-background-size: cover;
  background-size: cover;
  overflow-x: hidden !important;
  z-index: -1;
}

.change-bg-tra #concept-parallax .parallax-2022 {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/concept/concept_bg.jpg)no-repeat center center/cover;
  overflow-x: hidden !important;
  z-index: -1;
}

/*of-concept03-2022*/
.of-case-wrapper-2022 {
  padding: 0px;
  margin-bottom: 80px;
  background: #fff;
}

.of-case-wrapper-2022 .header-img-2022 {
  position: relative;
  margin: 0 auto;
  text-align: left;
  z-index: 5;
}

.of-case-wrapper-2022 .header-img-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0, transparent 30%, transparent 70%, rgba(68, 68, 68, 0.8) 100%);
}

.of-case-wrapper-2022 .header-img-2022 img {
  width: 100%;
  height: auto;
}

.of-case-wrapper-2022 .header-img-2022 .header-txt {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 500;
  color: #fff;
  width: 85%;
}

/*area1*/
.of-case-area1-2022 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  background: #fff;
}

.of-case-area1-2022 .eng-txt {
  font-family: 'futura-pt', serif;
  font-size: 30px;
  font-size: 3.0rem;
  color: #989898;
}

.of-case-area1-2022 .eng-txt span {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  font-size: 15px;
  font-size: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
}

.of-case-area1-2022 h3 {
  font-size: 40px;
  font-size: 4.0rem;
  font-weight: 400;
  margin: 30px 0 15px;
}

.of-case-area1-2022 p {
  line-height: 200%;
}

.case-textarea-2022 {
  width: 85%;
  margin: 0 auto;
}

/*area2*/
.of-case-area2-2022 {
  background-color: #F7F6F5;
  padding: 60px 0 30px;
  max-width: 85%;
  margin: 0 auto;
  position: relative;
}

.of-case-area2-2022::before {
  content: '';
  position: absolute;
  bottom: -79.5px;
  left: 40%;
  right: 40%;
  height: 80px;
  background-color: #F7F6F5;
  clip-path: polygon(0 0, 100% 0%, 50% 50%);
}

.of-case-area2-2022 .of-case-area2-title-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  width: 100%;
}

.of-case-area2-2022 .of-case-area2-subtitle-2022 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  margin: 15px 0 30px;
}

.of-case-area2-2022 .line-txt {
  border-bottom: 1px solid #164C6C;
  padding: 0 0 5px;
  margin: 0 0 20px;
}

.of-case-area2-2022 .flex-area-2022 {
  padding: 0 0 15px;
}

.of-case-area2-2022 p {
  font-weight: 500;
  width: 90%;
  padding-left: 20px;
}

.of-case-area2-2022 p.of-case-num-2022 {
  font-family: 'futura-pt', serif;
  font-size: 30px;
  font-size: 3.0rem;
  width: 55px;
  padding-left: 0px;
}

/*area3*/
.of-case-area3-2022 {
  padding: 150px 0 60px;
  background: #fff;
}

.case-textarea3-2022 {
  width: 85%;
  margin: 0 auto;
}

.case-textarea3-2022 img {
  width: 100%;
}

.of-case-area3-2022 .of-case-area3-title30-2022 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 400;
  text-align: center;
}

.case-headarea3-2022 {
  padding: 35px 0;
}

.case-headarea3-2022 .txt-2022 {
  font-family: 'futura-pt', serif;
  font-size: 24px;
  font-size: 2.4rem;
  color: #989898;
  text-align: center;
  margin-bottom: 15px;
}

.case-headarea3-2022 .main-txt-2022 {
  font-family: 'futura-pt', serif;
  font-size: 50px;
  font-size: 5.0rem;
  font-weight: 500;
  margin: 0;
  line-height: 150%;
  text-align: center;
  display: block;
}

.case-headarea3-2022 .main-txt-2022 span {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 500;
  margin: 0;
  line-height: 100%;
  text-align: center;
  display: block;
}

.case-textarea3-title-2022 p {
  font-size: 20px;
  color: #989898;
  margin: 6px 0 0 0;
}

.of-case-area3-2022 .flex-area-2022 {
  align-items: flex-start;
  justify-content: space-between;
  margin: 25px 0;
}

.of-case-area3-2022 .flex-area-2022 .flex-left-2022 {
  width: 50%;
  padding-right: 10px;
}

.of-case-area3-2022 .flex-area-2022 .flex-right-2022 {
  width: 50%;
  padding-left: 10px;
}

.of-case-area3-2022 .flex-3 {
  width: 32.5%;
}

.of-case-area3-2022 img {
  margin: 10px 0;
}

.case-txt3-2022 {
  width: 100%;
  margin: 30px auto 0px;
  line-height: 175%;
}

.case-txt3_02-2022 {
  width: 100%;
  margin: 15px auto 0px;
  line-height: 175%;
}

.case-txt3_last-2022 {
  width: 100%;
  margin: 15px auto 30px;
  line-height: 175%;
}

.of-case-area3-2022 .mark-txt {
  display: flex;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 5px;
}

.of-case-area3-2022 .mark-txt span {
  min-width: 30px;
  height: 30px;
  padding-right: 5px;
}

.of-case-area3-2022 .mark-txt.mark1 span {
  background: url(../img/of-concept/mark1.svg)no-repeat center left / 20px;
}

.of-case-area3-2022 .mark-txt.mark2 span {
  background: url(../img/of-concept/mark2.svg)no-repeat center left / 20px;
}

.of-case-area3-2022 .mark-txt.mark3 span {
  background: url(../img/of-concept/mark3.svg)no-repeat center left / 20px;
}

/*column*/
#of-concept04-column-2022 .of-case-wrapper-2022 {
  background-color: #F1EBE6;
}

.of-column-area1-2022 {
  padding: 0px 0 40px;
}

.of-column-area2-2022 {
  padding: 20px;
  border-bottom: 1px solid #164C6C;
}

.of-column-area2-2022 .flex-area-2022, .of-column-area3-2022 .flex-area-2022 {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.of-column-area2-2022 .of-column-box-2022, .of-column-area3-2022 .of-column-box-2022 {
  padding-left: 30px;
}

.of-column-area2-2022 .of-column-box-2022 p, .of-column-area3-2022 .of-column-box-2022 p {
  line-height: 150%;
  margin-bottom: 15px;
}

.of-column-area2-2022 .of-column-box-2022 p:last-child, .of-column-area3-2022 .of-column-box-2022 p:last-child {
  margin-bottom: 0px;
}

.of-column-area2-2022 .of-column-num-2022, .of-column-area3-2022 .of-column-num-2022 {
  font-family: 'futura-pt', serif;
  font-size: 40px;
  font-size: 4.0rem;
  line-height: 100%;
  min-width: 60px;
  padding-left: 0px
}

.of-column-area2-2022 .of-column-box-title-2022, .of-column-area3-2022 .of-column-box-title-2022 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.of-column-area3-2022 {
  padding: 20px;
}

/*of-contact-2022*/
#of-contact-2022 {
  margin: 0 0 100px;
}

#of-contact-2022 .of-contact-txt-2022 {
  font-size: 20px;
  font-size: 2.0rem;
  text-align: center;
  margin: 0 0 40px;
  color: #333;
}

#of-contact-2022 a {
  display: block;
  padding: 15px 0;
  margin: 0 auto;
  width: 300px;
  background-color: #164C6C;
  transition: all .5s;
}

#of-contact-2022 a:hover {
  background-color: #ECDBCC;
  transition: all .5s;
}

#of-contact-2022 a:hover .of-contact-title-2022,
#of-contact-2022 a:hover p {
  color: #164C6C;
  transition: all .5s;
}

#of-contact-2022 a .of-contact-title-2022 {
  font-family: 'futura-pt', serif;
  font-size: 35px;
  font-size: 3.5rem;
  line-height: 100%;
  text-align: center;
  color: #fff;
}

#of-contact-2022 a p {
  text-align: center;
  color: #fff;
  margin: 0;
}

/*#office-2022*/
#office-2022 {
  background-color: #F1EBE6;
  transition: all .5s;
}

#office-2022 .office-txt {
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 150%;
  text-align: center;
  margin: 0px 0 40px;
}

#office-2022 .office-txt:hover {
  color: #164C6C !important;
}

#office-2022 p:hover {
  color: #164C6C;
  transition: all .5s;
}

#office-2022 .of-link-2022, #office-2022 .of-link-center-2022 {
  padding: 50px 20px;
  display: block;
  position: relative;
  color: #164C6C;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

#office-2022 .of-link-2022:hover, #office-2022 .of-link-center-2022:hover {
  background-color: #ECDBCC;
  color: #164C6C;
  transition: all .5s;
}

#office-2022 .flex-area-2022 {
  border-top: 1px solid #164C6C;
  border-bottom: 1px solid #164C6C;
  justify-content: space-around;
}

#office-2022 .flex-area-2022.sustainability-menu {
  border-top: 0px;
  border-bottom: 1px solid #164C6C;
  justify-content: space-around;
}

#office-2022 .flex-area-2022 .of-link-2022, #office-2022 .flex-area-2022 .of-link-center-2022 {
  display: block;
  position: relative;
  width: 33.33333333%;
}

#office-2022 .flex-area-2022 .of-link-center-2022 p.center-block-2022::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 100%;
  height: 70%;
  display: block;
  border-left: 1px solid #164C6C;
  opacity: 1;
  transition: all .5s;
}

#office-2022 .flex-area-2022 .of-link-center-2022 p.center-block-2022::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 100%;
  height: 70%;
  display: block;
  border-right: 1px solid #164C6C;
  opacity: 1;
  transition: all .5s;
}

#office-2022 .flex-area-2022 .of-link-center-2022.active-center-2022 p.center-block-2022::before {
  border-left: 1px solid #164C6C;
  opacity: 0;
  transition: all .5s;
}

#office-2022 .flex-area-2022 .of-link-center-2022.active-center-2022 p.center-block-2022::after {
  border-right: 1px solid #164C6C;
  opacity: 0;
  transition: all .5s;
}

#office-2022 .flex-area-2022 .of-link-center-2022.none-center-2022 p.center-block-2022::before {
  border-left: 1px solid #164C6C;
  opacity: 0;
  transition: all .5s;
}

#office-2022 .of-link-2022::before, #office-2022 .of-link-center-2022::before {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 50px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#office-2022 .of-link-2022::after, #office-2022 .of-link-center-2022::after {
  position: absolute;
  top: 50%;
  right: 32px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 15px;
  height: 15px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

#office-2022 .of-link-2022:hover::before, #office-2022 .of-link-center-2022:hover::before {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#office-2022 .of-link-2022:hover::after, #office-2022 .of-link-center-2022:hover::after {
  position: absolute;
  top: 50%;
  right: 11px;
  margin: auto;
  content: "";
  vertical-align: middle;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

#office-2022 .flex-area-2022 .of-link-center-2022 {
  transition: all .5s;
}

/*sustainability company*/
#office-2022 .flex-area-2022.sustainability-menu {
  position: relative;
  border-top: 0px;
  border-bottom: 1px solid #164C6C;
  justify-content: space-around;
}

#office-2022 .flex-area-2022.furniture-menu {
  position: relative;
  border-top: 1px solid #164C6C;
  border-bottom: 1px solid #164C6C;
  justify-content: space-around;
}

#office-2022 .flex-area-2022.company-menu {
  position: relative;
  border-top: 0px solid #164C6C;
  border-bottom: 0px solid #164C6C;
  justify-content: space-around;
}

#office-2022 .flex-area-2022.sustainability-menu .of-link-2022, #office-2022 .flex-area-2022.furniture-menu .of-link-2022, #office-2022 .flex-area-2022.company-menu .of-link-2022 {
  display: block;
  position: relative;
  width: 50%;
}

#office-2022 .flex-area-2022.sustainability-menu::before, #office-2022 .flex-area-2022.furniture-menu::before, #office-2022 .flex-area-2022.company-menu::before {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 50%;
  transform: translatex(-50%);
  width: 1px;
  background: #164C6C;
  opacity: 1;
  transition: all .5s;
}

#office-2022 .flex-area-2022.sustainability-menu.none-center-2022::before, #office-2022 .flex-area-2022.furniture-menu.none-center-2022::before, #office-2022 .flex-area-2022.company-menu.none-center-2022::before {
  opacity: 0;
  transition: all .5s;
}

@media (max-width: 992px) {
  #office-2022 .office-txt {
    font-size: 16px;
    font-size: 1.6rem;
  }

  #office-2022 .of-link-2022, #office-2022 .of-link-center-2022 {
    padding: 40px 20px;
    margin: -1px 0 0 0;
    display: block;
    position: relative;
    color: #164C6C;
    border-top: 0px solid #164C6C;
    border-bottom: 1px solid #164C6C;
  }

  #office-2022 .of-link-center-2022 {
    border-top: 0px solid #164C6C;
    border-bottom: 0px solid #164C6C;
  }

  #office-2022 .of-link-2022:last-child {
    border-top: 1px solid #164C6C;
    border-bottom: 0px solid #164C6C;
  }

  #office-2022 .flex-area-2022 {
    border-top: 0px solid #164C6C;
    border-bottom: 0px solid #164C6C;
  }

  #office-2022 .flex-area-2022 {
    display: block;
  }

  #office-2022 .flex-area-2022 .of-link-2022, #office-2022 .flex-area-2022 .of-link-center-2022 {
    display: block;
    width: 100%;
  }

  #office-2022 .flex-area-2022 .of-link-center-2022 p.center-block-2022::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 100%;
    height: 70%;
    display: block;
    border-left: 0px solid #164C6C;
    opacity: 0;
    transition: all .5s;
  }

  #office-2022 .flex-area-2022 .of-link-center-2022 p.center-block-2022::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 100%;
    height: 70%;
    display: block;
    border-right: 0px solid #164C6C;
    opacity: 0;
    transition: all .5s;
  }

  #office-2022 .of-link-2022::before, #office-2022 .of-link-center-2022::before {
    position: absolute;
    top: 50%;
    right: 30px;
  }

  #office-2022 .of-link-2022::after, #office-2022 .of-link-center-2022::after {
    position: absolute;
    top: 50%;
    right: 32px;
  }

  #office-2022 .of-link-2022:hover::before, #office-2022 .of-link-center-2022:hover::before {
    position: absolute;
    top: 50%;
    right: 10px;
  }

  #office-2022 .of-link-2022:hover::after, #office-2022 .of-link-center-2022:hover::after {
    position: absolute;
    top: 50%;
    right: 11px;
  }

  /*sustainability*/
  #office-2022 .flex-area-2022.sustainability-menu {
    position: relative;
    border-top: 1px solid #164C6C;
    border-bottom: 1px solid #164C6C;
    justify-content: space-around;
  }

  #office-2022 .flex-area-2022.furniture-menu {
    position: relative;
    border-top: 0px solid #164C6C;
    border-bottom: 1px solid #164C6C;
  }

  #office-2022 .flex-area-2022.sustainability-menu .of-link-2022, #office-2022 .flex-area-2022.furniture-menu .of-link-2022, #office-2022 .flex-area-2022.company-menu .of-link-2022 {
    display: block;
    position: relative;
    width: 100%;
  }

  #office-2022 .flex-area-2022.sustainability-menu::before, #office-2022 .flex-area-2022.furniture-menu::before, #office-2022 .flex-area-2022.company-menu::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0%;
    transform: translatex(0%);
    width: 0px;
    opacity: 0;
    transition: all .5s;
  }

  /*area2*/
  .of-case-area2-2022 .line-txt {
    border-bottom: 1px solid #164C6C;
    padding: 0 0 5px;
    margin: 0 0 20px;
    width: 100%
  }

  .of-case-area2-2022 p.of-case-num-2022 {
    font-family: 'futura-pt', serif;
    font-size: 30px;
    font-size: 3.0rem;
    width: 12%;
    padding-left: 0px;
  }

  .of-case-area2-2022 p {
    font-weight: 500;
    width: 88%;
    padding-left: 20px;
  }

  .case-textarea3-title-2022 {
    display: block;
    justify-content: center;
    padding: 25px 0;
    text-align: center;
  }

  .case-textarea3-title-2022 p {
    text-align: center;
    font-size: 20px;
    font-size: 2.0rem;
    color: #989898;
    margin: 5px 0;
  }

  .case-textarea3-title-2022 .main-txt-2022 {
    color: #164C6C;
  }

  .case-con-02 .case-textarea3-title-2022 {
    display: block;
    justify-content: center;
    padding: 25px 0 0;
  }
}

@media (max-width:768px) {

  .of-case-wrapper-2022 .header-img-2022 .header-txt {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    width: 90%;
  }

  .of-case-area1-2022 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: initial;
    padding: 50px 0;
  }

  .of-case-area1-2022 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
  }

  .of-case-area1-2022 h3 {
    font-size: 30px;
    font-size: 3.0rem;
    font-weight: 400;
    margin: 20px 0 15px;
  }

  .case-textarea-2022 {
    width: 90%;
    margin: 0 auto;
  }

  /*area2*/
  .of-case-area2-2022 {
    background-color: #F7F6F5;
    padding: 60px 0 30px;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
  }

  .of-case-area2-2022 .of-case-area2-subtitle-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    margin: 15px 0 30px;
  }

  .of-case-area2-2022 .of-case-area2-txt-2022 {
    font-size: 20px;
    font-size: 2.0rem;
  }

  .of-case-area2-2022 p {
    width: 100%;
    padding-left: 0px;
  }

  .of-case-area2-2022 p.of-case-num-2022 {
    font-family: 'futura-pt', serif;
    font-size: 25px;
    font-size: 2.5rem;
    width: auto;
    padding-left: 0px;
  }

  /*area3*/
  .of-case-area3-2022 {
    padding: 90px 0 30px;
    background: #fff;
  }

  .case-textarea3-2022 {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
  }

  .of-case-area3-2022 .of-case-area3-title30-2022 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 400;
    text-align: center;
  }

  .case-headarea3-2022 {
    padding: 20px 0;
  }

  .case-headarea3-2022 .txt-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    margin-bottom: 10px;
  }

  .case-headarea3-2022 .main-txt-2022 {
    font-size: 30px;
    font-size: 3.0rem;
    font-weight: 500;
    margin: 0;
    line-height: 150%;
  }

  .case-headarea3-2022 .main-txt-2022 span {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0;
    line-height: 150%;
  }

  .of-case-area3-2022 .flex-area-2022 .flex-left-2022 {
    width: 100%;
    padding-right: 0px;
  }

  .of-case-area3-2022 .flex-area-2022 .flex-right-2022 {
    width: 100%;
    padding-left: 0px;
  }

  .of-case-area3-2022 .flex-3 {
    width: 100%;
  }

  .of-case-area3-2022 img {
    margin: 10px 0;
  }

  .of-case-area3-2022 .case-txt3-2022 {
    width: 100%;
    margin: 25px auto 0px;
    line-height: 200%;
  }

  .of-case-area3-2022 .case-txt3_02-2022 {
    width: 100%;
    margin: 15px auto 0px;
    line-height: 200%;
  }

  .of-case-area3-2022 .case-txt3_last-2022 {
    width: 100%;
    margin: 15px auto 30px;
    line-height: 200%;
  }

  /*column*/
  .of-column-area2-2022 .of-column-box-title-2022, .of-column-area3-2022 .of-column-box-title-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 175%;
    margin: 10px 0 15px;
  }

  .of-column-area2-2022 .of-column-box-2022 p, .of-column-area3-2022 .of-column-box-2022 p {
    line-height: 150%;
  }

  .of-column-area2-2022 .of-column-box-2022, .of-column-area3-2022 .of-column-box-2022 {
    padding-left: 0px;
  }

  #office-2022 .flex-area-2022 .of-link-center-2022 p.center-block-2022::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 100%;
    height: 70%;
    display: block;
    border-left: 0px solid #164C6C;
    opacity: 0;
    transition: all .5s;
  }

  #office-2022 .flex-area-2022 .of-link-center-2022 p.center-block-2022::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 100%;
    height: 70%;
    display: block;
    border-right: 0px solid #164C6C;
    opacity: 0;
    transition: all .5s;
  }

  /*of-contact*/
  #of-contact-2022 .of-contact-txt-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    text-align: center;
    margin: 0 0 40px;
  }
}

@media (max-width:576px) {
  .of-case-wrapper-2022 .header-img-2022 {
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    z-index: 5;
  }

  .of-case-wrapper-2022 .header-img-2022 img {
    width: 100%;
    height: auto;
  }

  .of-case-area1-2022 h3 {
    font-size: 23px;
    font-size: 2.3rem;
    font-weight: 400;
    margin: 20px 0 15px;
  }

  .of-case-area2-2022 .of-case-area2-txt-2022 {
    font-size: 16px;
    font-size: 1.6rem;
  }

  #of-contact-2022 a {
    width: 270px;
  }

  #of-contact-2022 a .of-contact-title-2022 {
    font-size: 30px;
    font-size: 3.0rem;
  }
}


/*--Office Transfer--*/
.of-linkall-2022 {
  position: relative;
}

.of-linkall-2022 .of-linkin01-2022, .of-linkall-2022 .of-linkin02-2022, .of-linkall-2022 .of-linkin03-2022, .of-linkall-2022 .of-linkin04-2022 {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.transfer-arrow-2022 span {
  position: absolute;
  right: 0px;
  bottom: -13px;
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #164C6C;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  transition: all .5s;
}

.transfer-arrow-2022 span::before {
  position: absolute;
  top: 50%;
  right: 14px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 14px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.transfer-arrow-2022 span::after {
  position: absolute;
  top: 50%;
  right: 15px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.active-arrow-2022.transfer-arrow-2022 span {
  position: absolute;
  right: 0px;
  bottom: -13px;
  display: block;
  width: 40px;
  height: 40px;
  background-color: #164C6C;
  border: 1px solid #164C6C;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.active-arrow-2022.transfer-arrow-2022 span::before {
  position: absolute;
  top: 50%;
  right: 12px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 16px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.active-arrow-2022.transfer-arrow-2022 span::after {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width:768px) {
  .transfer-arrow-2022 span {
    position: absolute;
    right: 0px;
    bottom: 0px;
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid #164C6C;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    transition: all .5s;
  }

  .active-arrow-2022.transfer-arrow-2022 span {
    bottom: 0px;
  }

  .iconbox4-2022 .transfer-arrow-2022 span {
    bottom: -13px;
  }
}

/*mv*/
/* .mv-oftran-2022 {
  position: relative;
  height: 660px;
  background: url(../img/of-transfer/of_transfer_bg.jpg)no-repeat center;
  background-size: cover;
} */

.mv-oftran-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbcbcb;
  mix-blend-mode: multiply;
  z-index: 0;
}

@media (orientation: landscape) and (max-width:768px) {
  .mv-oftran-2022 {
    height: 700px;
  }
}

.mv-oftran-2022 .mv-topmenu-2022 {
  padding: 120px 0 0px;
  color: #fff;
}

.mv-oftran-2022 .mv-topmenu-2022 a {
  color: #fff;
}

.of-tran-top-2022 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 1600px;
  width: 77%;
  height: auto;
}

.of-tran-top-2022 h1 {
  font-weight: 400;
  text-align: center;
  color: #fff;
}

.of-tran-top-2022 .flex-area-2022 {
  justify-content: space-around;
  margin: 60px 0 0;
}

.of-tran-top-2022 img {
  width: 22%;
}

.of-tran-top-2022 .of-tran-toptxt-2022 {
  padding: 40px 0 0;
  font-size: 20px;
  font-size: 2.0rem;
  color: #fff;
  text-align: center;
}

.mv-oftran-2022 .of-tran-bottom-2022 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  display: flex;
  align-items: center;
  text-align: center;
  max-width: 1600px;
  width: 82%;
  margin: 0 auto;
}

.of-tran-bottom-2022 a {
  position: relative;
  width: 33.333333%;
  font-weight: 400;
  color: #164C6C;
  background-color: #fff;
  padding: 20px 0 50px 0;
}

.of-tran-bottom-2022 a:nth-child(2) {
  border-left: 3px solid #D5D5D5;
  border-right: 3px solid #D5D5D5;
}

.of-tran-bottom-2022 a::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%)rotate(45deg);
  -ms-transform: translateX(-50%)rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #164C6C;
  border-right: 3px solid #164C6C;
  transition: all .5s;
}

.of-tran-bottom-2022 a:hover::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%)rotate(45deg);
  -ms-transform: translateX(-50%)rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
}

#office-features, #office-case {
  margin-top: -80px;
  padding: 80px;
}

#of-tran02-2022 .of-line-title-2022 {
  margin-bottom: 100px;
}

#office-service {
  margin-top: -40px;
  padding: 40px;
  background-color: #F1EBE6;
}

@media (max-width:992px) {
  .of-tran-top-2022 {
    width: 82%;
  }

  #office-features, #office-case {
    padding: 80px 0;
  }
}

@media (max-width:768px) {
  .mv-oftran-2022 .mv-topmenu-2022 {
    padding: 90px 0 0px;
  }

  .of-tran-top-2022 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 1600px;
    width: calc(100% - 30px);
    height: auto;
  }

  .of-tran-top-2022 .flex-area-2022 {
    display: flex;
    justify-content: space-around;
    margin: 40px 0;
  }

  .of-tran-top-2022 img {
    padding: 0;
    width: 40%;
  }

  .of-tran-top-2022 img:nth-child(1) {
    padding: 0;
    width: 30%;
    margin-bottom: 5%;
    margin-left: 15%;
  }

  .of-tran-top-2022 img:nth-child(2) {
    padding: 0;
    width: 30%;
    margin-bottom: 5%;
    margin-right: 15%;
  }

  .of-tran-top-2022 img:nth-child(3) {
    padding: 0;
    width: 30%;
    margin-left: 15%;
    margin-bottom: 0%;
  }

  .of-tran-top-2022 img:nth-child(4) {
    padding: 0;
    width: 30%;
    margin-bottom: 0%;
    margin-right: 15%;
  }

  .of-tran-top-2022 .of-tran-toptxt-2022 {
    padding: 20px 0 0;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 400;
    color: #fff;
  }

  .mv-oftran-2022 .of-tran-bottom-2022 {
    width: calc(100% - 30px);
    margin: 0 auto;
  }

  .of-tran-bottom-2022 a {
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: 400;
    color: #164C6C;
    background-color: #fff;
    padding: 20px 0 40px 0;
  }
}

@media (max-width:576px) {
  .of-tran-top-2022 .of-tran-toptxt-2022 {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .of-tran-top-2022 img {
    padding: 0;
    width: 40%;
  }

  .of-tran-top-2022 img:nth-child(1) {
    padding: 0;
    width: 40%;
    margin-bottom: 5%;
    margin-left: 5%;
  }

  .of-tran-top-2022 img:nth-child(2) {
    padding: 0;
    width: 40%;
    margin-bottom: 5%;
    margin-right: 5%;
  }

  .of-tran-top-2022 img:nth-child(3) {
    padding: 0;
    width: 40%;
    margin-left: 5%;
    margin-bottom: 0%;
  }

  .of-tran-top-2022 img:nth-child(4) {
    padding: 0;
    width: 40%;
    margin-bottom: 0%;
    margin-right: 5%;
  }
}

/*of-tran01-2022*/
#of-tran01-2022 .sub-title-2022 {
  width: 70%;
  margin: 30px auto;
  color: #333;
}

.of-tran-wrapper-2022 {
  padding: 30px 0 0;
}

.of-tran-wrapper-2022 .flex-area-2022 {
  align-items: stretch;
}

.of-tran-wrapper-2022 .left-box-2022 {
  width: calc(50% - 15px);
  margin-right: 15px;
  padding: 25px 0;
  border-top: 1px solid #D5D5D5;
  border-bottom: 1px solid #D5D5D5;
}

.of-tran-wrapper-2022 .right-box-2022 {
  width: calc(50% - 15px);
  margin-left: 15px;
  padding: 25px 0;
  border-top: 1px solid #D5D5D5;
  border-bottom: 1px solid #D5D5D5;
}

.hover-img01-2022, .hover-img02-2022 {
  overflow: hidden;
  position: relative;
  z-index: -1;
  transition: all.5s;
}

.hover-img01-2022 img, .hover-img02-2022 img {
  transition: all.5s;
}

.hover-img01-2022.active-hover-2022 img, .hover-img02-2022.active-hover-2022 img {
  transform: scale(1.05, 1.05);
  transition: all.5s;
}

.hover-img01-2022 img:hover, .hover-img02-2022 img:hover {
  transform: scale(1.05, 1.05);
  transition: all.5s;
}

.left-box-2022 .flex-box-2022, .right-box-2022 .flex-box-2022 {
  display: flex;
  align-items: stretch;
}

.of-tran-wrapper-2022 .left-box-2022 .transfer-arrow-2022, .of-tran-wrapper-2022 .right-box-2022 .transfer-arrow-2022 {
  margin-left: auto;
  margin-right: 20px;
}

.of-tran-wrapper-2022 .left-box-2022 .transfer-arrow-2022 span, .of-tran-wrapper-2022 .right-box-2022 .transfer-arrow-2022 span {
  position: relative;
  margin-top: 20px;
  z-index: -5;
}

.of-tran-wrapper-2022 .of-tran01-title-2022 {
  font-size: 23px;
  font-size: 2.3rem;
  font-weight: 600;
  color: #164C6C;
}

.of-tran-wrapper-2022 .left-box-2022 .of-tran01-title-2022, .of-tran-wrapper-2022 .right-box-2022 .of-tran01-title-2022 {
  min-height: 60px;
}

.of-tran-wrapper-2022 .of-tran01-title-2022 span {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 600;
}

.of-tran-wrapper-2022 .flex-area-2022 img {
  padding: 20px 0;
}

.of-tran-wrapper-2022 .left-box-2022 p, .of-tran-wrapper-2022 .right-box-2022 p {
  width: 75%;
  color: #333;
  text-align: left;
  line-height: 150% !important;
}

.of-tran-box-2022 {
  margin: 50px 0 0;
}

.of-tran-box-2022 .flex-area-2022 {
  align-items: stretch;
}

.of-tran-box-2022 .flex-area-2022 .flex1-25-2022, .of-tran-box-2022 .flex-area-2022 .flex2-25-2022, .of-tran-box-2022 .flex-area-2022 .flex3-25-2022, .of-tran-box-2022 .flex-area-2022 .flex4-25-2022 {
  background-color: #fff;
}

.flex1-25-2022, .flex2-25-2022, .flex3-25-2022, .flex4-25-2022 {
  width: calc(25% - 12px);
}

.flex1-25-2022 {
  margin: 8px 8px 8px 0px;
}

.flex2-25-2022 {
  margin: 8px;
}

.flex3-25-2022 {
  margin: 8px;
}

.flex4-25-2022 {
  margin: 8px 0 8px 8px;
}

.of-tran-box-2022 .iconbox4-2022 {
  position: relative;
  padding: 20px;
  text-align: center;
  min-height: 440px;
}

.flex-column-2022 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.of-tran-box-2022 .iconbox4-2022 a {
  position: relative;
  display: block;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 500;
  padding-right: 50px;
  margin-bottom: 15px;
  letter-spacing: 0;
  text-align: right;
  color: #164C6C;
}

.iconbox4-2022 .iconbox4-top-2022 {
  position: absolute;
  top: 10px;
  left: 20px;
  width: calc(100% - 40px);
  font-size: 12px;
  font-size: 1.2rem;
  color: #959393;
}

.of-tran-box-2022 .iconbox4-2022 img {
  padding: 0;
  max-width: 150px;
}

.of-tran-box-2022 .iconbox4-2022 h3 {
  font-size: 18px;
  font-size: 1.8rem;
  padding: 10px 0;
  text-align: center;
  min-height: 70px;
  font-weight: bold;
}

.of-tran-box-2022 .iconbox4-2022 h3 span {
  font-size: 17px;
  font-size: 1.7rem;
  padding: 0px 0;
  text-align: center;
}

.of-tran-box-2022 .iconbox4-2022 p {
  text-align: left;
  color: #333;
}

.of-tran-box-bottom-2022 {
  background-color: #fff;
  padding: 30px 0;
  margin: 8px auto;
}

.of-tran-box-bottom-2022 .flex-area-2022 {
  align-items: center;
  width: 90%;
  margin: 8px auto;
}

.of-tran-box-bottom-2022 .left-30-2022 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.of-tran-box-bottom-2022 .left-30-2022 img {
  width: 40%;
}

.of-tran-box-bottom-2022 .left-30-2022 h3 {
  width: 50%;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
}

.of-tran-box-bottom-2022 .right-70-2022 {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #333;
}

.of-tran-box-bottom-2022 .right-line-2022 {
  position: relative;
  z-index: 5;
  margin: 30px 0 20px;
}

.of-tran-box-bottom-2022 .right-line-2022 p {
  display: inline-block;
  position: relative;
  z-index: 5;
  font-weight: 400;
  background-color: #fff;
  transition: all 1s;
}

.of-tran-box-bottom-2022 .right-line-2022::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  height: 1px;
  background-color: #164C6C;
}

.of-tran-box-bottom-2022 .right-70-2022 ul {
  display: flex;
  flex-wrap: wrap;
  list-style: disc;
  list-style-position: inside;
}

.of-tran-box-bottom-2022 .right-70-2022 ul li {
  width: 33.333333%;
  font-weight: 500;
  padding: 5px 0px 5px 0;
}

/*of-tran02-2022*/
#of-tran02-2022 {
  margin: -80px 0 0;
  padding: 80px 0 0;
}

#of-tran02-2022 .bg-box-2022 {
  position: relative;
  top: -80px;
  height: 100px;
  background-color: #E5D7BC;
}

#of-tran02-2022 .flex-area-2022 {
  margin: 60px 0;
}

.of-tran02-area-2022 .of-lefttop-2022 {
  order: 2;
}

.of-tran02-area-2022 .of-righttop-2022 {
  order: 1;
}

.of-tran02-area-2022 .of-container-2022 {
  max-width: 800px;
  width: 100%;
  padding-right: 0;
  padding-left: 18%;
}

.of-tran02-area-2022 .of-container-2022 .of-title-box {
  padding: 0 15% 0 0;
}

#of-tran02-2022 .of-lefttop-2022 .arrow-box-blue, #of-tran02-2022 .of-righttop-2022 .arrow-box-blue {
  text-align: right;
}

#office-case .of-projectsslide-title-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  color: #164C6C;
  margin-top: 5px;
  text-align: left;
}

@media (max-width:1280px) {
  .of-tran-box-bottom-2022 .flex-area-2022 {
    width: 90%;
    margin: 8px auto;
  }

  .of-tran-box-bottom-2022 .left-30-2022 {
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
    text-align: center;
  }

  .of-tran-box-bottom-2022 .left-30-2022 .flex-box-2022 {
    display: block;
  }

  .of-tran-box-bottom-2022 .left-30-2022 img {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: -30px;
  }

  .of-tran-box-bottom-2022 .left-30-2022 h3 {
    width: 100%;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    margin-top: -120px;
  }

  .of-tran-box-bottom-2022 .right-70-2022 ul li {
    width: auto;
    font-weight: 500;
    padding: 5px 30px 5px 0;
  }
}

@media (max-width:1200px) {
  .of-tran-box-2022 .iconbox4-2022 a {
    text-align: left;
  }
}

@media (max-width:1100px) {
  .of-tran-wrapper-2022 .left-box-2022 .of-tran01-title-2022, .of-tran-wrapper-2022 .right-box-2022 .of-tran01-title-2022 {
    min-height: 83px;
  }
}

@media (max-width:1000px) {

  /*#of-tran02-2022*/
  #of-tran02-2022 .of-righttop-2022 {
    width: 100%;
  }

  #of-tran02-2022 .of-container-2022 {
    max-width: initial;
    width: 82%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
  }

  #of-tran02-2022 .of-righttop-2022 .of-title-box {
    padding: 0 0 0 0;
  }

  .of-tran02-area-2022 .of-container-2022 {
    max-width: initial;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  .of-tran02-area-2022 .of-container-2022 .of-title-box {
    padding: 0 0 0 0;
  }

  .of-tran-box-2022 .iconbox4-2022 a {
    text-align: right;
  }
}

@media (max-width:992px) {
  .flex1-25-2022, .flex2-25-2022, .flex3-25-2022, .flex4-25-2022 {
    width: calc(50% - 12px);
  }

  .flex1-25-2022 {
    margin: 8px 8px 8px 0px;
  }

  .flex2-25-2022 {
    margin: 8px 0 8px 8px;
  }

  .flex3-25-2022 {
    margin: 8px 8px 8px 0;
  }

  .flex4-25-2022 {
    margin: 8px 0 8px 8px;
  }
}

@media (max-width:768px) {
  #of-tran01-2022 .sub-title-2022 {
    font-size: 15px;
    font-size: 1.5rem;
    width: 100%;
    margin: 10px auto;
  }

  .of-tran-wrapper-2022 {
    padding: 30px 0;
  }

  .of-tran-wrapper-2022 .left-box-2022 {
    width: 100%;
    margin-right: 0;
    padding: 30px 0;
    border-top: 1px solid #D5D5D5;
    border-bottom: 1px solid #D5D5D5;
  }

  .of-tran-wrapper-2022 .right-box-2022 {
    width: 100%;
    margin-left: 0;
    padding: 30px 0;
    border-top: 0px solid #D5D5D5;
    border-bottom: 1px solid #D5D5D5;
  }

  .left-box-2022 .flex-box-2022, .right-box-2022 .flex-box-2022 {
    display: flex;
    align-items: center;
  }

  .of-tran-wrapper-2022 .left-box-2022 .transfer-arrow-2022 span, .of-tran-wrapper-2022 .right-box-2022 .transfer-arrow-2022 span {
    position: relative;
    margin-top: 0px;
    z-index: -5;
  }

  .of-tran-wrapper-2022 .left-box-2022 .of-tran01-title-2022, .of-tran-wrapper-2022 .right-box-2022 .of-tran01-title-2022 {
    min-height: initial;
    margin-bottom: 15px;
  }

  .of-tran-wrapper-2022 .of-tran01-title-2022 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .of-tran-wrapper-2022 .of-tran01-title-2022 {
    min-height: initial;
  }

  .of-tran-wrapper-2022 .of-tran01-title-2022 span {
    font-size: 12px;
    font-size: 1.2rem;
  }

  .flex1-25-2022, .flex2-25-2022, .flex3-25-2022, .flex4-25-2022 {
    width: 100%;
  }

  .flex1-25-2022, .flex2-25-2022, .flex3-25-2022, .flex4-25-2022 {
    margin: 20px 0;
  }

  .of-tran-box-2022 .flex-area-2022 div {
    background-color: #fff;
    min-height: initial;
  }

  .of-tran-box-2022 .iconbox4-2022 {
    padding: 30px 20px;
  }

  .of-tran-box-2022 .iconbox4-2022 a {
    position: relative;
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: 500;
    margin-top: 35px;
    text-align: right;
  }

  .of-tran-box-2022 .iconbox4-2022 h3 {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 10px 0 20px;
    text-align: center;
    min-height: initial;
  }

  .of-tran-box-bottom-2022 .left-30-2022 {
    padding-top: 20px;
    padding-bottom: 0px;
  }

  .of-tran-box-bottom-2022 .left-30-2022 img {
    width: 40%;
    padding: 0;
    position: relative;
  }

  .of-tran-box-bottom-2022 .left-30-2022 .of-img_ai-2022 {
    width: 40%;
    max-width: 160px;
    padding: 0;
    position: relative;
  }

  .of-tran-box-bottom-2022 .left-30-2022 h3 {
    width: 100%;
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: -50px;
  }

  .of-tran-box-bottom-2022 .right-70-2022 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .of-tran-box-bottom-2022 .right-70-2022 ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .of-tran-box-bottom-2022 .right-70-2022 ul li {
    width: 50%;
    padding: 5px 0px 5px 0px;
  }

  .of-tran-box-bottom-2022 .right-70-2022 ul li:nth-child(odd) {
    width: 55%;
    padding: 5px 10px 5px 0px;
  }

  .of-tran-box-bottom-2022 .right-70-2022 ul li:nth-child(even) {
    width: 45%;
    padding: 5px 0px 5px 10px;
  }

  .of-tran-box-bottom-2022 .right-70-2022 ul li:last-child {
    width: 100%;
  }

  /*#of-tran02-2022*/
  #of-tran02-2022 .of-container-2022 {
    max-width: initial;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  #of-tran02-2022 .of-num-2022, #of-tran02-2022 .of-title-2022 {
    text-align: center;
  }

  #of-tran02-2022 .of-lefttop-2022 .arrow-box-blue, #of-tran02-2022 .of-righttop-2022 .arrow-box-blue {
    text-align: center;
  }

  .of-projectsslide-title-2022 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media (max-width:576px) {
  .of-tran-box-bottom-2022 .left-30-2022 h3 {
    width: 100%;
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: -50px;
  }

  .of-tran-box-bottom-2022 .left-30-2022 .of-img_ai-2022 {
    width: 50%;
    max-width: 210px;
    padding: 0;
    position: relative;
  }

  .of-tran-box-2022 .iconbox4-2022 {
    padding: 30px 15px;
  }

  .of-projectsslide-title-2022 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}


/*-------------------*/
/*--Office Projects--*/
/*-------------------*/
/*#of-projects01-2022*/

.of-projects01-area1-2022 {
  background: #164C6C;
  padding: 200px 0 100px;
  position: relative;
}

.of-projects01-area1-2022 h2 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  color: #fff;
  position: relative;
}

.of-projects01-area1-2022 h2:before {
  content: '?';
  position: absolute;
  top: -181px;
  left: 0;
  right: 0;
  margin: auto;
  width: 82px;
  height: 392px;
  font-size: 300px;
  transition: all .5s;
  font-family: Trailmade;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.of-projects01-area1-2022 .flex-box-2022 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  position: relative;
  padding: 40px 0 0;
  color: #fff;
}

.flex-25 {
  width: 23%;
}

.circle-2022 {
  flex-basis: 25%;
  width: 100%;
  position: relative;
  display: inline-block;
  height: 0;
  padding-top: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
}

.flex-25:nth-child(2) {
  margin-left: -90px;
}

.flex-25:nth-child(3) {
  margin-right: -90px;
}

.circle-2022 p {
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 95%;
  text-align: center;
  font-size: 18px;
  font-size: 1.8rem;
}

.of-projects01-area1-2022 .flex-box-2022::before {
  content: '';
  background: url(../img/of-projects/of_projects_arrow.svg) no-repeat;
  position: absolute;
  bottom: -147px;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 93px;
  transition: all .5s;
}

.of-projects01-area1-2022 .flex-box-2022 img {
  width: 23%;
}

.of-projects01-area1bottom-2022 {
  background: url(../img/of-projects/of_projects01_area1_bg.jpg) no-repeat center center / cover;
  padding-bottom: 100px;
}

.of-projects01-area1bottom-2022 h3 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 180%;
  text-align: center;
  padding: 120px 0 20px;
}

.of-projects01-area1bottom-2022 h4 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 40px 0 10px;
}

.of-projects01-area1bottom-2022 p {
  line-height: 180%;
}

.of-projects01-area1bottom-2022 p span {
  text-decoration: underline;
}


/*of-projects04-2022*/
.of-projects04-2022 {
  background: #F1EBE6;
  padding: 120px 0 100px;
}

.of-projects04-2022 h2 {
  text-align: center;
  font-size: 32px;
  font-size: 3.2rem;
  font-family: 'futura-pt', serif;
  font-weight: 500;
  margin: 0 0 40px;
  color: #164C6C;
}

.of-projects04-2022 p {
  font-size: 16px;
  font-size: 1.6rem;
  margin: 0 0 70px;
}

.of-projects04-2022-list {
  background: url(../img/of-projects/of_projects04_bg.png) no-repeat center center / contain;
  padding: 0 50px;
}

.of-projects04-2022-listtop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.of-projects04-2022-listtop:after {
  content: '';
  background: url(../img/of-projects/of_projects_consulting_arrow.svg) no-repeat;
  position: absolute;
  bottom: 40px;
  right: 7vw;
  margin: auto;
  width: 10px;
  height: 20px;
  transition: all .5s;
  transform: rotate(90deg);
}

.of-projects04-2022-listbottom {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.of-projects04-2022-list li {
  width: 20%;
  text-align: center;
  position: relative;
}

.of-projects04-2022-list li:after {
  content: '';
  background: url(../img/of-projects/of_projects_consulting_arrow.svg) no-repeat;
  position: absolute;
  top: 60px;
  right: -3vw;
  margin: auto;
  width: 10px;
  height: 20px;
  transition: all .5s;
}

.of-projects04-2022-listbottom li:after {
  transform: scale(-1, 1);
  left: -40px;
  right: unset;
}

.of-projects04-2022-list li:last-child:after {
  content: none;
}

.of-projects04-2022-list h3 {
  font-size: 18px;
  font-size: 1.8rem;
  color: #164C6C;
  margin: 0 0 10px;
  font-weight: 500;
}

.of-projects04-2022-list p {
  font-size: 14px !important;
  font-size: 1.4rem !important;
  text-align: left;
  color: #164C6C;

}

.of-projects04-2022-list li img {
  margin: 0 0 10px;
  width: 150px;
}


/*#of-projects02-2022*/
.of-projects01-area2-2022 {
  padding: 0px 0 60px;
}

#of-projects02-2022 .head-box-2022 {
  padding: 30px 0 60px;
}

#of-projects02-2022 h2 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  padding: 0px 0 20px;
}

#of-projects02-2022 .of-projects01-area2-txt-2022 {
  text-align: center;
  margin: 20px 0;
}

#of-projects02-2022 .flex-box-2022 {
  display: flex;
}

.of-projects01-area2-2022 .left-box-2022 {
  width: 50%;
}

.of-projects01-area2-2022 .left-box-2022 img {
  width: 90%;
}

.of-projects01-area2-2022 .right-box-2022 {
  width: 50%;
}

.of-projects01-area2-2022 .right-box-2022 h4 {
  margin-bottom: 10px;
}

.of-projects01-area2-2022 .right-box-2022 p {
  margin-bottom: 30px;
}

#of-projects02-2022 .of-projects-line-2022 {
  position: relative;
  margin-bottom: 20px;
}

.of-projects-line-2022 h3 {
  font-size: 24px;
  font-size: 2.4rem;
  display: inline-block;
  position: relative;
  z-index: 5;
  font-weight: 500;
  background-color: #fff;
  transition: all 1s;
  padding-right: 10px;
}

.of-projects-line-2022 span {
  font-family: 'futura-pt', serif;
  font-size: 28px;
  font-size: 2.8rem;
  color: #164C6C;
  padding-right: 10px;
}

.of-projects-line-2022::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  height: 1px;
  background-color: #164C6C;
}

/*#of-projects03-2022*/
#of-projects03-2022 .of-title34 {
  font-size: 34px;
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 150%;
}

#of-projects03-2022 .of-title28 {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 150%;
}

#of-projects03-2022 .of-title24 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 150%;
}

#of-projects03-2022 .of-title20 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  line-height: 150%;
}

#of-projects03-2022 .common-box {
  margin: 60px 0;
  background: #fff;
}

#of-projects03-2022 .common-box .flex-area-2022 {
  align-items: stretch;
  border-bottom: 1px solid #707070;
  padding: 0 0 60px;
}

#of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 {
  width: 50%;
}

#of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 .of-title34 {
  margin-bottom: 15px;
}

#of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 .txt-2022 {
  margin-bottom: 25px;
}

#of-projects03-2022 .common-box .flex-area-2022 .right-box-2022 {
  width: 50%;
  padding-left: 50px;
}

#of-projects03-2022 .common-box .flex-area-2022 .border-box {
  border: 1px solid #164C6C;
  padding: 20px;
}

#of-projects03-2022 .common-box .border-box .of-title20 {
  border-bottom: 1px solid #164C6C;
  padding: 0 0 5px;
  margin: 0 0 10px;
}

#of-projects03-2022 .common-box .border-box .txt-2022 {
  line-height: 200%;
  padding: 0 0 5px;
  margin: 0 0 10px;
}

#of-projects03-2022 .common-innner {
  margin: 0;
  padding: 60px 70px;
}

#of-projects03-2022 .common-innner .innner-box {
  margin: 80px 0;
}

#of-projects03-2022 .common-innner .innner-box .txt-2022 {
  line-height: 200%;
  margin: 20px 0 0;
}

#of-projects03-2022 .common-innner .innner-box .txt-2022.last-txt {
  margin: 0px 0 0;
  padding-left: 1em;
  text-indent: -1em;
}

#of-projects03-2022 .last-box {
  background: #F1EBE6;
  max-width: 90%;
  margin: 60px auto;
  padding: 60px 60px 30px;
}

#of-projects03-2022 .last-box .of-title28 {
  margin-bottom: 20px;
}

#of-projects03-2022 .last-box .txt-2022 {
  font-weight: 400;
}

#of-projects03-2022 .last-box .flex-area-2022 {
  justify-content: space-between;
  align-items: stretch;
  border: none;
  padding: 0;
  margin: 40px 0 0;
}

#of-projects03-2022 .coment-box {
  width: 48%;
  padding: 25px 35px 35px 25px;
  position: relative;
  background: #fff;
  margin-bottom: 50px;
}

#of-projects03-2022 .coment-box div {
  display: flex;
  align-items: center;
}

#of-projects03-2022 .coment-box div img {
  width: 60px;
  padding-right: 15px;
}

#of-projects03-2022 .coment-box .btxt-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 150%;
}

#of-projects03-2022 .coment-box .bottom-txt {
  line-height: 200%;
  margin: 20px 0;
}

#of-projects03-2022 .coment-box::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 1px;
  background: #ECDBCC;
}

#of-projects03-2022 .coment-box::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 1px;
  background: #ECDBCC;
}

@media (max-width:992px) {
  .circle-2022 p {
    font-size: 1.4rem;
  }

  .flex-25:nth-child(2) {
    margin-left: 0;
  }

  .flex-25:nth-child(3) {
    margin-right: 0;
  }

  .of-projects01-area1-2022 h3 {
    font-size: 20px;
    font-size: 2.0rem;
  }

  /*#of-projects03-2022*/
  #of-projects03-2022 .common-box .flex-area-2022 {
    display: block;
    border-bottom: 1px solid #707070;
    padding: 0 0 60px;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 {
    width: 100%;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 .of-title34 {
    margin-bottom: 15px;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 .txt-2022 {
    margin-bottom: 25px;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .right-box-2022 {
    width: 100%;
    padding-left: 0px;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .border-box {
    margin: 30px 0 0
  }

  #of-projects03-2022 .common-box .border-box .of-title20 {
    border-bottom: 1px solid #164C6C;
    padding: 0 0 5px;
    margin: 0 0 10px;
  }

  #of-projects03-2022 .common-box .border-box .txt-2022 {
    line-height: 200%;
    padding: 0 0 5px;
    margin: 0 0 10px;
  }

  #of-projects03-2022 .common-innner {
    padding: 60px 50px;
  }

  #of-projects03-2022 .common-innner .innner-box {
    margin: 80px 0;
  }

  #of-projects03-2022 .common-innner .innner-box .txt-2022 {
    line-height: 200%;
    margin: 20px 0 0;
  }

  #of-projects03-2022 .last-box {
    background: #F1EBE6;
    max-width: 100%;
    margin: 60px auto;
    padding: 40px;
  }

  #of-projects03-2022 .last-box .of-title28 {
    margin-bottom: 20px;
  }

  #of-projects03-2022 .last-box .txt-2022 {
    font-weight: 400;
  }

  #of-projects03-2022 .last-box .flex-area-2022 {
    display: block;
    margin: 40px 0;
    padding: 0;
    border: none;
  }

  #of-projects03-2022 .coment-box {
    width: 100%;
    padding: 25px 35px 35px 25px;
    position: relative;
    background: #fff;
    margin-bottom: 50px;
  }

  #of-projects03-2022 .coment-box div {
    display: flex;
    align-items: center;
  }

  #of-projects03-2022 .coment-box div img {
    width: 60px;
    padding-right: 15px;
  }

  #of-projects03-2022 .coment-box .btxt-2022 {
    font-weight: 500;
    line-height: 150%;
  }

  #of-projects03-2022 .coment-box .bottom-txt {
    line-height: 200%;
    margin: 20px 0;
  }

  .of-projects04-2022 {
    padding: 80px 0;
  }

  .of-projects04-2022-list {
    padding: 0;
  }

  .of-projects04-2022-list li:after {
    right: -3.5vw;
  }
}



@media (max-width:768px) {
  .of-projects04-2022-lead {
    margin: 0 0 30px !important;
  }

  .of-projects04-2022-list {
    padding: 0 15px;
    background: none;
  }

  .of-projects04-2022-list li {
    width: 100%;
  }

  .of-projects04-2022-list li:after,
  .of-projects04-2022-listtop:after {
    bottom: 20px;
    left: 0;
    right: 0;
    top: unset;
    transform: rotate(90deg);
    width: 20px;
    height: 40px;
    background: url(../img/of-projects/of_projects_consulting_arrow.svg) no-repeat center center/cover;
  }

  .of-projects01-area1-2022 h2:before {
    font-size: 28vw;
    top: -15vw;
    width: 40px;
    height: 140px;
  }

  .flex-25:nth-child(2) {
    margin-left: 0;
  }

  .flex-25:nth-child(3) {
    margin-right: 0;
  }

  .of-projects01-area1-2022 .flex-box-2022::before {
    bottom: -67px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 93px;
    transition: all .5s;
  }

  /*#of-projects01-2022*/
  .of-projects01-area1-2022 {
    padding: 50px 15px 20px;
  }

  .of-projects01-area1-2022 h2 {
    font-size: 21px;
    font-size: 2.1rem;
  }

  .of-projects01-area1-2022 h3 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
    margin: 50px 0;
  }

  .of-projects01-area1-2022 .flex-box-2022 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: relative;
    padding: 40px 0;
  }

  .of-projects01-area1-2022 .flex-box-2022 img {
    width: 50%;
    padding: 10px;
  }

  .of-projects01-area1bottom-2022 {
    padding: 0;
    background-color: #fff;
  }

  .of-projects01-area1bottom-2022 h3 {
    font-size: 1.8rem;
    padding-top: 100px;
  }

  .of-projects01-area1bottom-2022 h4 {
    margin: 20px 0 10px;
  }

  .of-projects01-area1bottom-2022 p {
    line-height: 200%;
    padding: 0 0 40px;
  }

  .of-projects04-2022 {
    padding: 50px 0 0;
  }

  .of-projects01-area2-2022 {
    padding: 0 0 30px;
  }

  /*#of-projects02-2022*/

  #of-projects02-2022 .head-box-2022 {
    padding: 0;

  }

  #of-projects02-2022 h2 {
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 500;
    text-align: center;
    padding: 0px 0 20px;
  }

  #of-projects02-2022 .flex-box-2022 {
    display: block;
  }

  .of-projects01-area2-2022 .left-box-2022 {
    width: 100%;
  }

  .of-projects01-area2-2022 .left-box-2022 img {
    width: 100%;
  }

  .of-projects01-area2-2022 .right-box-2022 {
    width: 100%;
    margin-top: 15px;
  }

  .of-projects-line-2022 h3 {
    font-size: 18px;
    font-size: 1.8rem;
    display: inline-block;
    position: relative;
    z-index: 5;
    font-weight: 500;
    transition: all 1s;
    padding-right: 10px;
  }

  .of-projects-line-2022 span {
    font-family: 'futura-pt', serif;
    font-size: 22px;
    font-size: 2.2rem;
    padding-right: 10px;
  }

  /*#of-projects03-2022*/
  #of-projects03-2022 .of-title34 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 500;
  }

  #of-projects03-2022 .of-title28 {
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 500;
  }

  #of-projects03-2022 .of-title24 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 500;
  }

  #of-projects03-2022 .of-title20 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 400;
  }

  #of-projects03-2022 .common-innner {
    padding: 20px 15px;
  }

  #of-projects03-2022 .common-box {
    margin: 30px 0;
  }

  #of-projects03-2022 .common-box .flex-area-2022 {
    display: block;
    border-bottom: 1px solid #707070;
    padding: 0 0 60px;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 {
    width: 100%;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 .of-title34 {
    margin-bottom: 5px;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .left-box-2022 .txt-2022 {
    margin-bottom: 15px;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .right-box-2022 {
    width: 100%;
    padding-left: 0px;
  }

  #of-projects03-2022 .common-box .flex-area-2022 .border-box {
    margin: 30px 0 0
  }

  #of-projects03-2022 .common-box .border-box .of-title20 {
    border-bottom: 1px solid #164C6C;
    padding: 0 0 5px;
    margin: 0 0 10px;
  }

  #of-projects03-2022 .common-box .border-box .txt-2022 {
    line-height: 200%;
    padding: 0 0 5px;
    margin: 0 0 10px;
  }

  #of-projects03-2022 .common-innner .innner-box {
    margin: 40px 0;
  }

  #of-projects03-2022 .common-innner .innner-box .txt-2022 {
    line-height: 200%;
    margin: 20px 0 0;
  }

  #of-projects03-2022 .last-box {
    margin: 60px auto 20px;
    padding: 40px 15px 30px;
  }

  #of-projects03-2022 .last-box .of-title28 {
    margin-bottom: 20px;
  }

  #of-projects03-2022 .last-box .txt-2022 {
    font-weight: 400;
  }

  #of-projects03-2022 .last-box .flex-area-2022 {
    display: block;
    margin: 40px 0 0;
    padding: 0;
    border: none;
  }

  #of-projects03-2022 .coment-box {
    width: 100%;
    padding: 15px 25px 25px 15px;
    position: relative;
    background: #fff;
    margin-bottom: 30px;
  }

  #of-projects03-2022 .coment-box div {
    display: flex;
    align-items: center;
  }

  #of-projects03-2022 .coment-box div img {
    width: 50px;
    padding-right: 15px;
    border: none;
  }

  #of-projects03-2022 .coment-box .btxt-2022 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 150%;
  }

  #of-projects03-2022 .coment-box .bottom-txt {
    line-height: 200%;
    margin: 20px 0;
  }
}

@media (max-width:640px) {

  .flex-25 {
    width: calc(50% - 10px);
  }

  .circle-2022 {
    margin: 5px 0;
  }

  .circle-2022 p {
    font-size: 1.3rem;
  }

  /*#of-projects02-2022*/
  #of-projects02-2022 h2 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 500;
    text-align: center;
    padding: 0px 0 20px;
  }
}

/*-----------------*/
/*--Office Design--*/
/*-----------------*/
/*of-design01-2022*/
#of-design01-2022 {}

.of-design-wrapper-2022 .flex-area-2022 {
  padding: 50px 0;
  align-items: stretch;
}

.of-design-wrapper-2022 .left-box-2022 {
  width: 50%;
}

.of-design-wrapper-2022 .right-box-2022 {
  width: 50%;
}

.of-design-wrapper-2022 .left-box-2022 img, .of-design-wrapper-2022 .right-box-2022 img {
  width: 100%;
}

.of-design-wrapper-2022 .left-box-2022.txt-area-2022, .of-design-wrapper-2022 .right-box-2022.txt-area-2022 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 40px;
  background-color: #fff;
}

.of-design-wrapper-2022 h3 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 155%;
  letter-spacing: 0;
  padding: 0px 0 30px;
}

.of-design-wrapper-2022 p {
  line-height: 200%;
  letter-spacing: 0.04em;
}

.of-design-wrapper-2022 .flex-area-2022 .arrow-box-blue {
  text-align: right;
  margin: 30px 0 0;
}

.of-design-wrapper-2022 .flex-area-2022 .arrow-box-blue p {
  padding: 15px 90px 15px 25px;
}

.of-design-wrapper-2022 .deco-txt-2022 {
  font-family: 'futura-pt', serif;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 100%;
  color: #164C6C;
  padding: 0 0 10px;
}

.of-design-wrapper-2022 .flex-box-2022 {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 50px 0 0;
}

.of-design-wrapper-2022 .flex-3 {
  width: 33%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.of-design-wrapper-2022 .flex-3.center-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: #164C6C;
}

.of-design-wrapper-2022 .flex-3.center-2022::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: #164C6C;
}

.of-design-wrapper-2022 .common-area {
  position: relative;
  padding: 20px 30px;
  text-align: center;
  margin: 0px;
}

.of-design-wrapper-2022 .common-area img {
  margin: 20px 0;
  width: 40%;
}

.of-design-wrapper-2022 .common-area h4 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  padding: 0 0 25px;
}

.of-design-wrapper-2022 .common-area p {
  text-align: left;
}

.of-design-wrapper-2022 .flex-3 .arrow-box-blue {
  margin: 30px 0 0;
}

.of-design-wrapper-2022 .flex-3 .arrow-box-blue p {
  font-size: 1.4rem;
  width: 80%;
  min-height: 94px;
  padding: 15px 50px 15px 15px;
}

.of-design-wrapper-2022 .flex-3 .arrow-box-blue p.flex-txt {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.of-design-wrapper-2022 .flex-3 .arrow-box-blue p::before {
  position: absolute;
  top: 50%;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.of-design-wrapper-2022 .flex-3 .arrow-box-blue p::after {
  position: absolute;
  top: 50%;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.of-design-wrapper-2022 .flex-3 .arrow-box-blue p:hover::before {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.of-design-wrapper-2022 .flex-3 .arrow-box-blue p:hover::after {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

/*#of-designcase-2022*/
#of-designcase-2022 .case-design-01 .of-case-area1-2022 {
  position: relative;
  background: url(../img/of-design/of-des-case01.jpg)no-repeat center center;
  background-size: cover;
}

#of-designcase-2022 .case-design-02 .of-case-area1-2022 {
  position: relative;
  background: url(../img/of-design/of-des-case02.jpg)no-repeat center center;
  background-size: cover;
}

#of-designcase-2022 .case-design-03 .of-case-area1-2022 {
  position: relative;
  background: url(../img/of-design/of-des-case03.jpg)no-repeat center center;
  background-size: cover;
}

.of-case-area4-2022 {
  padding: 0 0 50px;
  background: #fff;
}

.of-case-area4-2022 .case-textarea4-title-2022 {
  padding: 30px 0;
}

.of-case-area4-2022 .case-textarea4-title-2022 h4 {
  font-weight: 400;
}

.of-case-area4-2022 .case-textarea4-title-2022 p {
  padding: 20px 0;
}

.of-case-area4-2022 .flex-area-2022 {
  align-items: flex-start;
  padding: 30px 0;
}

.of-case-area4-2022 .flex-area-2022 img {
  width: 100%;
}

.of-case-area4-2022 .flex-area-2022 p {
  line-height: 180%;
  padding: 10px 0 30px;
}

/*#of-design02-2022*/
#of-design02-2022 .of-link-2022 {
  padding: 80px;
  margin: auto;
  display: block;
  position: relative;
  color: #164C6C;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
  width: 100%;
  border-left: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  transition: all .5s;
}

#of-design02-2022 .of-link-2022:hover {
  color: #fff;
  background-color: #ECDBCC;
  border-left: 1px solid #ECDBCC;
  border-right: 1px solid #ECDBCC;
}

#of-design02-2022 .of-link-2022 p {
  font-weight: 400;
}

#of-design02-2022 .of-link-2022::before {
  position: absolute;
  top: 50%;
  right: 50px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 50px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#of-design02-2022 .of-link-2022::after {
  position: absolute;
  top: 50%;
  right: 52px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 15px;
  height: 15px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

#of-design02-2022 .of-link-2022:hover::before {
  position: absolute;
  top: 50%;
  right: 30px;
  width: 70px;
  height: 1px;
  background: #fff;
  transition: all .5s;
}

#of-design02-2022 .of-link-2022:hover::after {
  position: absolute;
  top: 50%;
  right: 31px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: all .5s;
}

#of-design02-2022 .arrow-box-blue {
  margin: 30px 0;
}

/*of-design-slide*/
#of-design-slide .sub-txt-2022 {
  text-align: center;
  padding: 20px 0;
}

#of-design-slide .of-projectsslide-title-2022 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #164C6C;
  margin: 5px 0 15px;
  text-align: left;
}

#of-design-slide .of-caption-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #164C6C;
  margin: 0 0 15px;
}

#of-design-slide .of-company-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #164C6C;
}

/*#of-design03-2022*/
#of-design03-2022 .of-title34 {
  font-size: 34px;
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 150%;
}

#of-design03-2022 .of-title24 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 150%;
}

#of-design03-2022 .common-box {
  padding: 50px 70px;
  margin-bottom: 100px;
  background: #fff;
}

#of-design03-2022 .common-box.last-box {
  margin-bottom: 0px;
}

#of-design03-2022 .header-area {
  margin: 0px;
}

#of-design03-2022 .head-txt {
  color: #989898;
  text-align: left;
}

#of-design03-2022 .head-txt span {
  font-family: 'futura-pt', serif;
  font-size: 30px;
  font-size: 3.0rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
}

#of-design03-2022 .header-area .of-title34 {
  margin: 30px 0 15px;
}

#of-design03-2022 .header-area .txt-name {
  text-align: left;
  margin: 0 0 25px;
}

#of-design03-2022 .header-area .of-title24 {
  text-align: left;
  margin: 0 0 15px;
}

#of-design03-2022 .header-area .txt-2022 {
  font-weight: 400;
  text-align: left;
  line-height: 200%;
}

#of-design03-2022 .common-box .inner-box {
  margin: 80px 0;
}

#of-design03-2022 .common-box .inner-box .inner-txt {
  margin: 20px 0 30px;
}

#of-design03-2022 .common-box .flex-area-2022 {
  justify-content: space-between;
  margin: 0;
  align-items: stretch;
}

#of-design03-2022 .common-box .flex-area-2022.felx-normal {
  justify-content: center;
}

#of-design03-2022 .common-box .flex-area-2022 .flex-img {
  width: 50%;
  height: auto;
}

#of-design03-2022 .common-box .flex-area-2022 .flex2-img {
  width: 49.5%;
  height: auto;
}

#of-design03-2022 .common-box .flex-area-2022 .flex3-img {
  width: 33%;
  height: auto;
}

#of-design03-2022 .common-box .flex-area-2022 .left-box {
  width: 50%;
  padding-right: 40px;
}

#of-design03-2022 .common-box .flex-area-2022 .right-box {
  width: 50%;
}

#of-design03-2022 .common-box .flex-area-2022 .left-ibox {
  width: 55%;
}

#of-design03-2022 .common-box .flex-area-2022 .right-ibox {
  width: 55%;
}

#of-design03-2022 .common-box .flex-area-2022 .left-tbox {
  width: 45%;
  padding-right: 40px;
}

#of-design03-2022 .common-box .flex-area-2022 .right-tbox {
  width: 45%;
  padding-left: 40px;
}

#of-design03-2022 .common-box .flex-area-2022 .of-title24 {
  margin-bottom: 20px;
}

#of-design03-2022 .common-box .flex-area-2022 .txt-2022 {
  line-height: 200%;
  text-align: left;
}

#of-design03-2022 .common-box .flex-2022 {
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0;
  align-items: stretch;
}

#of-design03-2022 .common-box .flex-2022 .flex2-ver {
  width: 100%;
  height: auto;
}

@media (max-width:1200px) {
  #of-design02-2022 .of-link-2022 {
    width: 100%;
  }
}

@media (max-width:1000px) {
  .of-design-wrapper-2022 .flex-area-2022 .arrow-box-blue {
    text-align: center;
    margin: 30px 0;
  }

  .of-design-wrapper-2022 .flex-area-2022 .arrow-box-blue p {
    margin: 0px 0;
  }

  .of-design-wrapper-2022 .left-box-2022 {
    width: 100%;
  }

  .of-design-wrapper-2022 .right-box-2022 {
    width: 100%;
  }

  .of-design-wrapper-2022 .flex-area-2022 {
    padding: 30px 0;
  }

  .of-design-wrapper-2022 .left-box-2022.txt-area-2022, .of-design-wrapper-2022 .right-box-2022.txt-area-2022 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0px;
    background-color: #fff;
  }

  .of-design-wrapper-2022 h3 {
    padding: 0px 20px 30px;
  }

  .of-design-wrapper-2022 p {
    padding: 0 20px 30px;
  }

  .of-design-wrapper-2022 .deco-txt-2022 {
    padding: 30px 20px 10px;
  }

  .of-design-wrapper-2022 .flex-box-2022 {
    display: block;
    flex-wrap: wrap;
    padding: 0px
  }

  .of-design-wrapper-2022 .flex-3 {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 0;
  }

  .of-design-wrapper-2022 .flex-3.center-2022::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    right: 0;
    width: 100%;
    height: 1px;
    background: #164C6C;
  }

  .of-design-wrapper-2022 .flex-3.center-2022::after {
    content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: #164C6C;
  }

  .of-design-wrapper-2022 .common-area {
    position: relative;
    padding: 0px 30px 20px;
    text-align: center;
    margin: 0px;
  }

  .of-design-wrapper-2022 .common-area img {
    margin: 0px 0;
    width: 40%;
  }

  .of-design-wrapper-2022 .common-area h4 {
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 600;
    padding: 15px 0;
  }

  .of-design-wrapper-2022 .common-area p {
    text-align: left;
  }

  .of-design-wrapper-2022 .flex-3 .arrow-box-blue {
    margin: 10px 0 0;
  }

  .of-design-wrapper-2022 .flex-3 .arrow-box-blue p {
    font-size: 1.4rem;
    width: 75%;
    min-height: auto;
    padding: 15px 50px 15px 25px;
  }

  /*#of-design03-2022*/
  #of-design03-2022 .of-title34 {
    font-size: 34px;
    font-size: 3.4rem;
    font-weight: 500;
    line-height: 150%;
  }

  #of-design03-2022 .of-title24 {
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 150%;
  }

  #of-design03-2022 .common-box {
    padding: 50px 40px;
    margin-bottom: 100px;
    background: #fff;
  }

  #of-design03-2022 .common-box.last-box {
    margin-bottom: 0px;
  }

  #of-design03-2022 .header-area {
    margin: 0px;
  }

  #of-design03-2022 .head-txt {
    color: #989898;
  }

  #of-design03-2022 .head-txt span {
    font-family: 'futura-pt', serif;
    font-size: 30px;
    font-size: 3.0rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
  }

  #of-design03-2022 .header-area .of-title34 {
    margin: 30px 0 15px;
  }

  #of-design03-2022 .header-area .txt-name {
    text-align: left;
    margin: 0 0 25px;
  }

  #of-design03-2022 .header-area .of-title24 {
    text-align: left;
    margin: 0 0 15px;
  }

  #of-design03-2022 .header-area .txt-2022 {
    font-weight: 400;
    text-align: left;
    line-height: 200%;
  }

  #of-design03-2022 .common-box .inner-box {
    margin: 40px 0 0;
  }

  #of-design03-2022 .common-box .inner-box .inner-txt {
    margin: 15px 0 20px;
  }

  #of-design03-2022 .common-box .flex-area-2022 {
    display: block;
    justify-content: space-between;
    margin: 0;
    align-items: stretch;
  }

  #of-design03-2022 .common-box .flex-area-2022 .flex-img {
    width: 100%;
    height: auto;
  }

  #of-design03-2022 .common-box .flex-area-2022 .flex2-img {
    width: 100%;
    height: auto;
  }

  #of-design03-2022 .common-box .flex-area-2022 .flex3-img {
    width: 100%;
    height: auto;
  }

  #of-design03-2022 .common-box .flex-area-2022 .left-box {
    width: 100%;
    padding-right: 0px;
  }

  #of-design03-2022 .common-box .flex-area-2022 .right-box {
    width: 100%;
  }

  #of-design03-2022 .common-box .flex-area-2022 .left-ibox {
    width: 100%;
  }

  #of-design03-2022 .common-box .flex-area-2022 .right-ibox {
    width: 100%;
  }

  #of-design03-2022 .common-box .flex-area-2022 .left-tbox {
    width: 100%;
    padding-right: 0px;
  }

  #of-design03-2022 .common-box .flex-area-2022 .right-tbox {
    width: 100%;
    padding-left: 0px;
  }

  #of-design03-2022 .common-box .flex-area-2022 .of-title24 {
    margin-bottom: 20px;
  }

  #of-design03-2022 .common-box .flex-area-2022 .txt-2022 {
    line-height: 200%;
    text-align: left;
  }

  #of-design03-2022 .common-box .flex-2022 {
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    align-items: stretch;
  }

  #of-design03-2022 .common-box img {
    width: 100%;
    height: auto;
    margin: 15px 0;
  }
}

@media (max-width:768px) {
  .of-design-wrapper-2022 h3 {
    font-size: 20px;
    font-size: 2.0rem;
  }

  .of-design-wrapper-2022 p {
    padding: 0 15px 30px;
  }

  .of-design-wrapper-2022 .common-area h4 {
    font-size: 16px;
    font-size: 1.6rem;
  }

  .of-design-wrapper-2022 .common-area p {
    text-align: left;
    padding: 0;
  }

  /*#of-designcase-2022*/
  .of-case-area4-2022 {
    padding: 0 0 50px;
  }

  .of-case-area4-2022 .case-textarea4-title-2022 {
    padding: 30px 0 0;
  }

  #of-design02-2022 .of-link-2022 {
    padding: 60px;
    margin: auto;
    display: block;
    position: relative;
    color: #164C6C;
    vertical-align: middle;
    text-decoration: none;
    transition: all .5s;
    width: 100%;
    border-left: 1px solid #164C6C;
    border-right: 1px solid #164C6C;
  }

  /*#of-design03-2022*/
  #of-design03-2022 .of-title34 {
    font-size: 21px;
    font-size: 2.1rem;
  }

  #of-design03-2022 .of-title24 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  #of-design03-2022 .head-txt {
    font-size: 12px;
    font-size: 1.2rem;
  }

  #of-design03-2022 .head-txt span {
    font-family: 'futura-pt', serif;
    font-size: 25px;
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
  }

  #of-design03-2022 .common-box {
    padding: 40px 20px;
    margin-bottom: 50px;
    background: #fff;
  }

  #of-design03-2022 .common-box .arrow-box-blue {
    margin: 80px 0 20px;
  }
}

@media (max-width:640px) {
  .of-design-wrapper-2022 .deco-txt-2022 {
    font-size: 24px;
    font-size: 2.4rem;
  }

  .of-design-wrapper-2022 h3 {
    font-size: 20px;
    font-size: 2.0rem;
  }

  .of-design-wrapper-2022 .common-area h4 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

/*---------------*/
/*--Office flow--*/
/*---------------*/
.of-flow-wrapper-2022 .flex-area-2022 {
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 100%;
}

.of-flowbox01-2022 {
  position: relative;
  padding-right: 0px;
  width: 100%;
}

.of-flowbox01-arrow-2022 {
  position: relative;
  z-index: 1;
  min-width: 20px;
  margin-top: -144px;
}

.of-flowbox01-arrow-2022::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%) rotate(90deg);
  border-right: 8px solid transparent;
  border-bottom: 10px solid #ECDBCC;
  border-left: 8px solid transparent;
}

.of-flowbox01-2022 img {
  width: 100%;
}

.of-flowbox01-2022 p {
  position: relative;
  width: 100%;
  font-size: 12px;
  font-size: 1.2rem;
  text-align: center;
  line-height: 180%;
  margin-top: 0px;
}

.of-flowbox01-2022 .of-flowbox01-title-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 150%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.of-flowbox01-2022 .of-flowbox01-title01-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 120%;
  min-height: 58px;
  margin-top: 10px;
}

.of-flowbox01-2022:last-child {
  padding-right: 0px;
}

.of-flowbox01-2022:last-child::before {
  content: '';
  border-right: 0px solid transparent;
  border-bottom: 0px solid #ECDBCC;
  border-left: 0px solid transparent;
}

.of-flow-box-2022 {
  position: relative;
  background-color: #fff;
  padding: 20px;
}

.of-flow-box-2022 .flex-area-2022 {
  padding: 30px 0;
}

.of-flow-box-2022 .flex-area-2022.border-bottom-2022 {
  border-top: 1px solid #989898;
}

.of-flow-box-2022 .left-box-2022 {
  position: relative;
  width: 30%;
  padding: 20px 40px;
}

.of-flow-box-2022 .left-box-2022::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #707070;
  width: 1px;
}

.of-flow-box-2022 .left-box-2022 img {
  display: block;
  width: 80%;
  text-align: center;
  padding: 0 15px;
  margin: 0 auto;
}

.of-flow-box-2022 h2 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 500;
  text-align: left;
  margin: 0 0 10px;
}

.of-flow-box-2022 .left-box-2022 h3 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 150%;
  text-align: center;
  margin: 0;
}

.of-flow-box-2022 .right-box-2022 {
  width: 70%;
  padding: 20px 40px;
}

.of-flow-box-2022 .right-box-2022 p {
  line-height: 180%;
  text-align: left;
}

.of-flow-box-2022 .right-box-2022 .arrow-box-white {
  position: relative;
  text-align: left;
  z-index: 10;
  margin: 20px 0 0;
  transition: all .5s;
}

.of-flow-box-2022 .right-box-2022 .arrow-box-white p {
  background-color: #fff;
  border: 1px solid #164C6C;
}

.of-flow-box-2022 .right-box-2022 .arrow-box-white p:hover {
  background-color: #164C6C;
}

.of-flow-arrowbox-2022 {
  position: relative;
  padding: 50px 0;
  text-align: center;
}

.of-flow-box-2022 .left-box-2022 .of-step-2022 {
  font-family: 'futura-pt', serif;
  font-weight: 500;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: 10px;
  color: #CCCBCB;
  text-align: center;
}

.of-flow-box-2022 .left-box-2022 .of-step-2022 span {
  font-size: 55px;
  font-size: 5.5rem;
  letter-spacing: 0px;
  color: #164C6C;
  vertical-align: middle;
  margin-left: 10px;
}

@media (max-width:1471px) {
  .of-flowbox01-arrow-2022 {
    margin-top: -165px;
  }
}

@media (max-width:1050px) {
  .of-flowbox01-arrow-2022 {
    margin-top: -203px;
  }
}

@media (max-width:1000px) {
  .of-flow-wrapper-2022 .flex-area-2022 {
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .of-flowbox01-2022 {
    position: relative;
    padding-right: 0px;
    width: 20%;
    margin-top: 15px;
    margin-bottom: 100px;
  }

  .of-flowbox01-2022 p {
    width: 100%;
    font-size: 12px;
    font-size: 1.2rem;
    text-align: center;
    line-height: 180%;
    margin: 0;
  }

  .of-flowbox01-2022 .of-flowbox01-title-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500;
    min-height: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }

  .of-flowbox01-2022 .of-flowbox01-title01-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 120%;
    min-height: initial;
    margin-top: 10px;
  }

  .of-flowbox01-arrow-2022 {
    position: relative;
    z-index: 1;
    min-width: 20px;
    height: 80px;
    margin: 6% 0 0;
  }
}

@media (max-width:992px) {
  .of-flow-box-2022 .left-box-2022 h3 {
    font-size: 17px;
    font-size: 1.7rem;
  }

  .of-flow-box-2022 .left-box-2022 .of-step-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: 6px;
  }

  .of-flow-box-2022 .left-box-2022 .of-step-2022 span {
    font-size: 40px;
    font-size: 4.0rem;
  }

  .of-flow-box-2022 .left-box-2022 {
    padding: 20px 30px 20px 15px;
  }

  .of-flow-box-2022 .right-box-2022 {
    width: 70%;
    padding: 20px 15px 20px 30px;
  }
}

@media (max-width:768px) {
  .of-flow-wrapper-2022 .flex-area-2022 {
    display: block;
  }

  .of-flowbox01-2022 {
    display: flex;
    align-items: center;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    width: 90%;
    padding: 20px 0;
  }

  .of-flowbox01-2022 img {
    width: 70%;
    max-width: 220px;
    padding-right: 15px;
  }

  .of-flowbox01-2022 p {
    position: relative;
    font-size: 14px;
    font-size: 1.4rem;
    text-align: left;
    margin-top: 10px;
  }

  .of-flowbox01-2022 .of-flowbox01-title-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    display: block;
    margin-top: 0px;
  }

  .of-flowbox01-2022 .of-flowbox01-title01-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 150%;
    min-height: initial;
    margin-top: 0px;
  }

  .of-flow-box-2022 .flex-area-2022 {
    padding: 20px 0;
  }

  .of-flowbox01-arrow-2022 {
    position: relative;
    z-index: 1;
    min-width: initial;
    height: auto;
    min-height: initial;
    width: 90%;
    margin: 40px auto;
    border-top: 1px solid #CBBFA9;
  }

  .of-flowbox01-arrow-2022::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 30px;
    height: 30px;
    border-right: 1px solid #CBBFA9;
    border-bottom: 1px solid #CBBFA9;
    border-left: none;
    background: transparent;
  }

  .of-flowbox01-arrow-2022::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 42px;
    height: 2px;
    background-color: #fff;
  }

  .of-flow-box-2022 .left-box-2022 {
    position: relative;
    width: 100%;
    padding: 0px 0 15px;
    text-align: center;
    margin: 0 auto;
  }

  .of-flow-box-2022 .left-box-2022::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #707070;
    width: 0px;
    height: 0px;
  }

  .of-flow-box-2022 .left-box-2022 img {
    display: block;
    width: 40%;
    text-align: center;
    padding: 0;
    margin: 0 auto;
  }

  .of-flow-box-2022 .left-box-2022 h3 {
    display: block;
    font-size: 18px;
    font-size: 1.8rem;
    width: 100%;
    margin: 15px 0 0;
  }

  .of-flow-box-2022 .right-box-2022 {
    width: 100%;
    padding: 0 5%;
  }

  .of-flow-box-2022 .right-box-2022 .arrow-box-white {
    text-align: center;
    z-index: 10;
    margin: 20px 0 0;
  }

  .of-flow-box-2022 .left-box-2022 .of-step-2022 {
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: 6px;
    margin-bottom: 10px;
  }

  .of-flow-box-2022 .left-box-2022 .of-step-2022 span {
    font-size: 40px;
    font-size: 4.0rem;
    vertical-align: text-bottom;
  }
}

@media (max-width:576px) {
  .of-flowbox01-2022 {
    margin-top: 0;
    width: 100%;
    padding: 0;
  }

  .of-flowbox01-2022 img {
    width: 100%;
    max-width: 150px;
    padding-right: 15px;
  }

  .of-flowbox01-2022 p {
    position: relative;
  }

  .of-flowbox01-arrow-2022 {
    width: 100%;
  }

  .of-flow-box-2022 .left-box-2022 img {
    width: 45%;
  }

  .of-flow-box-2022 .right-box-2022 {
    width: 100%;
    padding: 0px;
  }
}

/*----------------*/
/*--アニメーション--*/
/*----------------*/
.zoomin {
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  opacity: 0;
  transform: scale(1.2);
}

.zoomin.is-active {
  opacity: 1;
  transform: scale(1);
}

/*--------------*/
/*-上からスライド-*/
/*--------------*/

.topin {
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  opacity: 0;
  transform: translateY(-40px);
}

.topin.is-active {
  opacity: 1;
  transform: translateY(0);
}

/*--------------*/
/*-下からスライド-*/
/*--------------*/
.fadein {
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  opacity: 0;
  transform: translateY(40px)
}

.fadein.is-active {
  opacity: 1;
  transform: translateY(0);
}

/*--------------*/
/*-左からスライド-*/
/*--------------*/
.leftin {
  -webkit-transition: all .8s ease-out;
  -o-transition: all .8s ease-out;
  transition: all .8s ease-out;
  opacity: 0;
  transform: translateX(-50px);
}

.leftin.is-active {
  opacity: 1;
  transform: translateX(0);
}

/*--------------*/
/*-右からスライド-*/
/*-------------*/
.rightin {
  -webkit-transition: all .8s ease-out;
  -o-transition: all .8s ease-out;
  transition: all .8s ease-out;
  opacity: 0;
  transform: translateX(50px);
}

.rightin.is-active {
  opacity: 1;
  transform: translateX(0);
}

.delay-10 {
  transition-delay: .1s;
}

.delay-20 {
  transition-delay: .2s;
}

.delay-30 {
  transition-delay: .3s;
}

.delay-40 {
  transition-delay: .4s;
}

.delay-50 {
  transition-delay: .5s;
}

.delay-60 {
  transition-delay: .6s;
}

.delay-70 {
  transition-delay: .7s;
}

.delay-80 {
  transition-delay: .8s;
}

.delay-90 {
  transition-delay: .9s;
}

.delay-100 {
  transition-delay: 1s;
}

.delay-110 {
  transition-delay: 1.1s;
}

.delay-120 {
  transition-delay: 1.2s;
}

.delay-130 {
  transition-delay: 1.3s;
}

.delay-140 {
  transition-delay: 1.4s;
}

.delay-150 {
  transition-delay: 1.5s;
}

.delay-160 {
  transition-delay: 1.6s;
}

.delay-170 {
  transition-delay: 1.7s;
}

.delay-180 {
  transition-delay: 1.8s;
}

.delay-190 {
  transition-delay: 1.9s;
}

.delay-200 {
  transition-delay: 2s;
}

.delay-220 {
  transition-delay: 2.2s;
}

.delay-240 {
  transition-delay: 2.4s;
}

.delay-260 {
  transition-delay: 2.6s;
}

.delay-280 {
  transition-delay: 2.8s;
}

/*-----------------------*/
/* --Swiperカスタマイズ-- */
/*----------------------*/

/*swiper-projects-2022*/

.swiper-projects-2022 {
  position: relative;
  z-index: 0;
}

/*.swiper-projects-2022::before{
	content:'';
	position:absolute;
	top:0;
	right:100%;
	bottom:0;
	width:100%;
	z-index:10;
	background-color:#F1EBE6;
	transition: all .3s;
}
.swiper-projects-2022.change-bg::before{
	background-color:#E6DDC7;
	transition: all .3s;
}*/
.swiper-projects-2022 .swiper-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 63%;
  /*　トリミングしたい枠の高さ　*/
  z-index: 0;
}

.swiper-projects-2022 .swiper-inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  /* 画像の最大サイズは枠の1.5倍まで */
  max-width: 150%;
  max-height: 150%;
  object-fit: cover;
  z-index: 5;
}

.swiper-projects-2022 .swiper-button-next {
  width: 35px !important;
  top: -50px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

.swiper-projects-2022 .swiper-button-prev {
  width: 35px !important;
  top: -50px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:768px) {
  .swiper-projects-2022::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 0;
    z-index: 10;
    background-color: #F1EBE6;
    transition: all .3s;
  }

  .swiper-projects-2022 {
    padding: 0 15px !important;
  }

  .swiper-projects-2022 .swiper-inner {
    padding-top: 350px;
  }

  .swiper-projects-2022 .swiper-button-next {
    width: 30px !important;
    top: -30px !important;
    background-size: 30px;
  }

  .swiper-projects-2022 .swiper-button-prev {
    width: 30px !important;
    top: -30px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  .swiper-projects-2022 {
    padding: 0px !important;
  }

  .swiper-projects-2022 .swiper-inner {
    padding-top: 244px;
  }

  .swiper-projects-2022 .swiper-button-next {
    background-size: 30px;
  }

  .swiper-projects-2022 .swiper-button-prev {
    background-size: 30px;
  }
}

.swiper-offeice-projects.swiper-container {
  overflow: hidden !important;
}

.swiper-offeice-projects .swiper-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 60%;
  /*　トリミングしたい枠の高さ　*/
  z-index: 0;
}

.swiper-offeice-projects .swiper-inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
}

/* Video */
.Videosp {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  max-width: 800px;
}

.VideoWrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.VideoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}


/*2022-05追加02*/
/*page-フォント*/
.page-2022 {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  /*font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif!important;*/
  /*font-family: 'Bebas Neue', cursive;*/
  /*font-family: 'noto sans japanese',sans-serif;*/
  /*font-family: 'Noto Sans JP', sans-serif;*/
  /*font-weight:300;
    margin:0;
    padding:0;*/
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 1px;
  color: #164C6C;
}

.page-2022 p, .page-2022 a, .page-2022 span, .page-2022 table {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}

.page-2022 time, .page-2022 dt {
  font-family: 'futura-pt', sans-serif;
}

@media (max-width:768px) {
  .page-2022 p {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

/*ACF 画像*/
.acf-img-2022 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 60%;
}

.acf-img-2022 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  object-fit: cover;
}

.vertical-2022.acf-img-2022 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 140%;
}

.vertical-2022.acf-img-2022 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width:768px) {
  .vertical-2022.acf-img-2022 {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 110%;
  }
}

/*モーダル　vbox*/
.vbox-content {
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 20px 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.vbox-next, .vbox-prev {
  width: 35px !important;
  height: 35px !important;
}

.vbox-next span, .vbox-prev span {
  display: none !important;
}

.vbox-prev::before {
  content: '';
  background: url(../img/top/swipe-prev_wh.svg) no-repeat center / 35px;
  position: absolute;
  width: 35px !important;
  height: 35px !important;
  outline: none;
}

.vbox-next::before {
  content: '';
  background: url(../img/top/swipe-next_wh.svg) no-repeat center / 35px;
  position: absolute;
  width: 35px !important;
  height: 35px !important;
  outline: none;
}

@media (max-width:768px) {
  .vbox-content {
    padding: 20px 10%;
  }

  .vbox-next, .vbox-prev {
    width: 30px !important;
    height: 30px !important;
  }

  .vbox-prev::before {
    content: '';
    background: url(../img/top/swipe-prev_wh.svg) no-repeat center / 30px;
    width: 30px !important;
    height: 30px !important;
  }

  .vbox-next::before {
    content: '';
    background: url(../img/top/swipe-next_wh.svg) no-repeat center / 30px;
    width: 30px !important;
    height: 30px !important;
  }
}


/*下位ページ　bg*/
.bg-e5dd-2022 {
  background-color: #F1EBE6;
}

/*page-タイトル2022*/
.page-mv.page-mv2022 h1 {
  font-family: 'futura-pt', serif;
  font-size: 50px;
  font-size: 5.0rem;
  color: #fff;
  text-align: center;
}

.page-mv.page-mv2022 h1 span {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  margin: -5px 0 0;
  color: #fff;
  text-align: center;
}

.officegreen-2022 .page-mv.page-mv2022 h1 span {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  margin: 5px 0 0;
  color: #fff;
  text-align: center;
}

@media (max-width:768px) {
  .page-mv.page-mv2022 h1 {
    font-size: 35px;
    font-size: 3.5rem;
  }

  .page-mv.page-mv2022 h1 span {
    font-size: 15px;
    font-size: 1.5rem;
  }

  .officegreen-2022 .page-mv.page-mv2022 h1 span {
    margin: 0;
  }
}

@media (max-width:576px) {
  .page-mv.page-mv2022 h1 {
    font-size: 28px;
    font-size: 2.8rem;
  }

  .page-mv.page-mv2022 h1 span {
    line-height: 175%;
  }
}

/*products タイトル*/
.page-2022 .title01-2022, .main-2022 .title01-2022 {
  font-family: 'futura-pt', serif;
  font-size: 50px;
  font-size: 5.0rem;
  text-align: center;
}

.main-2022 .title01-2022 span {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  text-align: center;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  margin: 0px;
}

.page-2022 .title01news-2022 {
  margin-bottom: 0;
  text-align: center;
  font-size: 50px;
  font-size: 5.0rem;
  font-family: 'futura-pt', serif !important;
}

.page-2022 .subtitle01-2022, .main-2022 .subtitle01-2022 {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  text-align: center;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  margin: 0px 0 3%;
}

.page-2022.projects-2022 .subtitle01-2022 {
  text-align: center;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  margin: 5px 0 3%;
}

@media (max-width:768px) {
  .page-2022.title01-2022, .page-2022 .title01news-2022, .main-2022 .title01-2022 {
    font-size: 30px;
    font-size: 3.0rem;
  }

  .page-2022 .subtitle01-2022, .page-2022.projects-2022 .subtitle01-2022, .main-2022 .subtitle01-2022 {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

@media (max-width:576px) {
  .page-2022 .title01-2022, .page-2022 .title01news-2022, .main-2022 .title01-2022 {
    font-size: 30px;
    font-size: 3.0rem;
  }

  .page-2022 .subtitle01-2022, .page-2022.projects-2022 .subtitle01-2022, .main-2022 .subtitle01-2022 {
    line-height: 175%;
  }
}

.page-2022 .title-40-2022 {
  margin-bottom: 30px;
  font-size: 35px;
  font-size: 3.5rem;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  font-weight: 400;
}

@media (max-width:768px) {
  .page-2022 .title-40-2022 {
    font-size: 30px;
    font-size: 3.0rem;
  }
}

/*products*/
.page-2022 .productNavPc ul li a {
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
}

.product-info-box h2 {
  font-family: Montserrat, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  margin: 10px 0 5px;
  font-size: 14px;
  font-size: 1.4rem;
}

.oliverPageNav .wp-pagenavi a {
  font-family: 'futura-pt', serif;
}

.page-2022 .singleBtnWrap .btn-default img {
  margin-right: 8px;
  margin-left: 3px;
  vertical-align: baseline;
}

.singleBtnTxt {
  margin-bottom: 20px;
}

@media (max-width:768px) {
  .singleBtnTxt {
    margin-bottom: 10px;
    text-align: left !important;
  }
}


/*NEWS*/
.page-2022 .archive-pager a, .page-2022 .single-link a {
  font-family: 'futura-pt', serif;
}

.page-2022 .single-next a p {
  text-align: right;
}

.page-2022 .news-page-box .info-title a {
  font-size: 16px;
  font-size: 1.6rem
}

.page-2022 .news-box {
  margin-bottom: 40px;
  margin-right: 4.16667%;
  width: 45.83333%
}

#single-wrapper {
  word-break: break-all
}

#single-wrapper .info-title {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600
}

#single-content {
  margin-bottom: 120px
}

#single-content h2 {
  margin: 40px 0 30px;
  padding: 5px 10px;
  color: #fff;
  background: #000;
  font-size: 22px;
  font-size: 2.2rem
}

#single-content h3 {
  margin: 40px 0 30px;
  padding: 5px 10px;
  border-bottom: 1px solid #000;
  color: #000;
  font-size: 20px;
  font-size: 2rem
}

#single-content h4 {
  margin: 40px 0 30px;
  color: #000;
  font-size: 20px;
  font-size: 2rem
}

#single-content h5 {
  margin: 30px 0 20px;
  color: #000;
  font-size: 18px;
  font-size: 1.8rem
}

#single-content h6 {
  margin: 30px 0 20px;
  color: #000;
  font-size: 16px;
  font-size: 1.6rem
}

#single-content p {
  display: block;
  margin: 30px 0;
  line-height: 1.8;
  font-size: 16px;
  font-size: 1.6rem
}

.single-newspage .single-share-list {
  margin-bottom: 100px;
  text-align: center
}

.single-newspage .single-share-list dd, .single-share-list dt {
  display: inline-block;
  vertical-align: middle
}

.single-newspage .single-share-list dt {
  margin-right: 20px;
  font-size: 18px;
  font-size: 1.8rem
}

.single-newspage .single-share-list dd ul li {
  margin: 0 14px;
  display: inline-block;
  vertical-align: middle
}

.single-newspage .single-share-list dd ul li a {
  transition: all .5s ease,
}

.single-newspage .single-share-list dd ul li a img {
  height: 30px;
}

.single-newspage .single-share-list dd ul li a:hover {
  opacity: .6
}

@media only screen and (max-width:768px) {
  #single-content p {
    display: block;
    margin: 30px 0;
    line-height: 1.8;
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 300;
  }

  #single-content strong {
    font-weight: 600
  }

  #single-content em {
    font-style: italic
  }

  #single-content blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px
  }

  #single-content a {
    color: #000;
    text-decoration: underline
  }

  .page-2022 .news-page-box {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8
  }
}

@media only screen and (max-width:640px) {
  #single-content p {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 300;
  }

  .page-2022 .news-page-box .info-title a {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 300;
  }

  .page-2022 .news-box {
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8
  }

  .page-2022 .news-box:last-child {
    padding-bottom: 0;
    border-bottom: none
  }
}

/*scenes*/
.of-scenes .trailmade-title-box h2 {
  color: #ECDBCC;
}

.scenesTitle .scenesTitle-2022 {
  font-family: 'futura-pt', serif !important;
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: 500;
  color: #164C6C;
}

.scenes-title-2022 {
  font-family: 'futura-pt', serif;
  font-size: 23px !important;
  font-size: 2.3rem !important;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 30px;
}

.singleSceneHeader .pnkz-2022 {
  position: absolute;
  top: 0;
  left: 15px;
}

.singleSceneHeader .pnkz-2022 li {
  display: inline-block;
  white-space: nowrap
}

@media (max-width:768px) {
  .scenesTitle {
    margin: 0 0 10px;
  }

  .scenesTitle .scenesTitle-2022 {
    font-family: 'futura-pt', serif !important;
    font-size: 2.4rem;
    margin: 0;
  }
}

/*officegreen*/
@media (max-width:768px) {
  .page-2022.officegreen-2022 p {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

.page-2022 .of-line-title-2022 {
  position: relative;
  margin-bottom: 50px;
}

.page-2022 .of-line-title-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #484848;
}

.page-2022 .of-line-title-2022::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 2px;
  background-color: #484848;
}

.page-2022 .of-line-title-2022 h2 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  line-height: 150%;
  color: #164C6C;
  text-align: center;
  padding: 20px 0;
}

.page-2022 .of-line-title-2022 p {
  padding-top: 10px;
  line-height: 150%;
}

.page-2022 .of-line-title-2022 .modal-come {
  margin-top: -10px;
  padding: 0px 0 20px;
  font-weight: 400;
  text-align: center;
}

@media (max-width:768px) {
  .page-2022 .of-line-title-2022 {
    position: relative;
    margin-bottom: 10px;
  }

  .page-2022 .of-line-title-2022 h2 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 600;
    text-align: center;
    padding: 20px 0;
  }
}

.point-box.point-bg-2022 {
  background: #F1EBE6;
}

.point-box .point-boxh2-2022 {
  font-size: 50px;
  font-size: 5.0rem;
  font-family: 'futura-pt', sans-serif !important;
  text-align: center;
  position: relative;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.point-info h3 {
  text-align: left;
  margin-bottom: 15px;
  line-height: 1.4;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  transform: none;
}

@media (max-width:768px) {
  .point-box .point-boxh2-2022 {
    font-size: 45px;
    font-size: 4.5rem;
  }

  .point-info h3 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .point-info p {
    font-size: 15px;
    font-size: 1.5rem;
  }

  .green-bg p {
    margin-bottom: 30px;
    text-align: center;
    font-size: 15px;
    font-size: 1.5rem;
    color: #fff;
  }
}

@media (max-width:640px) {
  .point-box .point-boxh2-2022 {
    font-size: 45px;
    font-size: 4.5rem;
    line-height: 100%;
  }
}

/*ウッドテクスチャー*/
.page-2022 .green-column h3 {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #164C6C;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
}

.page-2022 .green-box figure figcaption span.caption-text {
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
}

.page-2022 .green-bg .green-bgtitle-2022 {
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 600;
  color: #fff;
}

@media (max-width:768px) {
  .page-2022 .green-column h3 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .page-2022 .green-box figure figcaption span.caption-text {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

@media (max-width:640px) {
  .page-2022 .green-box figure figcaption span.caption-text {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 175%;
  }

  .page-2022 .green-bg .green-bgtitle-2022 {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 600;
    color: #fff;
  }
}

@media (max-width:480px) {
  .page-2022 .green-bg .green-bgtitle-2022 {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 17px;
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
  }
}

/*arrow 2022 clear*/
.arrow-box-clear {
  position: relative;
  text-align: center;
  margin: 50px 0;
  transition: all .5s;
}

.single .arrow-box-clear {
  margin: 0px 0 0;
}

.arrow-box-clear p {
  position: relative;
  display: inline-block;
  background-color: transparent;
  border: 1px solid #fff;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  color: #fff;
  padding: 30px 80px 30px 25px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

@media (max-width:768px) {
  .arrow-box-clear p {
    padding: 20px 80px 20px 25px;
  }
}

.single .arrow-box-clear p {
  padding: 16px 80px 16px 25px;
  margin-bottom: 120px;
}

.arrow-box-clear p::before {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-box-clear p::after {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.arrow-box-clear:hover {
  text-align: center;
  transition: all .5s;
}

.arrow-box-clear p:hover {
  color: #fff;
  transition: all .5s;
}

.arrow-box-clear p:hover::before {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-box-clear p:hover::after {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

/*officetour*/
.page-2022 .office-box h4 {
  margin-bottom: 4%;
  font-size: 96px;
  font-size: 9.6rem;
  font-family: 'futura-pt', serif;
}

.page-2022 .office-box h4 span {
  margin-top: 5px;
  display: block;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  opacity: .6;
  font-weight: 600;
}

.page-2022 .office-data dt {
  margin-bottom: 2%;
  font-size: 22px;
  font-size: 2.2rem;
  font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif !important;
  ;
  line-height: 1.6;
  font-weight: 600;
}

@media only screen and (max-width: 768px) {
  .page-2022 .bg-ot01 .column-4 p {
    text-align: center;
    font-size: 15px;
    font-size: 1.5rem;
  }

  .page-2022 .office-box h4 {
    margin-bottom: 8%;
    font-size: 60px;
    font-size: 6rem;
  }
}

/*contact*/
.page-2022 .btn-form {
  font-family: 'Noto Sans JP', sans-serif !important;
}

/*contact download*/
#double-block {
  padding: 40px 0;
  background-color: #fff;
  position: relative;
  z-index: 10;
}

#double-block .flex-2022 {
  display: flex;
}

.left-contact-2022, .right-document-2022 {
  width: 50%;
}

.left-contact-2022 {
  padding-right: 20px;
}

.right-document-2022 {
  padding-left: 20px;
}

.left-contact-2022 .common-box, .right-document-2022 .common-box {
  padding: 60px;
  display: block;
  position: relative;
  background-color: #164C6C;
  color: #fff;
  text-decoration: none;
  transition: all .5s;
}

.left-contact-2022 .common-box:hover, .right-document-2022 .common-box:hover {
  /* opacity: .8; */
  transition: all .5s;
}

.left-contact-2022 .common-box .top-title-box .top-title-2022, .right-document-2022 .common-box .top-title-box .top-title-2022 {
  font-family: 'futura-pt', serif;
  color: #fff;
  text-align: left;
  font-size: 40px !important;
  font-size: 4.0rem !important;
}

.left-contact-2022 .common-box .top-title-box .top-title-ja, .right-document-2022 .common-box .top-title-box .top-title-ja {
  font-size: 14px;
  font-size: 1.4rem;
  color: #fff;
  text-align: left;
  margin: 5px 0 0;
}

.left-contact-2022 .common-box .top-title-box .top-sub-title, .right-document-2022 .common-box .top-title-box .top-sub-title {
  font-size: 16px;
  font-size: 1.6rem;
  color: #fff;
  text-align: left;
}

#left-contact-2022 .common-box .top-title-box p.top-title-2022, #right-document-2022 .common-box .top-title-box p.top-title-2022 {
  font-size: 13px;
  font-size: 1.3rem;
  color: #fff;
  text-align: left;
  line-height: 100%;
  margin: 0px 0 0px !important;
}

.left-contact-2022 .common-box .top-title-box p.top-sub-title, .right-document-2022 .common-box .top-title-box p.top-sub-title {
  margin: 25px 0 0px !important;
}

.left-contact-2022 .common-box::before, .right-document-2022 .common-box::before {
  position: absolute;
  top: 50%;
  right: 50px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 60px;
  height: 2px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.left-contact-2022 .common-box::after, .right-document-2022 .common-box::after {
  position: absolute;
  top: 50%;
  right: 52px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.left-contact-2022 .common-box:hover::before, .right-document-2022 .common-box:hover::before {
  right: 30px;
  width: 80px;
  transition: all .5s;
}

.left-contact-2022 .common-box:hover::after, .right-document-2022 .common-box:hover::after {
  right: 32px;
  width: 20px;
  height: 20px;
  transition: all .5s;
}

@media (max-width: 992px) {
  #double-block .flex-2022 {
    display: block;
  }

  .left-contact-2022, .right-document-2022 {
    width: 100%;
  }

  .left-contact-2022 {
    padding: 10px 0;
  }

  .right-document-2022 {
    padding: 10px 0;
  }

  .left-contact-2022 .common-box::before, .right-document-2022 .common-box::before {
    position: absolute;
    top: 50%;
    left: 70%;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 150px;
    height: 2px;
    background: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .5s;
  }

  .left-contact-2022 .common-box::after, .right-document-2022 .common-box::after {
    position: absolute;
    top: 50%;
    left: calc(70% + 126px);
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    transition: all .5s;
  }

  .left-contact-2022 .common-box:hover::before, .right-document-2022 .common-box:hover::before {
    position: absolute;
    top: 50%;
    left: 70%;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 180px;
    transition: all .5s;
  }

  .left-contact-2022 .common-box:hover::after, .right-document-2022 .common-box:hover::after {
    position: absolute;
    top: 50%;
    left: calc(70% + 156px);
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 20px;
    height: 20px;
    transition: all .5s;
  }
}

@media (max-width: 768px) {
  .left-contact-2022 .top-sub-title, .right-document-2022 .top-sub-title {
    margin: 35px 0 0;
  }

  .left-contact-2022 .common-box, .right-document-2022 .common-box {
    padding: 45px 40px 45px;
  }

  .left-contact-2022 .common-box .top-title-box .top-sub-title, .right-document-2022 .common-box .top-title-box .top-sub-title {
    text-align: left;
    margin: 25px 0 25px !important;
  }

  .left-contact-2022 .common-box::before, .right-document-2022 .common-box::before {
    position: absolute;
    top: 50%;
    right: 50px;
    left: auto;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 70px;
    height: 1px;
    background: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .5s;
  }

  .left-contact-2022 .common-box::after, .right-document-2022 .common-box::after {
    position: absolute;
    top: 50%;
    right: 50px;
    left: auto;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    transition: all .5s;
  }

  .left-contact-2022 .common-box:hover::before, .right-document-2022 .common-box:hover::before {
    position: absolute;
    top: 50%;
    right: 30px;
    left: auto;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 90px;
    height: 1px;
    background: #fff;
    transition: all .5s;
  }

  .left-contact-2022 .common-box:hover::after, .right-document-2022 .common-box:hover::after {
    position: absolute;
    top: 50%;
    right: 30px;
    left: auto;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 15px;
    height: 15px;
    transition: all .5s;
  }

  .left-contact-2022 .common-box .top-title-box p, .right-document-2022 .common-box .top-title-box p {
    font-size: 12px;
    font-size: 1.2rem;
    color: #fff;
    text-align: left;
    margin-top: -5px;
  }

  .left-contact-2022 .common-box .top-title-box p.top-title-2022, .right-document-2022 .common-box .top-title-box p.top-title-2022 {
    font-size: 30px !important;
    font-size: 3.0rem !important;
  }
}


/*コンタクトページ*/
.mv-contact-2022 {
  padding: 100px 0 150px;
}

.form-step-2022 {
  text-align: center;
  margin-bottom: 0;
}

/* CONCEPT ページ*/
#con-main-2022 {
  text-align: left;
  position: relative;
  z-index: 10;
  background-color: #fff;
}

#con-main-2022 .common-box-2022 {
  max-width: 80%;
  margin: 0 auto;
}

.con-main-img01-2022 {
  margin-top: 20px;
  margin-bottom: 50px;
}

.con-main-img01-2022 img {
  max-width: 350px;
}

.con-main-img02-2022 {
  margin-top: 80px;
  margin-bottom: 20px;
}

.con-main-img02-2022 img {
  max-width: 250px;
}

.con-main-title-2022 {
  font-family: 'futura-pt', serif;
  font-size: 75px;
  font-size: 7.5rem;
  letter-spacing: 2px;
  line-height: 125%;
  color: #ECDBCC;
  word-break: break-all;
}

.con-second-title-2022 {
  font-size: 34px;
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 200%;
  margin-top: 20px;
  word-break: break-all;
}

.con-main-txt-2022 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 300%;
  margin: 0px;
}

.con-main-txt02-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 250%;
  margin: 30px 0;
}

.col-tb-2022 {
  margin-top: 0;
  margin-bottom: 0;
}

.m-lr-auto-2022 {
  margin: 0 auto;
}

@media (max-width:1200px) {
  #con-main-2022 .common-box-2022 {
    max-width: 100%;
    margin: 0 auto;
  }
}

@media (max-width:768px) {
  .mv-contact-2022 {
    padding: 80px 0 100px;
  }

  .con-main-img01-2022 {
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .con-main-img01-2022 img {
    max-width: 300px;
  }

  .con-main-img02-2022 {
    margin-top: 40px;
    margin-bottom: 80px;
  }

  .con-main-img02-2022 img {
    max-width: 200px;
  }

  .con-main-title-2022 {
    font-size: 40px;
    font-size: 4.0rem;
    letter-spacing: 2px;
    line-height: 120%;
  }

  .con-second-title-2022 {
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 150%;
    margin-top: 20px;
  }

  .con-main-txt-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 220%;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .con-main-txt02-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 200%;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .col-tb-2022 {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

@media (max-width:576px) {
  .col-tb-2022 {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

/* concept */
.concept-page .mv-topmenu-2022 {
  margin: 50px 0 120px;
  position: relative;
}

.con-lead-sub {
  font-family: 'century-gothic', serif !important;
  color: #164C6C;
  font-size: 20px;
  font-size: 2.0rem;
  margin: 0 0 20px;
  font-weight: bold;
}

.con-lead-logo {
  width: 233px;
}

.con-lead-ttl {
  font-size: 42px;
  font-size: 4.2rem;
  line-height: 2;
  font-weight: bold;
  margin: 80px 0 30px;
}

.con-lead-txt {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 500;
  margin: 0 0 20px;
}

.con-lead-img {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.con-lead-img img {
  width: 100%;
}

.con-lead-img .img1 {
  width: 30%;
}

.con-detail {
  display: flex;
  align-items: center;
  margin-top: 150px;
}

.con-detail-lead {
  display: flex;
  align-items: center;
  margin-top: 40vh;
}

.con-detail-lead-circle {
  width: calc(100% - 500px);
  padding: 150px 50px 0 0;
}

.con-detail-lead-txt {
  max-width: 500px;
}

.con-detail-lead-txt-ttl {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
}

.con-detail-lead-txt-txt {
  font-size: 16px;
  font-size: 1.6rem;
  margin: 20px 0 0;
}

.con-img {
  width: 100%;
}

.con-img img {
  width: 100%;
}

.con-detail:nth-child(5n) {
  margin: 150px 0;
}

.con-detail:nth-child(3n),
.con-detail:nth-child(5n) {
  flex-direction: row-reverse;
}

.con-detail+.youtube-2022-outer {
  padding-bottom: 150px;
}

.con-detail-txt {
  max-width: 365px;
  width: 100%;
}

.con-detail-txt-ttl {
  font-family: 'Trailmade', serif;
  font-size: 48px;
  font-size: 4.8rem;
  color: #164C6C;
  margin: 0 0 50px;
}

.con-detail-txt-ttl span {
  font-family: 'century-gothic', serif;
  font-size: 54px;
  font-size: 5.4rem;
}

.con-detail-txt-subttl {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
  color: #164C6C;
  margin: 0 0 20px;
  position: relative;
}

.con-detail-txt-subttl:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  background: #164C6C;
  transform: rotate(-45deg);
  top: -30px;
}

.con-detail-txt-txt {
  font-size: 16px;
  font-size: 1.6rem;
  margin: 0 0 20px;
  color: #333333;
  line-height: 1.8;
}

.con-detail-txt-img {
  margin: 50px 0 0;
}

.con-detail-txt-link {
  color: #164C6C;
  font-size: 16px;
  font-size: 1.6rem;
  text-decoration: underline;
  font-weight: 500;
  display: inline-block;
  position: relative;
  transition: 0.4s;
}

.con-detail-txt-link:before {
  width: 20px;
  height: 1px;
  background: #164C6C;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  transition: 0.4s;

}

.con-detail-txt-link:after {
  width: 8px;
  height: 8px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  transition: 0.4s;

}

.con-detail-txt-link:hover:before,
.con-detail-txt-link:hover:after {
  right: -40px;
}

.con-detail-img {
  margin-right: calc(50% - 50vw);
  margin-left: 80px;
}

.con-detail:nth-child(3n) .con-detail-img,
.con-detail:nth-child(5n) .con-detail-img {
  margin-left: calc(50% - 50vw);
  margin-right: 80px;
}

.con-detail .row {
  align-items: center;
  justify-content: space-between;
  margin-right: calc(50% - 50vw);
}

.con-detail .col-md-4 {
  max-width: 540px;
  flex: 0 0 41.333%;
  padding: 0 0 0 40px;
}

.con-title-2022 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 120%;
  word-break: break-all;
}

.con-title-2022 span {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 150%;
}

.con-txt-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 175%;
  margin-top: 30px;
  margin-bottom: 0px;
  text-align: left;
}

#con-03c-2103 .arrow-box-blue, #con-06c-2103 .arrow-box-blue {
  text-align: left;
}

@media (max-width:992px) {
  .concept-lead {
    padding-bottom: 0;
  }

  .con-lead {
    margin-top: 80px;
  }

  .con-lead-img {
    display: block;
    margin: 50px 20px 0;
  }

  .con-lead-img .img1 {
    width: 70%;
  }

  .con-lead-img img {
    margin-bottom: 80px;
  }

  .con-lead-ttl {
    margin: 40px 0 30px;
  }

  .con-detail {
    display: block;
    margin-top: 100px;
  }

  .con-detail:nth-child(5n) {
    margin: 80px 0 0;
  }

  .con-detail-txt {
    max-width: unset;
  }

  .con-detail-txt-ttl {
    margin: 0 0 10px;
    text-align: center;
    font-size: 9rem;
  }

  .con-detail-txt-ttl span {
    font-size: 10rem;
  }

  .con-detail-lead-txt-txt {
    margin-top: 30px;
  }

  .con-detail-txt-subttl {
    text-align: center;
  }

  .con-detail-txt-subttl:before {
    content: none;
  }

  .con-detail-txt-img {
    margin: 20px auto 30px;
    text-align: center;
    width: 70%;
  }

  .con-detail-txt-img img {
    width: 100%;
  }

  .con-detail-img {
    margin: 60px 0 0;
  }

  .con-detail:nth-child(3n) .con-detail-img, .con-detail:nth-child(5n) .con-detail-img {
    margin: 0;
  }

  .con-detail+.youtube-2022-outer {
    margin-top: 100px;
    padding-bottom: 100px;
  }

  .con-detail-lead {
    display: block;
  }

  .con-detail-lead-circle {
    width: 80%;
    padding: 50px 0 0;
    margin: 0 auto;
  }

  .con-detail-lead-txt {
    max-width: unset;
  }

  .con-detail-lead-txt-ttl {
    padding: 80px 0 0;
    text-align: center;
  }

  .con-title-2022 {
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 125%;
    opacity: 0.5;
  }

  .con-title-2022 span {
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 150%;
    opacity: 0.8;
  }

  .con-txt-2022 {
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 200%;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: left;
  }

  #con-03c-2103 .arrow-box-blue {
    text-align: center;
  }
}



@media (max-width:768px) {
  .concept-lead {
    padding-bottom: 0;
  }

  .con-lead {
    margin-top: 80px;
  }

  .con-lead-img {
    display: block;
    margin: 50px 20px 0;
  }

  .con-lead-img img {
    margin-bottom: 40px;
  }

  .con-lead-ttl {
    margin: 40px 0 30px;
    font-size: 2.0rem !important;
  }

  .con-detail {
    display: block;
    margin-top: 80px;
  }

  .con-detail:nth-child(5n) {
    margin: 80px 0 0;
  }

  .con-detail-txt-ttl {
    font-size: 5.6rem;
    margin: 0 0 10px;
    text-align: center;
  }

  .con-detail-txt-ttl span {
    font-size: 6.0rem;
  }

  .con-detail-txt-subttl {
    text-align: center;
  }

  .con-detail-txt-subttl:before {
    content: none;
  }

  .con-detail-txt-img {
    margin: 20px auto 30px;
    text-align: center;
    width: 80%;
  }

  .con-detail-img {
    margin: 30px 0 0;
  }

  .con-detail:nth-child(3n) .con-detail-img, .con-detail:nth-child(5n) .con-detail-img {
    margin: 0;
  }

  .con-detail+.youtube-2022-outer {
    padding-bottom: 80px;
  }

  .con-detail-lead {
    display: block;
    margin-top: 15vh;
  }

  .con-detail-lead-circle {
    width: 80%;
    padding: 20px 0 0;
    margin: 0 auto;
  }

  .con-detail-lead-txt-ttl {
    padding: 40px 0 0;
  }

  .change-bg-tra #concept-parallax .parallax-2022 {
    background: url(../img/concept/concept_bg_sp.jpg)no-repeat center center/cover;
  }

  .con-title-2022 {
    font-size: 35px;
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 125%;
    opacity: 0.5;
  }

  .con-title-2022 span {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 150%;
    opacity: 0.8;
  }

  .con-txt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 200%;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: left;
  }

  #con-03c-2103 .arrow-box-blue {
    text-align: center;
  }
}

#con-safety-2022 {
  text-align: center;
}

.safe-second-title-2022 {
  font-size: 34px;
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 200%;
  margin-top: 20px;
  position: relative;
  z-index: 15;
}

.safe-txt-2022 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 250%;
  margin-top: 30px;
  margin-bottom: 0px;
  text-align: center;
  position: relative;
  z-index: 15;
}

.safe-txt-2022 br {
  display: block;
}

@media (max-width:768px) {
  .safe-main-title-2022 {
    font-size: 40px;
    font-size: 4.0rem;
    letter-spacing: 2px;
    line-height: 120%;
  }

  .safe-second-title-2022 {
    font-size: 25px;
    font-size: 2.5rem;
    line-height: 150%;
    margin-top: 20px;
    text-align: left;
  }

  .safe-txt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 200%;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
  }

  .safe-txt-2022 br {
    display: none;
  }
}

.safe-block-2022 {
  margin-bottom: 100px;
  position: relative;
  z-index: 20;
}

.safe-tec-cover2022 {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 6;
  background: #E6DDC7;
  width: 100%;
  height: 20%;
}

.safe-tec-z2022 {
  position: relative;
  z-index: 10;
}

/*safe PCデザイン*/
.safe-bg01-sp-2022 {
  background: url(../img/concept/10c_sp-2103.svg) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 460%;
  position: relative;
  margin-top: 100px;
  margin-bottom: 50px;
}

.safe-box01-2022 {
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.safe-box01-2022 .row, .safe-box02-2022 .row, .safe-box03-2022 .row {
  align-items: center;
  position: relative;
  z-index: 10;
}

.safe-box01-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  border: solid 2px #ECDBCC;
  border-radius: 150px 0 0 150px;
  border-right: 0;
  z-index: 0;
}

.safe-box02-2022 {
  position: relative;
  width: 100%;
  padding: 50px 0;
  margin-top: -2px;
}

.safe-box02-2022::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  border-top: solid 2px #ECDBCC;
  border-right: solid 2px #ECDBCC;
  border-bottom: solid 2px #ECDBCC;
  border-radius: 0 150px 150px 0;
  border-left: 0;
  z-index: 0;
}

.safe-box03-2022 {
  position: relative;
  width: 100%;
  padding: 20px 0;
  margin-top: -2px;
}

.safe-box03-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80%;
  border-top: solid 2px #ECDBCC;
  border-left: solid 2px #ECDBCC;
  border-radius: 150px 0 0 0;
  border-bottom: 0;
  z-index: 0;
}

.bgflex-2022 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  /*中央揃え*/
}

.safe-bg01-title-2022 {
  font-size: 65px;
  font-size: 6.5rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 150%;
  margin-bottom: 0px;
  opacity: 0.5;
  position: relative;
  z-index: 10;
}

.safe-bg01-sub-2022 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 2px;
  margin-left: 5px;
  margin-bottom: 0px;
  color: #ECDBCC;
  position: relative;
  z-index: 10;
}

.safe-num-2022 {
  font-family: 'futura-pt', serif !important;
  font-size: 45px;
  font-size: 4.5rem;
  vertical-align: middle;
  padding-right: 5px;
  color: #ECDBCC;
}

.safe-bg01-txt-2022 {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 200%;
  margin-bottom: 0px;
  position: relative;
  z-index: 10;
}

.bg01-txt-2022 {
  margin-top: 20px;
}

.safe-Lbox-2022 {
  padding-right: 20px;
}

.safe-Rbox-2022 {
  padding-left: 20px;
}

.safe-img01-2022 {
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
  top: 50px;
}

.safe-img01-2022 img {
  max-width: 220px;
}

.safe-img02-2022 {
  margin-left: 0px;
  margin-right: 20px;
  margin-top: -10px;
}

.safe-img02-2022 img {
  max-width: 350px;
}

.safe-img03-2022 {
  margin-left: 20px;
  margin-top: 70px;
}

.safe-img03-2022 img {
  max-width: 100%;
}

@media (max-width:992px) {
  .safe-box01-2022 {
    position: relative;
    width: 100%;
    padding: 30px 0;
  }

  .safe-box02-2022 {
    position: relative;
    width: 100%;
    padding: 30px 0;
    margin-top: -2px;
  }

  .safe-box03-2022 {
    position: relative;
    width: 100%;
    padding: 30px 0;
    margin-top: -2px;
  }

  .safe-img01-2022 {
    margin-left: 20px;
    margin-top: -40px;
    margin-bottom: 40px;
  }
}

@media (max-width:840px) {
  .bg01-txt-2022 {
    margin-top: 10px;
  }
}

@media (max-width:768px) {
  .bgflex-2022 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }

  .safe-num-2022 {
    font-family: 'futura-pt', serif !important;
    font-size: 35px;
    font-size: 3.5rem;
    vertical-align: middle;
    padding-right: 5px;
    color: #ECDBCC;
  }
}

@media (max-width:576px) {
  .bgflex-2022 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}

/*safe SPデザイン*/
.safe-box01sp-2022 {
  margin-top: 18%;
  width: 100%;
  position: absolute;
  top: 0;
}

.safe-box02sp-2022 {
  margin-top: 170%;
  width: 100%;
  position: absolute;
  top: 0;
}

.safe-box03sp-2022 {
  margin-top: 320%;
  width: 100%;
  position: absolute;
  top: 0px;
}

.safe-spbox-2022 {
  padding-right: 30px;
  padding-left: 30px;
}

.safe-bg01sp-sub-2022 {
  font-size: 25px;
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 2px;
  margin-left: 15px;
  max-width: 500px;
  color: #ECDBCC;
  text-align: left;
}

.safe-bg01sp-txt-2022 {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 200%;
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
}

.safe-img01sp-2022 {
  margin-left: 0px;
  margin-top: 50px;
}

.safe-img01sp-2022 img {
  max-width: 50%;
}

.safe-img02sp-2022 {
  margin-top: 50px;
}

.safe-img02sp-2022 img {
  max-width: 70%;
}

.safe-img03sp-2022 {
  margin-left: 0px;
  margin-top: 70px;
}

.safe-img03sp-2022 img {
  max-width: 70%;
}

@media (max-width:576px) {
  .safe-box01sp-2022 {
    margin-top: 15%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .safe-box02sp-2022 {
    margin-top: 170%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .safe-box03sp-2022 {
    margin-top: 320%;
    width: 100%;
    position: absolute;
    top: 0px;
  }

  .safe-bg01sp-sub-2022 {
    font-size: 20px;
    font-size: 2.0rem;
    margin-top: 15px;
    margin-bottom: 15px;
    max-width: 370px;
  }

  .safe-bg01sp-txt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
  }

  .safe-img01sp-2022 {
    margin-left: 0px;
    margin-top: 20px;
  }

  .safe-img01sp-2022 img {
    max-width: 50%;
  }

  .safe-img02sp-2022 {
    margin-top: 20px;
  }

  .safe-img02sp-2022 img {
    max-width: 60%;
  }

  .safe-img03sp-2022 {
    margin-left: 0px;
    margin-top: 20px;
  }

  .safe-img03sp-2022 img {
    max-width: 70%;
  }
}

@media (max-width:390px) {
  .safe-box01sp-2022 {
    margin-top: 10%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .safe-box02sp-2022 {
    margin-top: 170%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .safe-box03sp-2022 {
    margin-top: 320%;
    width: 100%;
    position: absolute;
    top: 0px;
  }

  .safe-bg01sp-sub-2022 {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 10px;
    max-width: 370px;
  }

  .safe-bg01sp-txt-2022 {
    line-height: 175%;
  }

  .safe-img01sp-2022 {
    margin-left: 0px;
    margin-top: 20px;
  }

  .safe-img01sp-2022 img {
    max-width: 40%;
  }

  .safe-img02sp-2022 {
    margin-top: 20px;
  }

  .safe-img02sp-2022 img {
    max-width: 40%;
  }

  .safe-img03sp-2022 {
    margin-left: 0px;
    margin-top: 20px;
  }

  .safe-img03sp-2022 img {
    max-width: 50%;
  }
}

@media (max-width:360px) {
  .safe-box01sp-2022 {
    margin-top: 10%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .safe-box02sp-2022 {
    margin-top: 160%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .safe-box03sp-2022 {
    margin-top: 320%;
    width: 100%;
    position: absolute;
    top: 0px;
  }

  .safe-bg01sp-sub-2022 {
    font-size: 16px;
  }

  .safe-bg01sp-txt-2022 {
    line-height: 150%;
  }
}


/*TEC PCデザイン*/
#con-tec-2022 {
  text-align: center
}

.tec-bg01-2022 {
  background: url(../img/concept/12c-2103.svg) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 80%;
  position: relative;
  margin-bottom: 50px;
}

.tec-bg01-sp-2022 {
  background: url(../img/concept/11c_sp-2103.svg) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 285%;
  position: relative;
}

.tecbgflex-2022 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  /*中央揃え*/
}

@media (max-width:768px) {
  .tecbgflex-2022 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
}

@media (max-width:576px) {
  .tecbgflex-2022 {
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}

.tec-bg01-sub-2022 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 300;
  letter-spacing: 2px;
  margin-left: 15px;
  margin-bottom: 0px;
  color: #ECDBCC;
  position: relative;
  z-index: 15;
}

.tec-num-2022 {
  font-family: 'futura-pt', serif !important;
  font-size: 45px;
  font-size: 4.5rem;
  vertical-align: middle;
  padding-right: 5px;
  color: #ECDBCC;
}

.tec-bg01-txt-2022 {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 200%;
  position: relative;
  z-index: 15;
}

/*.tec-box01-2022{
  margin-top: 6%;
  width: 100%;
  position: absolute;
  top: 0px;
}

.tec-box02-2022{
  margin-top: 43%;
  width: 100%;
  position: absolute;
  top: 0;
}
*/
.tec-box01-2022 {
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.tec-box01-2022 .row, .tec-box02-2022 .row {
  align-items: center;
  position: relative;
  z-index: 10;
}

.tec-box01-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  border-top: solid 2px #ECDBCC;
  border-left: solid 2px #ECDBCC;
  border-bottom: solid 2px #ECDBCC;
  border-radius: 150px 0 0 150px;
  border-right: 0;
  z-index: 0;
}

.tec-box02-2022 {
  position: relative;
  width: 100%;
  padding: 20px 0;
  margin-top: -2px;
}

.tec-box02-2022::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  border-top: solid 2px #ECDBCC;
  border-right: solid 2px #ECDBCC;
  border-bottom: solid 2px #ECDBCC;
  border-radius: 0 150px 150px 0;
  border-left: 0;
  z-index: 0;
}

.tec-box02-2022::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  border-bottom: solid 2px #ECDBCC;
  z-index: 0;
}

.tec-bgmr-2022 {
  margin-top: 13%;
}

.tec-img01-2022 {
  margin-left: 20px;
  margin-top: 0px;
}

.tec-img01-2022 img {
  max-width: 80%;
}

.tec-img02-2022 {
  margin-left: 30px;
  margin-right: 20px;
  margin-top: 20px;
}

.tec-img02-2022 img {
  max-width: 100%;
}

@media (max-width:992px) {
  .tec-box01-2022 {
    position: relative;
    width: 100%;
    padding: 30px 0;
  }

  .tec-box02-2022 {
    position: relative;
    width: 100%;
    padding: 30px 0;
    margin-top: -2px;
  }
}

@media (max-width:768px) {
  .tec-num-2022 {
    font-family: 'futura-pt', serif !important;
    font-size: 35px;
    font-size: 3.5rem;
    vertical-align: middle;
    padding-right: 5px;
    color: #ECDBCC;
  }
}

/*TEC SPデザイン*/
.tec-box01sp-2022 {
  margin-top: 20%;
  width: 100%;
  position: absolute;
  top: 0px;
}

.tec-box02sp-2022 {
  margin-top: 155%;
  width: 100%;
  position: absolute;
  top: 0;
}

.tec-spbox-2022 {
  padding-right: 30px;
  padding-left: 30px;
}

.tec-bg01sp-sub-2022 {
  font-size: 25px;
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 2px;
  margin-left: 10px;
  color: #ECDBCC;
  text-align: left;
}

.tec-bg01sp-txt-2022 {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 200%;
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
}

.tec-img01sp-2022 {
  margin-top: 50px;
}

.tec-img01sp-2022 img {
  max-width: 80%;
}

.tec-img02sp-2022 {
  margin-top: 50px;
}

.tec-img02sp-2022 img {
  max-width: 70%;
}

@media (max-width:576px) {
  .tec-bg01-sp-2022 {
    background: url(../img/concept/11c_sp-2103.svg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 0;
    padding-top: 270%;
    position: relative;
  }

  .tec-box01sp-2022 {
    margin-top: 20%;
  }

  .tec-box02sp-2022 {
    margin-top: 145%;
  }

  .tec-spbox-2022 {
    padding-right: 40px;
    padding-left: 40px;
  }

  .tec-bg01sp-sub-2022 {
    font-size: 22px;
    font-size: 2.2rem;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .tec-bg01sp-txt-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 370px;
    margin-right: auto;
    margin-left: auto;
  }

  .tec-img01sp-2022 {
    margin-left: 0px;
    margin-top: 20px;
  }

  .tec-img01sp-2022 img {
    max-width: 80%;
  }

  .tec-img02sp-2022 {
    margin-top: 20px;
  }

  .tec-img02sp-2022 img {
    max-width: 60%;
  }
}

@media (max-width:480px) {
  .tec-bg01-sp-2022 {
    background: url(../img/concept/11c_sp-2103.svg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 0;
    padding-top: 270%;
    position: relative;
  }

  .tec-box01sp-2022 {
    margin-top: 10%;
  }

  .tec-box02sp-2022 {
    margin-top: 130%;
  }

  .tec-spbox-2022 {
    padding-right: 40px;
    padding-left: 40px;
  }

  .tec-bg01sp-sub-2022 {
    font-size: 21px;
    font-size: 2.1rem;
    margin-top: 15px;
    margin-bottom: 10px;
    max-width: 370px;
  }

  .tec-bg01sp-txt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
    max-width: 370px;
    margin-right: auto;
    margin-left: auto;
  }

  .tec-img01sp-2022 {
    margin-left: 0px;
    margin-top: 20px;
  }

  .tec-img01sp-2022 img {
    max-width: 70%;
  }

  .tec-img02sp-2022 {
    margin-top: 20px;
  }

  .tec-img02sp-2022 img {
    max-width: 50%;
  }
}

@media (max-width:428px) {
  .tec-bg01-sp-2022 {
    background: url(../img/concept/11c_sp-2103.svg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 0;
    padding-top: 288%;
    position: relative;
  }

  .tec-box01sp-2022 {
    margin-top: 7%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .tec-box02sp-2022 {
    margin-top: 140%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .tec-spbox-2022 {
    padding-right: 40px;
    padding-left: 40px;
  }

  .tec-bg01sp-sub-2022 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .tec-bg01sp-txt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 175%;
  }

  .tec-img01sp-2022 {
    margin-left: 0px;
    margin-top: 10px;
  }

  .tec-img01sp-2022 img {
    max-width: 80%;
  }

  .tec-img02sp-2022 {
    margin-top: 10px;
  }

  .tec-img02sp-2022 img {
    max-width: 60%;
  }
}

@media (max-width:360px) {
  .tec-box01sp-2022 {
    margin-top: 5%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .tec-box02sp-2022 {
    margin-top: 135%;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .tec-spbox-2022 {
    padding-right: 40px;
    padding-left: 40px;
  }

  .tec-bg01sp-sub-2022 {
    font-size: 16px;
    font-size: 1.6rem;
  }

  .tec-bg01sp-txt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 150%;
  }

  .tec-img01sp-2022 {
    margin-left: 0px;
    margin-top: 10px;
  }

  .tec-img01sp-2022 img {
    max-width: 70%;
  }

  .tec-img02sp-2022 {
    margin-top: 10px;
  }

  .tec-img02sp-2022 img {
    max-width: 50%;
  }
}


/*Q&Aページ*/
.mv-qa-2022 {
  position: relative;
  padding: 100px 0 60px;
}

.mv-qa-2022 h1 {
  font-family: 'futura-pt', serif;
  text-align: center;
  margin-top: 0px;
}

.mv-qa-2022 p {
  text-align: center;
  margin-top: 5px;
}

.mv-qa-2022 .flex-2022 {
  margin: 100px auto;
  max-width: 1200px;
  justify-content: space-between;
}

.mv-qa-2022 .flex-2022 a {
  position: relative;
  width: 31%;
  font-weight: 400;
  color: #164C6C;
  line-height: 150%;
  text-align: center;
  background-color: #F1EBE6;
  padding: 20px 0 50px 0;
}

.mv-qa-2022 .flex-2022 a::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%)rotate(45deg);
  -ms-transform: translateX(-50%)rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #164C6C;
  border-right: 3px solid #164C6C;
  transition: all .5s;
}

.mv-qa-2022 .flex-2022 a:hover::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%)rotate(45deg);
  -ms-transform: translateX(-50%)rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #164C6C;
  border-right: 3px solid #164C6C;
}

.main-2022 .mv-qa-2022 .subtitle01-2022 {
  margin: 15px 0 3%;
}

#faq01, #faq02, #faq03 {
  margin-top: -130px;
  padding-top: 160px;
}

.qa-area .qa-title-2022 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  padding: 0px 0 30px;
  text-align: center;
}

.list-qa-2022 {
  display: flex;
  align-items: center;
  padding: 25px 0;
  border-bottom: 1px solid #D5D5D5;
  position: relative;
  cursor: pointer;
}

.list-qa-2022::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%)rotate(45deg);
  -ms-transform: translateY(-50%)rotate(45deg);
  transform: translateY(-50%)rotate(45deg);
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #164C6C;
  border-right: 3px solid #164C6C;
}

.list-qa-2022.open-qa::before {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 10px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #164C6C;
  border-right: 3px solid #164C6C;
}

.list-qa-2022 .q-txt-2022 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  text-align: left;
  width: 85%;
}

.list-qa-2022 .q-2022 {
  font-size: 24px;
  font-size: 2.4rem;
  font-family: 'futura-pt', serif;
  color: #164C6C;
  margin-right: 15px;
}

.list-qa_child-2022 {
  display: none;
  padding: 20px 0;
}

.list-qa_child-2022.open-aflex-2022 {
  position: relative;
  padding: 20px 0;
}

.list-qa_child-2022 .a-2022 {
  font-size: 24px;
  font-size: 2.4rem;
  font-family: 'futura-pt', serif;
  color: #164C6C;
  display: inline-block;
  vertical-align: middle;
}

.list-qa_child-2022 .a-txt-2022 {
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  padding-left: 15px;
  width: 90%;
}

.list-qa_child-2022 .a-txt-2022 a {
  color: #164C6C;
  text-decoration: underline;
}

@media (max-width:768px) {
  .mv-qa-2022 .flex-2022 {
    display: block;
    margin: 50px auto;
    max-width: initial;
  }

  .mv-qa-2022 .flex-2022 a {
    position: relative;
    width: 100%;
    max-width: 300px;
    display: block;
    color: #164C6C;
    padding: 20px 0 50px 0;
    margin: 30px auto;
  }

  .list-qa-2022 .q-txt-2022 {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: left;
    width: 80%;
  }
}

/*動画アーカイブページ */
/*page-list-2022*/
.page-list-2022 {
  display: flex;
  align-items: center;
  margin: 0 auto 100px;
  max-width: 80%;
}

.page-list-2022 li {
  font-size: 12px;
  font-size: 1.2rem;
  margin-right: 10px;
  color: #707070;
}

.page-list-2022 li a {
  font-size: 12px;
  font-size: 1.2rem;
  margin-right: 10px;
  color: #707070;
}

@media (max-width:1200px) {
  .page-list-2022 {
    display: flex;
    align-items: center;
    margin: 0 auto 100px;
    max-width: 100%;
  }
}

/*パンクズリスト*/
.pnkz-2022 {
  display: flex;
  align-items: center;
  padding: 30px 0;
  position: relative;
  z-index: 5;
}

.pnkz-2022 li {
  font-size: 12px;
  font-size: 1.2rem;
  margin: 0 5px;
  ;
  color: #707070;
}

.pnkz-2022 li a {
  font-size: 12px;
  font-size: 1.2rem;
  color: #707070;
}

.pnkz-2022.white-2022 li {
  font-size: 12px;
  font-size: 1.2rem;
  margin: 0 5px;
  color: #fff;
}

.pnkz-2022.white-2022 li a {
  font-size: 12px;
  font-size: 1.2rem;
  color: #fff;
}

.pnkz-2022 li:first-child {
  margin-left: 0;
}

.page-2022 .pnkz {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 12px;
  font-size: 1.2rem
}

.page-2022 .pnkz a, .page-2022 .pnkz span {
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  color: #707070
}

.page-2022 .pnkz a a, .page-2022 .pnkz a span, .pnkz span a, .pnkz span span {
  margin-right: 0
}

.page-2022 .pnkz a {
  color: #1e1e1e
}

@media (max-width:768px) {
  .pnkz, .pnkz-2022 {
    display: none;
  }
}

/*メニューリスト*/
.movie-mv, .mv-none-2022 {
  padding: 100px 0 0;
}

.movieNavPc {
  margin-bottom: 60px;
  padding-top: 30px;
  padding-bottom: 80px;
}

.movieNavPc .parents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
}

.movieNavPc .parents li {
  width: 16%;
}

.movieNavPc .parents li a {
  padding: 15px 15px;
  display: block;
  color: #164C6C;
  position: relative;
  background: #F1EBE6;
  transition: .5s ease;
}

.movieNavPc .parents li a:hover {
  background: #ECDBCC;
  transition: .5s ease;
}

.movieNavPc .parents li a.active {
  background: #ECDBCC;
  color: #164C6C;
}

.movieNavPc .children {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  margin: 30px auto 0;
  padding: 20px 30px;
  max-width: 80%;
  background: #F1EBE6;
}

.movieNavPc .children li {
  margin-right: 10px;
}

.movieNavPc .children li:last-child {
  margin-right: 0px;
}

.movieNavPc .children li a {
  padding: 10px 15px;
  display: block;
  color: #164C6C;
  position: relative;
  background: #fff;
  transition: .5s ease;
}

.movieNavPc .children li a.active {
  background: #ECDBCC;
  color: #164C6C;
}

.movieNavPc .children li a:hover {
  background: #ECDBCC;
  color: #164C6C;
}

/*ピックアップ*/
.pickup-header-2022 {
  position: relative;
  margin: 0 0 30px;
}

.pickup-header-2022 h2 {
  font-family: 'futura-pt', serif;
  font-size: 30px;
  font-size: 3.0rem;
  color: #164C6C;
  background-color: #F2EDE2;
  display: inline-block;
  position: relative;
  z-index: 5;
  padding-right: 10px;
}

.pickup-header-2022::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 1px;
  background-color: #232734;
  z-index: 1;
}

.pickup-movie-2022 .flex-area-2022 {
  align-items: center;
}

.left-art-2022 {
  width: 50%;
  padding-right: 15px;
}

.right-art-2022 {
  width: 50%;
  padding-left: 15px;
}

.youtube-2022 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube-2022-outer {
  margin: 40px auto 0;
  max-width: 850px;
  width: 100%;
}

.youtube-2022 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.youtube-2022 img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
}

.ymovie-title-2022 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
}

.ymovie-txt-2022 {
  font-weight: 300;
}

.pickup-movie-2022 .ymovie-title-2022 {
  margin-bottom: 20px;
}

/*アーカイブ*/
#archive-m {
  padding: 90px 0 80px;
}

.arc-movie-2022 .flex-area-2022 {
  justify-content: space-between;
  align-items: stretch;
}

.flex-artbox-2022 {
  width: 48%;
  margin-bottom: 120px;
}

.left-art-2022 .modal-youtube, .flex-artbox-2022 .modal-youtube {
  position: relative;
  display: block;
  z-index: 5;
  overflow: hidden;
}

.left-art-2022 .modal-youtube::before, .flex-artbox-2022 .modal-youtube::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(35, 39, 52, .8);
  z-index: 10;
  opacity: 0;
  transition: all .5s;
}

.left-art-2022 .modal-youtube::after, .flex-artbox-2022 .modal-youtube::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  height: 50px;
  width: 50px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  z-index: 15;
  opacity: 0;
  transition: all .5s;
}

.left-art-2022 .modal-youtube:hover::before, .left-art-2022 a:hover::after, .flex-artbox-2022 .modal-youtube:hover::before, .flex-artbox-2022 a:hover::after {
  opacity: 1;
  transition: all .5s;
}

.arc-movie-2022 .ymovie-title-2022 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 600;
  margin: 20px 0;
  min-height: 80px;
}

.arc-movie-2022 .ymovie-txt-2022 {
  font-weight: 300;
}

.arc-movie-2022 .arrow-box-blue {
  position: relative;
  text-align: left;
  margin: 30px 0 0;
  transition: all .5s;
}

/*タクソノミー*/
.tax_movie-header {
  text-align: center;
  margin-bottom: 40px;
}

.tax_movie-header h3 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  display: none;
}

.tax_movie-header p {
  text-align: center;
  display: none;
}

.tax_movie-header h3.active-tax-2022 {
  display: block;
}

.tax_movie-header p.active-taxch-2022 {
  margin-top: 5px;
  display: block;
}

/* modal */
.ed-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  z-index: 9999;
}

div#modalOverlay {
  width: 100%;
  height: 100%;
  display: flex;
  cursor: pointer;
}

.ed-closeModal {
  position: absolute;
  top: -35px;
  right: 5px;
  cursor: pointer;
  width: 15px;
  height: 15px;
  opacity: 0.5;
}

.ed-closeModal::before, .ed-closeModal::after {
  content: "";
  width: 30px;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  transform-origin: top left;
}

.ed-closeModal::before {
  left: 0px;
}

.ed-closeModal::after {
  right: -4px;
  transform: rotate(-45deg);
  transform-origin: top right;
}

.modalContent {
  width: 95%;
  max-width: 1000px;
  margin: auto;
  position: relative;
}

.video-2022 {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  filter: drop-shadow(0px 2px 5px #313131);
  animation: fadeIn 1.2s ease 0s 1 normal;
}

.video-2022 iframe {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
  }
}

@media (max-width:992px) {
  .movieNavPc .parents li {
    width: 33.333333%;
    margin-bottom: 5px;
    padding-right: 5px;
  }

  .arc-movie-2022 .ymovie-title-2022 {
    min-height: 100px;
  }
}

@media (max-width:768px) {
  .movie-mv, .mv-none-2022 {
    padding: 80px 0 0;
  }

  .movieNavPc .parents {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
  }

  .movieNavPc .parents li {
    width: 33.333333%;
    margin-bottom: 8px;
    padding-right: 5px;
  }

  .movieNavPc .parents li a {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .movieNavPc .children li a {
    font-size: 14px;
    font-size: 1.4rem;
  }

  /*ピックアップ*/
  .pickup-movie-2022 .flex-area-2022 {
    align-items: stretch;
    margin-left: -15px;
    margin-right: -15px;
  }

  .left-art-2022 {
    width: 100%;
    padding-right: 0px;
    margin-bottom: 20px;
  }

  .right-art-2022 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .ymovie-title-2022 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 600;
  }

  /*アーカイブ*/
  .flex-artbox-2022 .modal-youtube {
    margin-left: -15px;
    margin-right: -15px;
  }

  .flex-artbox-2022 .modal-youtube {
    margin-left: -15px;
    margin-right: -15px;
  }

  .flex-artbox-2022 {
    width: 100%;
    margin-bottom: 70px;
  }

  .arc-movie-2022 .ymovie-title-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 15px 0;
    min-height: initial;
  }

  /*タクソノミー*/
  .tax_movie-header h3 {
    font-size: 25px;
    font-size: 2.5rem;
    font-weight: 600;
  }
}

@media (max-width:640px) {
  .movieNavPc .parents li {
    width: 50%;
    margin-bottom: 10px;
    padding-right: 10px;
  }

  .movieNavPc .parents li:nth-child(even) {
    width: 50%;
    margin-bottom: 10px;
    padding-right: 0px;
  }

  #archive-m {
    padding: 13% 0 12%;
  }
}


/*資料ダウンロードページ */

/*メニューリスト*/
.downloadNavPc {
  padding-top: 30px;
  padding-bottom: 80px;
}

.downloadNavPc .parents {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  gap:10px;
}

.downloadNavPc .parents li {
  width: 24%;
}

.downloadNavPc .parents li:last-child {
  margin-right: 0;
}

.downloadNavPc .parents li a {
  padding: 15px 10px;
  display: block;
  color: #232734;
  position: relative;
  background: #F2EDE2;
  transition: .5s ease;
}

.downloadNavPc .parents li a:hover {
  background: #ECDBCC;
  color: #164C6C;
  transition: .5s ease;
}

.downloadNavPc .parents li a.active {
  background: #ECDBCC;
  color: #164C6C;
}

.downloadNavPc .children {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  margin: 30px auto 0;
  padding: 20px 30px;
  max-width: 80%;
  background: #F1EBE6;
}

.downloadNavPc .children li {
  margin-right: 10px;
}

.downloadNavPc .children li:last-child {
  margin-right: 0px;
}

.downloadNavPc .children li a {
  padding: 10px 15px;
  display: block;
  color: #232734;
  position: relative;
  background: #fff;
  transition: .5s ease;
}

.downloadNavPc .children li a.active {
  background: #ECDBCC;
  color: #fff;
}

.downloadNavPc .children li a:hover {
  background: #ECDBCC;
  color: #fff;
}

/*pdf 2022 blue*/
.pdf-box-blue {
  position: relative;
  text-align: left;
  margin: 30px 0 0;
  transition: all .5s;
}

.pdf-box-blue p {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
  background-color: #164C6C;
  color: #fff;
  padding: 15px 25px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

.pdf-box-blue p::after {
  content: '';
  display: inline-block;
  background: url(../img/icon-pdf-2022.svg)no-repeat center;
  background-size: cover;
  vertical-align: middle;
  width: 22px;
  height: 24px;
  margin-left: 10px;
  transition: all .5s;
}

.pdf-box-blue p.form-btn::after {
  content: none;
}

.pdf-box-blue:hover {
  transition: all .5s;
}

.pdf-box-blue p:hover {
  background-color: #ECDBCC;
  color: #164C6C;
  transition: all .5s;
}

.pickup-download-2022 .flex-area-2022 {
  align-items: center;
}

.pickup-download-2022 .left-art-2022 {
  width: 55%;
  padding-right: 20px;
}

.pickup-download-2022 .right-art-2022 {
  width: 45%;
  padding-left: 20px;
}

.pickup-download-2022 .left-art-2022 .img-pickup-2022 {
  display: block;
  position: relative;
  z-index: 5;
}

.pickup-download-2022 .left-art-2022 .img-pickup-2022 img {
  position: relative;
  z-index: 5;
}

.pickup-download-2022 .left-art-2022 .img-pickup-2022::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: -10px;
  bottom: -10px;
  background: #E6DDC7;
  z-index: 1;
}

.down-title-2022 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.pickup-download-2022 .down-txt-2022 {
  font-weight: 300;
  line-height: 200%;
}

.pickup-download-2022 .pdf-box-blue p {
  width: 75%;
}

/*アーカイブ*/
.arc-download-2022 .flex-area-2022 {
  justify-content: space-between;
  align-items: stretch;
}

/* 最後のコンテンツを左寄せにする指定 */
.arc-download-2022 .flex-area-2022::after {
  content: "";
  display: block;
  width: 30%;
  /* .boxに指定したwidthと同じ幅を指定する */
  height: 0;
}

.arc-download-2022 .flex-artbox-2022 {
  width: 30%;
  margin-bottom: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.arc-download-2022 .head-area-2022 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.arc-download-2022 .down-title-2022 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 600;
  margin: 20px 0;
  min-height: 100px;
}

.arc-download-2022 .down-txt-2022 {
  height: calc(100% - 160px);
}

/*タクソノミー*/
.tax_download-header {
  text-align: center;
  margin-bottom: 40px;
}

.tax_download-header h3 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  display: none;
}

.tax_download-header p {
  text-align: center;
  display: none;
}

.tax_download-header h3.active-tax-2022 {
  display: block;
}

.tax_download-header p.active-taxch-2022 {
  margin-top: 5px;
  display: block;
}

/*詳細ページ*/
.single-download .header-area {
  margin: 30px 0 50px;
}

.single-download .down-title30 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 400;
  color: #164C6C;
  line-height: 150%;
  text-align: center;
}

.single-download .down-title30 span {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  text-align: center;
  display: block;
  margin: 0px 0 3%;
}

.single-download_keyvisual {
  margin: 0 auto;
  max-width: 758px;
  text-align: center;
}

.single-download_frame {
  background-color: #F1EBE6;
  margin-bottom: 50px;
  padding: 60px;
}

.single-download_info {
  margin: 30px auto 0;
  max-width: 800px;
}

.single-download_info-row {
  display: flex;
  padding: 20px 0;
}

.single-download_info-row:nth-last-of-type(1) {
  padding: 20px 0 0;
}

.single-download_info-row:nth-of-type(n + 2) {
  border-top: solid 1px #D1D1D1;
}

.single-download_info-index {
  flex-shrink: 0;
  width: 200px;
}

.single-download_info-index--en {
  color: #164C6C;
  font-family: 'futura-pt', serif;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

.single-download_info-index--ja {
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.2 !important;
}

.single-download_info-value {
  line-height: 1.4 !important;
}

.single-download_info-value ol,
.single-download_info-value ul {
  list-style-type: disc;
  padding-left: 20px;
}

@media (max-width:992px) {

  /*メニューリスト*/
  .downloadNavPc .parents {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }

  .downloadNavPc .parents li {
    width: 40%;
    margin-bottom: 5px;
    margin-right: 0;
    padding-right: 5px;
  }

  .downloadNavPc .parents li:last-child {
    width: 40%;
    margin-right: 0;
  }

  /*PDF box blue*/
  .pdf-box-blue p {
    width: 100%;
    padding: 20px 25px;
  }

  /*ピックアップ*/
  .pickup-download-2022 .left-art-2022 {
    width: 100%;
    padding-right: 0px;
    margin-bottom: 30px;
  }

  .pickup-download-2022 .right-art-2022 {
    width: 100%;
    padding-left: 0px;
  }

  .pickup-download-2022 .pdf-box-blue {
    text-align: center
  }

  .pickup-download-2022 .pdf-box-blue p {
    width: 100%;
  }

  /*アーカイブ*/
  .arc-download-2022 .flex-artbox-2022 {
    width: 48%;
    margin-bottom: 60px;
  }

  .arc-download-2022 .flex-area-2022::after {
    content: "";
    display: block;
    width: 48%;
    height: 0;
  }

  .arc-download-2022 .head-area-2022 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
  }

  .arc-download-2022 .down-title-2022 {
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 600;
    margin: 20px 0;
    min-height: 120px;
  }

  .arc-download-2022 .down-txt-2022 {
    height: calc(100% - 180px);
  }
}

@media (max-width:768px) {

  /*メニューリスト*/
  .download-mv {
    padding: 80px 0 20px;
  }

  .downloadNavPc .parents li a {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .downloadNavPc .children li a {
    font-size: 14px;
    font-size: 1.4rem;
  }

  /*PDF box blue*/
  .pdf-box-blue p {
    font-size: 14px;
    font-size: 1.4rem;
    width: 100%;
    padding: 20px 25px;
  }

  /*ピックアップ*/
  .pickup-download-2022 .flex-area-2022 {
    align-items: stretch;
  }

  .down-title-2022 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 600;
  }

  /*アーカイブ*/
  .arc-download-2022 .flex-artbox-2022 {
    width: 100%;
    margin-bottom: 90px;
  }

  /* 最後のコンテンツを左寄せにする指定 */
  .arc-download-2022 .flex-area-2022::after {
    content: "";
    display: none;
    width: 0%;
    height: 0;
  }

  .arc-download-2022 .head-area-2022 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0;
  }

  .arc-download-2022 .down-title-2022 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 15px 0;
    min-height: initial;
  }

  .arc-download-2022 .down-txt-2022 {
    height: auto;
  }

  /*タクソノミー*/
  .tax_download-header h3 {
    font-size: 25px;
    font-size: 2.5rem;
    font-weight: 600;
  }

  /*詳細ページ*/
  .single-download .header-area {
    margin: 4.8vw 0 8vw;
  }

  .single-download .down-title30 {
    font-size: 5.8vw;
  }

  .single-download .down-title30 span {
    font-size: 4vw;
    margin: 0px 0 5%;
  }

  .single-download_frame {
    font-size: 4vw;
    margin-bottom: 8vw;
    padding: 8vw;
  }

  .single-download_info {
    margin: 3vw auto 0;
  }

  .single-download_info-row {
    display: block;
    padding: 5vw 0;
  }

  .single-download_info-index {
    width: auto;
  }

  .single-download_info-index--en {
    font-size: 5vw !important;
  }

  .single-download_info-index--ja {
    font-size: 3.5vw !important;
  }

  .single-download_info-value {
    margin-top: 4vw;
  }

  .single-download_info-value ol,
  .single-download_info-value ul {
    padding-left: 4.2vw;
  }

  .single-download_info-value li {
    font-size: 4vw !important;
  }
}

@media (max-width:640px) {

  /*メニューリスト*/
  .downloadNavPc .parents {
    display: block;
  }

  .downloadNavPc .parents li {
    width: 80%;
    margin: 0 auto 10px;
    padding-right: 0px;
  }

  .downloadNavPc .parents li:last-child {
    width: 80%;
    margin: 0 auto;
  }
}

/*-------------------*/
/*-ページネーション -*/
/*-------------------*/
.Pagination {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 30px;
  font-family: 'futura-pt', serif;
  font-weight: 300;
}

.Pagination .page-numbers {
  margin-left: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #989898;
  font-family: 'futura-pt', serif;
  transition: all .5s;
}

@media (max-width:768px) {
  .Pagination .page-numbers {
    font-size: 16px;
  }
}

.page-numbers.current {
  color: #232734;
  background-color: transparent;
}

.next.page-numbers, .prev.page-numbers {
  position: relative;
}

.prev.page-numbers::before {}

.prev.page-numbers::after {}

.next.page-numbers::before {}

.next.page-numbers::after {}

.pagination .dots {
  background: transparent;
  box-shadow: none;
}

/*-------------------*/
/*-ページネーション2 -*/
/*-------------------*/
.pagination {
  margin: 40px 0 0;
}

.pagination h2 {
  display: none;
}

.nav-links {}

.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #232734;
}

.pagination .page-numbers li {
  font-family: 'futura-pt', serif;
  padding: 10px 10px;
}

.pagination .page-numbers li a {
  font-family: 'futura-pt', serif;
  color: #989898;
}

.pagination .page-numbers li a.next, .pagination .page-numbers li a.prev {
  font-family: 'futura-pt', serif;
  color: #989898;
}

.pagination .current {
  font-family: 'futura-pt', serif;
  color: #232734;
}

.pagination .prev, .pagination .next {
  font-family: 'futura-pt', serif;
  background: transparent;
  box-shadow: none;
  color: #232734;
}

.pagination .dots {
  background: transparent;
  box-shadow: none;
}

/*コラムページ */
.column-mv {
  padding: 100px 0 0;
}

.column-mv .title01-2022, .column-mv .title01-2022 span {
  line-height: 120%;
}

.column-art-2022 {
  padding: 0px 0 80px;
}

.column-art-2022 .flex-area-2022 {
  align-items: stretch;
}

.left-col-2022 {
  width: calc(100% - 400px);
  padding-right: 30px;
}

.right-col-2022 {
  width: 395px;
}

.left-colflex-2022 {
  display: flex;
  flex-wrap: wrap;
}

.left-colflex-2022 article {
  width: 33%;
  padding-right: 20px;
  margin-bottom: 80px;
}

.left-colflex-2022 article a {
  color: #232734;
}

.left-colflex-2022 article h2, .left-colflex-2022 article a h2 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 600;
  color: #232734;
  margin: 0px 0 10px;
}

.left-colflex-2022 article .col-date-2022 {
  text-align: right;
  font-size: 12px;
  font-size: 1.2rem;
  margin: 5px 0 10px;
}

.left-colflex-2022 article .col-tag-2022 {
  padding: 15px 0;
}

.left-colflex-2022 article .col-tag-2022 a {
  font-size: 14px;
  font-size: 1.4rem;
  color: #232734;
  margin-right: 10px;
}

/*コラムメニュー*/
.column-menu-ti-2022 {
  font-weight: 600;
  text-align: center;
}

.column-menu-2022 {
  padding: 30px 10px 10px;
  background: #F8F8F8;
  /*position: sticky;
    top: 90px*/
  ;
}

.column-menu-2022.sticky-2022 {
  position: sticky;
  top: 90px;
}

.column-menu-2022 ul {
  margin: 0 auto;
  width: 92%;
}

.column-menu-2022 ul li {
  margin: 20px 0;
  margin-left: 20px;
  list-style-type: '－ ';
}

.column-menu-2022 ul li a {
  line-height: 180%;
  color: #232734;
}

/*コラム 人気の記事メニュー*/
.column-popular-2022 {
  padding: 30px 10px 10px;
  background: #F8F8F8;
  margin: 0;
  counter-reset: number 0;
}

.column-popular-2022 .latest-box-2022 article {
  width: 92%;
  margin: 20px auto;
}

.column-popular-2022 .latest-box-2022 a {
  display: flex;
  margin: 5px auto 0;
}

.column-popular-2022 .latest-box-2022 .number-pop-2022 {
  font-family: 'futura-pt', serif;
  font-size: 14px;
  font-size: 1.4rem;
  color: #164C6C;
}

.column-popular-2022 .latest-box-2022 .number-pop-2022::after {
  counter-increment: number 1;
  content: counter(number)"";
  font-family: 'futura-pt', serif;
  font-size: 14px;
  font-size: 1.4rem;
  color: #164C6C;
}

.column-popular-2022 .latest-box-2022 a .left-box-2022 {
  width: 78px;
}

.column-popular-2022 .latest-box-2022 a .left-box-2022 img {
  width: 78px;
  height: 78px;
  object-fit: cover;
}

.column-popular-2022 .latest-box-2022 a .right-box-2022 {
  width: calc(100% - 88px);
  padding-left: 15px;
}

.column-popular-2022 .latest-box-2022 a .right-box-2022 .art-title-2022 {
  font-size: 14px;
  font-size: 1.4rem;
  color: #232734;
}

/*コラム 最新記事メニュー*/
.column-latest-2022 {
  position: relative;
  padding: 45px 10px 10px;
  background: #F8F8F8;
  margin: -15px 0 15px;
}

.column-latest-2022 .latest-box-2022 article {
  width: 92%;
  margin: 20px auto;
}

.column-latest-2022::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 92%;
  height: 1px;
  background: #232734;
}

.column-latest-2022 .latest-box-2022 {
  margin-top: 20px;
}

.column-latest-2022 .latest-box-2022 time {
  font-size: 14px;
  font-size: 1.4rem;
  margin: 0 auto;
  text-align: left;
}

.column-latest-2022 .latest-box-2022 a {
  display: flex;
  margin: 5px auto 20px;
}

.column-latest-2022 .latest-box-2022 a .left-box-2022 {
  width: 78px;
}

.column-latest-2022 .latest-box-2022 a .left-box-2022 img {
  width: 78px;
  height: 78px;
  object-fit: cover;
}

.column-latest-2022 .latest-box-2022 a .right-box-2022 {
  width: calc(100% - 88px);
  padding-left: 15px;
}

.column-latest-2022 .latest-box-2022 a .right-box-2022 .art-title-2022 {
  font-size: 14px;
  font-size: 1.4rem;
  color: #232734;
}

/*コラムメニュー SP*/
.column-btn-2022 {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.column-menuSP-ti-2022 {
  font-weight: 600;
  text-align: center;
  width: 100%;
  padding-right: 10px;
  vertical-align: middle;
}

.column-menuSP-ti-2022::after {
  content: '';
  display: inline-block;
  -webkit-transform: translateY(-1px) rotate(45deg);
  -ms-transform: translateY(-2px) rotate(45deg);
  transform: translateY(-2px) rotate(45deg);
  width: 10px;
  height: 10px;
  margin-left: 5px;
  border-bottom: 2px solid #232734;
  border-right: 2px solid #232734;
}

.column-menuSP-2022 {
  padding: 15px 10px;
  margin-bottom: 40px;
  background: #F8F8F8;
}

.column-SPlist-2022 {
  display: none;
}

.column-menuSP-2022 ul {
  margin: 0 auto;
  width: 92%;
}

.column-menuSP-2022 ul li {
  margin: 20px 0;
  margin-left: 20px;
  list-style-type: '－ ';
}

.column-menuSP-2022 ul li a {
  line-height: 180%;
  color: #232734;
}

/*タクソノミーページ*/
.tax_column-header {
  margin: 50px 0;
}

.tax_column-header .tax_columnti-2022 {
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 500;
  text-align: center;
}

.tax_column-header p {
  font-weight: 400;
  text-align: center;
  margin-top: 15px;
}

/*別ページリンク*/
#column-art02-2022 .container-2022 {
  max-width: 1200px;
}

#column-art02-2022 .of-link-2022 {
  padding: 80px 5%;
  margin: auto;
  display: block;
  position: relative;
  color: #164C6C;
  vertical-align: middle;
  text-decoration: none;
  width: 50%;
  transition: all .5s;
}

#column-art02-2022 .flex-area-2022 {
  position: relative;
}

#column-art02-2022 .flex-area-2022::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translatex(-50%);
  background: #164C6C;
  width: 1px;
}

#column-art02-2022 .of-link-2022:hover {
  color: #fff;
  background-color: #ECDBCC;
}

#column-art02-2022 .of-link-2022 p {
  font-weight: 400;
}

#column-art02-2022 .of-link-2022::before {
  position: absolute;
  top: 50%;
  right: 70px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 50px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#column-art02-2022 .of-link-2022::after {
  position: absolute;
  top: 50%;
  right: 72px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 15px;
  height: 15px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

#column-art02-2022 .of-link-2022:hover::before {
  position: absolute;
  top: 50%;
  right: 50px;
  width: 70px;
  height: 1px;
  background: #fff;
  transition: all .5s;
}

#column-art02-2022 .of-link-2022:hover::after {
  position: absolute;
  top: 50%;
  right: 51px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: all .5s;
}

@media (max-width:1200px) {
  #column-art02-2022 .of-link-2022::before {
    position: absolute;
    top: 50%;
    right: 50px;
  }

  #column-art02-2022 .of-link-2022::after {
    position: absolute;
    top: 50%;
    right: 52px;
  }

  #column-art02-2022 .of-link-2022:hover::before {
    position: absolute;
    top: 50%;
    right: 30px;
  }

  #column-art02-2022 .of-link-2022:hover::after {
    position: absolute;
    top: 50%;
    right: 31px;
  }
}

@media (max-width:992px) {
  #column-art02-2022 .flex-area-2022 {
    display: block;
  }

  #column-art02-2022 .flex-area-2022::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0%;
    transform: translatex(0%);
    background: #164C6C;
    width: 0px;
  }

  #column-art02-2022 .of-link-2022 {
    padding: 80px 5%;
    margin: auto;
    display: block;
    position: relative;
    color: #164C6C;
    vertical-align: middle;
    text-decoration: none;
    width: 50%;
    border-top: 1px solid #164C6C;
    border-bottom: 1px solid #164C6C;
    transition: all .5s;
  }

  #column-art02-2022 .of-link-2022 {
    padding: 60px;
    margin: auto;
    width: 60%;
  }

  #column-art02-2022 .of-link-2022:last-child {
    margin: -1px auto 0;
  }
}

@media (max-width:768px) {
  #column-art02-2022 .of-link-2022 {
    padding: 60px;
    margin: auto;
    display: block;
    position: relative;
    color: #164C6C;
    vertical-align: middle;
    text-decoration: none;
    transition: all .5s;
    width: 100%;
  }
}

@media (max-width:1200px) {
  .left-col-2022 {
    width: 80%;
  }

  .right-col-2022 {
    width: 20%;
  }

  /*人気の記事メニュー*/
  .column-popular-2022 .latest-box-2022 a {
    display: flex;
    margin: 5px auto 0;
  }

  .column-popular-2022 .latest-box-2022 a .left-box-2022 {
    width: 68px;
  }

  .column-popular-2022 .latest-box-2022 a .left-box-2022 img {
    width: 78px;
    height: 78px;
    object-fit: cover;
  }

  .column-popular-2022 .latest-box-2022 a .right-box-2022 {
    width: calc(100% - 68px);
    padding-left: 10px;
  }

  /*コラム 最新記事メニュー*/
  .column-latest-2022 .latest-box-2022 a {
    display: flex;
    margin: 5px auto 0px;
  }

  .column-latest-2022 .latest-box-2022 a .left-box-2022 {
    width: 68px;
  }

  .column-latest-2022 .latest-box-2022 a .left-box-2022 img {
    width: 78px;
    height: 78px;
    object-fit: cover;
  }

  .column-latest-2022 .latest-box-2022 a .right-box-2022 {
    width: calc(100% - 68px);
    padding-left: 10px;
  }
}

@media (max-width:992px) {
  .column-art-2022 {
    padding: 20px 0 80px;
  }

  .tax_column-header .tax_columnti-2022 {
    font-size: 25px;
    font-size: 2.5rem;
  }

  .left-col-2022 {
    width: 100%;
    padding-right: 0;
  }

  .right-col-2022 {
    width: 100%;
  }

  .left-colflex-2022 article {
    width: 50%;
    padding-right: 10px;
    margin-bottom: 30px;
  }

  .left-colflex-2022 article:nth-child(even) {
    width: 50%;
    padding-right: 0px;
    padding-left: 10px;
  }

  /*人気の記事メニュー*/
  .column-popular-2022 .latest-box-2022 a .left-box-2022 {
    width: 78px;
  }

  .column-popular-2022 .latest-box-2022 a .right-box-2022 {
    width: calc(100% - 68px);
    padding-left: 10px;
  }

  .column-popular-2022 .latest-box-2022 a .right-box-2022 .art-title-2022 {
    font-size: 14px;
    font-size: 1.4rem;
    margin-top: 0px;
  }

  /*最新の記事メニュー*/
  .column-latest-2022 .latest-box-2022 a .left-box-2022 {
    width: 78px;
  }

  .column-latest-2022 .latest-box-2022 time {
    font-size: 14px;
    font-size: 1.4rem;
    margin: 0 auto;
    text-align: left;
  }

  .column-latest-2022 .latest-box-2022 a .right-box-2022 .art-title-2022 {
    font-size: 14px;
    font-size: 1.4rem;
    margin-top: 0px;
  }

  #of-design02-2022.column-art02-2022 .of-link-2022:first-child {
    border-top: 1px solid #164C6C;
    border-bottom: 0px solid #164C6C;
  }
}

@media (max-width:768px) {
  .left-colflex-2022 {
    display: block;
  }

  .left-colflex-2022 article {
    width: 100%;
    padding-right: 0px;
    margin-bottom: 60px;
  }

  .left-colflex-2022 article:nth-child(even) {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
  }

  .left-colflex-2022 article h2, .left-colflex-2022 article a h2 {
    margin: 0px 0 10px;
  }

  .left-colflex-2022 article .col-tag-2022 {
    padding: 5px 0 15px;
  }

  /*コラムメニュー SP*/
  .column-menuSP-ti-2022::after {
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #232734;
    border-right: 2px solid #232734;
    transform: translateY(-3px) rotate(45deg);
  }
}

/*コラム 記事ページ*/
.single-column #page-container .flex-area-2022 {
  padding: 40px 0;
  align-items: stretch;
}
#single-column-wrapper {
  padding-right: 40px;
}
#single-column-wrapper .post_dates{
  display:flex;
  color:#989898;
}
#single-column-wrapper .post_dates > span.post_dates-pipe{margin-top:-2px;}
.single-column-header {
  margin-bottom: 50px;
}

.single-column-header time {
  font-family: 'futura-pt', sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  color: #989898;
  margin-bottom: 10px;
}

.single-column-header h1 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 500;
  color: #232734;
  margin: 20px 0 40px;
}

.single-column-header div a {
  font-size: 16px;
  font-size: 1.6rem;
  color: #232734;
  line-height: 180%;
  margin-right: 10px;
}

.column-thum-2022 {
  width: 100%;
  height: auto;
}

#single-content-2022 {
  margin-bottom: 120px;
}

#single-content-2022 ul {
  padding: 30px 30px 30px 50px;
  max-width: 100%;
  margin: 0 auto 20px;
  background-color: #F7F6F5;
  list-style: disc;
  list-style-position: outside;
}

#single-content-2022 ol {
  padding: 30px 30px 30px 50px;
  max-width: 100%;
  margin: 0 auto 20px;
  background-color: #F7F6F5;
  list-style: decimal;
  list-style-position: outside;
}

#single-content-2022 ul li, #single-content-2022 ol li {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 120%;
  color: #232734;
  padding: 10px 0;
}

#single-content-2022 ul li a {
  color: #164C6C;
  line-height: 190%;
  display: block;
}

#single-content-2022 h2 {
  font-size: 22px;
  font-size: 2.2rem;
  color: #232734;
  line-height: 175%;
  background: #F4F4F4;
  position: relative;
  padding: 5px 15px;
  margin: 60px 0 30px;
}

#single-content-2022 h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: inline-block;
  width: 4px;
  background: #232734;
}

#single-content-2022 h3 {
  font-size: 22px;
  font-size: 2.2rem;
  color: #232734;
  line-height: 175%;
  position: relative;
  padding: 5px 15px;
  margin: 60px 0 30px;
}

#single-content-2022 h3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: inline-block;
  width: 4px;
  background: #232734;
}

#single-content-2022 h4 {
  font-size: 22px;
  font-size: 2.2rem;
  color: #232734;
  line-height: 175%;
  margin: 60px 0 30px;
  padding-bottom: 5px;
  border-bottom: 1px solid #232734;
}

#single-content-2022 h5 {
  font-size: 22px;
  font-size: 2.2rem;
  color: #232734;
  line-height: 175%;
  display: block;
  width: 90%;
  margin: 0 auto 20px;
}

#single-content-2022 p {
  font-size: 16px;
  font-size: 1.6rem;
  color: #232734;
  line-height: 190%;
  width: 100%;
  margin: 0 0 20px;
}

#single-content-2022 strong {
  font-weight: 500;
}

#single-content-2022 dl {
  width: 100%;
  margin: 0 auto 40px;
}

#single-content-2022 dl dt {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #232734;
  line-height: 190%;
  margin: 0 auto 10px;
}

#single-content-2022 dl dd {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  color: #232734;
  line-height: 190%;
  margin: 0 auto 30px;
}

#single-content-2022 a {
  font-size: 16px;
  font-size: 1.6rem;
  color: #164C6C;
  line-height: 190%;
  display: inline-block;
}

#single-content-2022 img {
  display: block;
  margin: 0 auto 40px;
  max-width: 100%;
}

#single-content-2022 p img {
  display: block;
  margin: 0px auto 10px;
  max-width: 100%;
  line-height: 100%;
}

#single-content-2022 .wp-caption {
  display: block;
  margin: auto;
  max-width: 100%;
}

#single-content-2022 .wp-caption img {
  display: block;
  margin: 0 auto 10px;
  max-width: 100%;
}

#single-content-2022 .wp-caption p {
  width: 100%;
  margin: 0 auto 35px;
}

#single-content-2022 img.column-thum {
  display: block;
  margin: 0 auto 60px;
  max-width: 100%;
}

/*カラム*/
#single-content-2022 .wp-block-columns {
  display: flex !important;
  max-width: 90%;
  margin: 0 auto;
}

#single-content-2022 .wp-block-column img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

#single-content-2022 .video-container {
  margin: 60px 0;
}

#single-content-2022 .video-container .video-2022 {
  width: 90%;
  margin: 0 auto;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

#single-content-2022 .video-container .video-2022 iframe {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

#single-content-2022 .wp-block-contact,
#single-content-2022 .wp-block-officetour{
  padding:50px 30px;
  background: #F7F6F5;
  max-width: 100%;
  margin-bottom: 30px;
  border-radius:5px;
}
#single-content-2022 .wp-block-contact p,
#single-content-2022 .wp-block-officetour p{
  text-align: center;
}
#single-content-2022 .wp-block-contact p:nth-of-type(1),
#single-content-2022 .wp-block-officetour p:nth-of-type(1){
  font-size: 15px;
  margin-bottom: 1em;
  font-weight:500;
}
#single-content-2022 .wp-block-contact p:nth-of-type(2),
#single-content-2022 .wp-block-officetour p:nth-of-type(2){
  margin-bottom: 0;
  font-size: 14px;
  font-weight:500;
}
#single-content-2022 .wp-block-contact p:nth-of-type(2){
  color:#E05D01;
}
#single-content-2022 .wp-block-officetour p:nth-of-type(2){
  color:#164C6C;
}
#single-content-2022 .wp-block-contact p:nth-of-type(3),
#single-content-2022 .wp-block-officetour p:nth-of-type(3){
  display: flex;
  justify-content: center;
  margin-bottom:0;
}
#single-content-2022 .wp-block-contact p:nth-of-type(3) a,
#single-content-2022 .wp-block-officetour p:nth-of-type(3) a{
  color:#fff;
  display: flex;
  align-items: center;
  justify-content:center;
  width:300px;
  height:70px;
  border-radius:5px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
  font-size:18px;
  font-weight: 700;
  transition:all 0.3s;
}
@media (min-width:1024px) {
  #single-content-2022 .wp-block-contact p:nth-of-type(3) a:hover,
  #single-content-2022 .wp-block-officetour p:nth-of-type(3) a:hover{
    opacity: 0.7;
  }
}
#single-content-2022 .wp-block-contact p:nth-of-type(3) a{
  background: #E05D01;
}
#single-content-2022 .wp-block-officetour p:nth-of-type(3) a{
  background: #164C6C;
}
#single-content-2022 blockquote {
  position: relative;
  border: 1px solid #D5D5D5;
  width: 90%;
  padding: 30px;
  margin: 60px auto;
}
#single-content-2022 blockquote p {
  color: #989898;
  position: relative;
  width: 90%;
  margin: 0 auto;
}
#single-content-2022 blockquote p::before {
  content: '';
  position: absolute;
  top: 0;
  left: -38px;
  background: url(../img/column/blockquote01.svg)no-repeat;
  background-size: cover;
  width: 28px;
  height: 24px;
}

#single-content-2022 blockquote p::after {
  content: '';
  position: absolute;
  right: -38px;
  bottom: 0;
  background: url(../img/column/blockquote02.svg)no-repeat;
  background-size: cover;
  width: 28px;
  height: 24px;
}

#single-content-2022 table {
  width: 100%;
  max-width: 95%;
  margin: 0px auto 40px;
}

#single-content-2022 table caption {
  margin-bottom: 10px;
}

#single-content-2022 table tbody tr {
  text-align: center;
  width: 100%;
}

#single-content-2022 .table-td-left table tbody tr {
  text-align: left;
}

#single-content-2022 table tbody tr th {
  text-align: center;
  font-weight: 500;
  padding: 15px;
  background: #F2F2F2;
  border: 1px solid #737684;
}

#single-content-2022 table tbody tr td {
  padding: 15px;
  border: 1px solid #737684;
  line-height: 2.5rem
}

#single-content-2022 table ul, #single-content-2022 table ol {
  padding: 0px 0px 10px 30px;
  margin: auto;
  max-width: 100%;
  background-color: transparent;
  list-style: disc;
  list-style-position: outside;
}

#single-content-2022 table ul li, #single-content-2022 table ol li {
  font-size: 16px;
  font-size: 1.6rem;
  color: #232734;
  padding: 10px 0;
  text-align: left;
  letter-spacing: 1px;
}

#single-content-2022 .column_banner a {
  transition: all 0.4s;
}

#single-content-2022 .column_banner a:hover {
  opacity: 0.7;
}

#single-content-2022 .column_sidescroll {
  overflow: scroll hidden;
}

#single-content-2022 .column_sidescroll img {
  min-width: 840px;
  width: 100%;
}

.wp-block-image figcaption {
  text-align: right;
  font-size: 14px;
  margin: -30px 0 30px;
}

#single-content-2022 .eyecatch_caption {
  text-align: right;
  font-size: 14px;
  margin: -50px 0 30px;
}

.single-share-list-2022 {
  margin-bottom: 100px;
  text-align: center
}

.single-share-list-2022 dd, .single-share-list-2022 dt {
  display: inline-block;
  vertical-align: middle
}

.single-share-list-2022 dt {
  margin-right: 20px;
  font-size: 18px;
  font-size: 1.8rem
}

.single-share-list-2022 dd ul li {
  margin: 0 14px;
  display: inline-block;
  vertical-align: middle
}

.single-share-list-2022 dd ul li a {
  transition: all .5s ease,
}

.single-share-list-2022 dd ul li a img {
  height: 30px;
}

.single-share-list-2022 dd ul li:nth-of-type(2) a img {
  height: 26px;
}

.single-share-list-2022 dd ul li a:hover {
  opacity: .6
}

.single-share-list-2022 #copy-page {
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  color: #989898;
  background: none;
  border: none;
  outline: none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.single-share-list-2022 #copy-page::after {
  content: '</>';
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  color: #989898;
  background: none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.single-share-list-2022 #copy-page:hover {
  cursor: pointer;
  opacity: .7;
}

.single-column-footer {
  margin: 30px 0;
  padding: 30px;
  background: #F2EDE2;
}

.single-column-footer .author_title {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0px 0 10px;
}

.single-column-footer article {
  display: flex;
}

.single-column-footer .left-box-2022 {
  width: 150px;
  position: relative;
  overflow: hidden;
}

.single-column-footer .author_img {
  position: relative;
  overflow: hidden;
  padding-top: 75%;
  width: 100%;
  height: 0;
}

.single-column-footer .author_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  object-fit: cover;
}

.single-column-footer .right-box-2022 {
  width: calc(100% - 150px);
  padding-left: 20px;
}

.author-name-2022 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.author-prof-2022 {
  font-size: 14px;
  font-size: 1.4rem;
}

@media (max-width:992px) {
  .single-column .left-col-2022 {
    width: 100%;
    padding-right: 0;
    margin-bottom: 50px;
  }

  #single-column-wrapper {
    padding-right: 0px;
  }

  .single-column-header time {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .single-column-header h1 {
    font-size: 25px;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 150%;
    color: #232734;
    margin: 20px 0 40px;
  }

  .single-column-header div a {
    font-size: 14px;
    font-size: 1.4rem;
    color: #232734;
  }

  .column-thum-2022 {
    width: 100%;
    height: auto;
  }

  #single-content-2022 {
    margin-bottom: 60px;
  }

  #single-content-2022 ul, #single-content-2022 ol {
    padding: 20px 20px 20px 30px;
    margin: 0 0 20px;
    max-width: 100%;
  }

  #single-content-2022 ul li, #single-content-2022 ol li {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 10px 0;
  }

  #single-content-2022 h2 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  #single-content-2022 h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 4px;
  }

  #single-content-2022 h3 {
    font-size: 18px;
    font-size: 1.8rem;
    position: relative;
    padding-left: 15px;
    margin-bottom: 20px;
  }

  #single-content-2022 h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 4px;
  }

  #single-content-2022 h4 {
    font-size: 18px;
    font-size: 1.8rem;
    margin-bottom: 20px;
    padding-bottom: 5px;
  }

  #single-content-2022 h5 {
    font-size: 18px;
    font-size: 1.8rem;
    width: 100%;
    margin: 0 auto 20px;
  }

  #single-content-2022 p {
    font-size: 15px;
    font-size: 1.5rem;
    width: 100%;
    margin: 0 0 20px;
  }

  #single-content-2022 p.m--inline-links a {
    display: inline;
  }

  #single-content-2022 dl {
    width: 100%;
    margin: 0 auto 40px;
  }

  #single-content-2022 dl dt {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 auto 10px;
  }

  #single-content-2022 dl dd {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 auto 30px;
  }

  #single-content-2022 a {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 190%;
  }

  #single-content-2022 img {
    display: block;
    margin: 0px auto 10px;
    max-width: 100%;
  }

  #single-content-2022 p img {
    display: block;
    margin: 60px auto 10px;
    max-width: 100%;
  }

  #single-content-2022 .wp-caption {
    display: block;
    margin: auto;
    max-width: 100%;
  }

  #single-content-2022 .wp-caption img {
    display: block;
    margin: 10px auto 10px;
  }

  #single-content-2022 .wp-caption p {
    width: 100%;
    margin: 0 auto 35px;
  }

  #single-content-2022 img.column-thum {
    margin: 0 auto 40px;
    max-width: 100%;
  }

  #single-content-2022 .video-container {
    margin: 50px 0;
  }

  #single-content-2022 .video-container .video-2022 {
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
  }

  #single-content-2022 .video-container .video-2022 iframe {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  #single-content-2022 .wp-block-contact,
  #single-content-2022 .wp-block-officetour{
    padding:30px 30px;
    margin-bottom: 20px;
  }

  #single-content-2022 blockquote {
    width: 100%;
    padding: 30px;
    margin: 60px auto;
  }

  #single-content-2022 blockquote p {
    width: 90%;
    margin: 0 auto;
  }

  #single-content-2022 blockquote p::before {
    content: '';
    position: absolute;
    top: 0;
    left: -38px;
    background: url(../img/column/blockquote01.svg)no-repeat;
    background-size: cover;
    width: 28px;
    height: 24px;
  }

  #single-content-2022 blockquote p::after {
    content: '';
    position: absolute;
    right: -38px;
    bottom: 0;
    background: url(../img/column/blockquote02.svg)no-repeat;
    background-size: cover;
    width: 28px;
    height: 24px;
  }

  #single-content-2022 .table-wrapper-2022 {
    overflow: auto;
    white-space: nowrap;
  }

  #single-content-2022 table {
    width: 100%;
    max-width: initial;
    margin: 30px auto 30px;
  }

  .wp-block-table .has-fixed-layout {
    table-layout: inherit;
  }

  #single-content-2022 table tbody tr {
    text-align: center;
    width: 100%;
  }

  #single-content-2022 table tbody tr th {
    text-align: center;
    font-weight: 600;
    padding: 15px;
    width: 50% !important;
  }

  #single-content-2022 table tbody tr td {
    padding: 15px;
  }

  #single-content-2022 table tbody tr td:first-child {
    padding: 15px;
  }

  #single-content-2022 table ul, #single-content-2022 table ol {
    padding: 0px 0px 10px 30px;
    margin: 0px auto;
    max-width: 100%;
  }

  #single-content-2022 table ul li, #single-content-2022 table ol li {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 10px 0;
  }

  /*カラム*/
  #single-content-2022 .wp-block-columns {
    display: flex !important;
    max-width: 100%;
  }

  .single-share-list-2022 dt {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0px 0 30px;
    font-size: 16px;
    font-size: 1.6rem
  }

  .single-share-list-2022 dd ul li {
    margin: 0 8px;
    display: inline-block;
    vertical-align: middle
  }

  .wp-block-image figcaption {
    text-align: right;
    font-size: 14px;
    margin: 15px 0 30px;
    font-size: 1.4rem;
  }

  #single-content-2022 .eyecatch_caption {
    text-align: right;
    font-size: 14px;
    margin: -35px 0 30px;
    font-size: 1.4rem;
  }
}

@media (max-width:768px) {

  /*カラム*/
  #single-content-2022 .wp-block-columns {
    display: flex !important;
  }

  #single-content-2022 .wp-block-column img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
  }

  .single-column-footer article {
    display: block;
  }

  .single-column-footer .left-box-2022 {
    width: 150px;
    margin-bottom: 20px;
  }

  .single-column-footer .left-box-2022 img {
    width: 100%;
    height: auto;
  }

  .single-column-footer .right-box-2022 {
    width: 100%;
    padding-left: 0px;
  }

  .single-column-footer .author-name-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .author-prof-2022 {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .wp-block-image figcaption {
    text-align: right;
    font-size: 14px;
    margin: 15px 0 30px;
    font-size: 1.4rem;
  }

  #single-content-2022 .eyecatch_caption {
    text-align: right;
    font-size: 14px;
    margin: -30px 0 30px;
    font-size: 1.4rem;
  }

}

@media (max-width:640px) {

  /*カラム*/
  #single-content-2022 .wp-block-columns {
    display: block !important;
  }

  #single-content-2022 .wp-block-column img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
  }

  #single-content-2022 .wp-block-contact,
  #single-content-2022 .wp-block-officetour{
    padding:30px 20px;
  }
  #single-content-2022 .wp-block-contact p:nth-of-type(1),
  #single-content-2022 .wp-block-officetour p:nth-of-type(1){
    font-size:1.5rem;
  }
  #single-content-2022 .wp-block-contact p:nth-of-type(2),
  #single-content-2022 .wp-block-officetour p:nth-of-type(2){
    font-size: 1.4rem;
  }
  #single-content-2022 .wp-block-contact p:nth-of-type(3) a,
  #single-content-2022 .wp-block-officetour p:nth-of-type(3) a{
    width:100%;
    font-size:1.8rem;
  }
}

/*singleColumn-slide*/
#singleColumn-slide {
  color: #232734;
  background: #F1EBE6;
}

#singleColumn-slide .of-line-title-2022 {
  position: relative;
  margin-bottom: 50px;
}

#singleColumn-slide .of-line-title-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #232734;
}

#singleColumn-slide .of-line-title-2022::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 2px;
  background-color: #232734;
}

#singleColumn-slide .of-line-title-2022 h2 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  line-height: 150%;
  color: #232734;
  text-align: center;
  padding: 20px 0;
}

#singleColumn-slide .of-columnslide-title-2022 {
  font-size: 16px !important;
  font-size: 1.6rem !important;
  font-weight: 300;
  color: #232734;
  margin-top: 15px;
  text-align: left;
}

.swiper-single-column-area {
  margin: 0 auto;
  padding-bottom: 150px;
  overflow-x: hidden;
}

@media (max-width:768px) {
  #singleColumn-slide .of-line-title-2022 {
    position: relative;
    margin-bottom: 10px;
  }

  #singleColumn-slide .of-line-title-2022 h2 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 600;
    text-align: center;
    padding: 20px 0;
  }
}

/*swiper*/
.swiper-single-column .swiper-item a {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 63%;
  /*　トリミングしたい枠の高さ　*/
  z-index: 0;
}

.swiper-single-column .swiper-item a img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
}

.swiper-single-column .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  bottom: -100px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

.swiper-single-column .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  bottom: -100px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:992px) {
  #singleColumn-slide {
    color: #232734;
    background: #F1EBE6;
    margin-bottom: 40px;
  }

  .swiper-single-column-area {
    margin: 0 auto;
    padding-bottom: 100px;
    overflow-x: hidden;
  }

  .swiper-single-column .swiper-button-next {
    width: 30px !important;
    bottom: -50px !important;
    background-size: 30px;
  }

  .swiper-single-column .swiper-button-prev {
    width: 30px !important;
    bottom: -50px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:768px) {
  .swiper-single-column .swiper-button-next {
    width: 30px !important;
    bottom: -80px !important;
    background-size: 30px;
  }

  .swiper-single-column .swiper-button-prev {
    width: 30px !important;
    bottom: -80px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  .swiper-single-column .swiper-button-next {
    /*left:52%!important;*/
    bottom: -60px !important;
    background-size: 30px;
  }

  .swiper-single-column .swiper-button-prev {
    /*right:52%!important;*/
    bottom: -60px !important;
    background-size: 30px;
  }
}

/*singleColumn-list*/
#singleColumn-list {
  color: #232734;
  background: #F1EBE6;
  margin-bottom: 0px;
  padding: 80px 0 40px;
}

#singleColumn-list article a h2 {
  font-size: 16px;
  font-size: 1.6rem;
  color: #232734;
  line-height: 150%;
  margin-top: 10px;
}

@media (max-width:992px) {
  #singleColumn-list {
    color: #232734;
    background: #F1EBE6;
    margin-bottom: 40px;
  }

  #singleColumn-list article {
    width: 50%;
    padding-right: 10px;
    margin-bottom: 40px;
  }

  #singleColumn-list article:nth-child(even) {
    padding-right: 0px;
    padding-left: 10px;
  }
}

@media (max-width:768px) {
  #singleColumn-list {
    color: #232734;
    background: #F1EBE6;
    margin-bottom: 40px;
  }

  #singleColumn-list .flex-area-2022 {
    display: flex;
  }

  #singleColumn-list article {
    width: 50%;
    padding-right: 5px;
    margin-bottom: 40px;
  }

  #singleColumn-list article:nth-child(even) {
    padding-right: 0px;
    padding-left: 5px;
  }
}

/*--------------------*/
/*projectsページ*/
/*--------------------*/

.arc-projects-header {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 100px;
  overflow-x: hidden;
}

.page-2022 .arc-projects-header .projectsPickup-2022 {
  font-family: 'futura-pt', serif;
  font-size: 30px;
  font-size: 3.0rem;
  color: #164C6C;
}

.swiper-projects_pick-2022 {}

.swiper-projects_pick-2022 .swiper-item {}

.swiper-projects_pick-2022 h2 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  margin: 20px 0 10px;
}

.swiper-projects_pick-2022 p {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  padding-bottom: 20px;
}

/*swiper*/
.swiper-projects_pick-2022 .swiper-item a {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 63%;
  /*　トリミングしたい枠の高さ　*/
  z-index: 0;
}

.swiper-projects_pick-2022 .swiper-item a img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
}

.swiper-projects_pick-2022 .swiper-item .pin-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 70px;
  height: 28px;
  padding: 0px !important;
  background: #D32D2F;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}

.swiper-projects_pick-2022 .swiper-item .pin-btn span {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 100%;
  padding-left: 5px;
  margin-bottom: 1px;
}

.swiper-projects_pick-2022 .swiper-item .pin-btn img {
  position: relative;
  top: auto;
  left: auto;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  display: inline-block;
  width: 15px;
  height: 15px;
}

.swiper-projects_pick-2022 .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  bottom: -20px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

.swiper-projects_pick-2022 .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  bottom: -20px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:768px) {
  .swiper-projects_pick-2022 .swiper-button-next {
    width: 30px !important;
    bottom: -30px !important;
    background-size: 30px;
  }

  .swiper-projects_pick-2022 .swiper-button-prev {
    width: 30px !important;
    bottom: -30px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  .swiper-projects_pick-2022 .swiper-button-next {
    /*left:52%!important;*/
    bottom: -20px !important;
    background-size: 30px;
  }

  .swiper-projects_pick-2022 .swiper-button-prev {
    /*right:52%!important;*/
    bottom: -20px !important;
    background-size: 30px;
  }
}

/*メニュー*/
.projectsNavPc {
  margin: 0 auto 60px;
  padding-top: 30px;
  padding-bottom: 30px;
  max-width: 1000px;
}

.projectsNavPc .parents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
}

.projectsNavPc .parents li {
  width: 24%;
}

.projectsNavPc .parents li a {
  padding: 20px 15px;
  display: block;
  color: #232734;
  position: relative;
  background: #F2EDE2;
  transition: .5s ease;
}

.projectsNavPc .parents li a:hover {
  background: #ECDBCC;
  color: #fff;
  transition: .5s ease;
}

.projectsNavPc .parents li a.active {
  background: #ECDBCC;
  color: #fff;
}

.projectsNavPc .children {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  margin: 30px auto 0;
  padding: 20px 30px;
  background: #F1EBE6;
}

.projectsNavPc .children li {
  margin: 10px 10px 10px 0;
}

.projectsNavPc .children li:last-child {
  margin-right: 0px;
}

.projectsNavPc .children li a {
  padding: 10px 15px;
  display: block;
  color: #232734;
  position: relative;
  background: #fff;
  transition: .5s ease;
}

.projectsNavPc .children li a.active {
  background: #E6DDC7;
}

.projectsNavPc .children li a:hover {
  background: #ECDBCC;
  color: #fff;
}

.projectsNavPc .tag-List {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  margin: 0px auto 0;
  padding: 20px 30px;
  background: #F1EBE6;
}

.projectsNavPc .tag-List li {
  margin: 10px 10px 10px 0;
}

.projectsNavPc .tag-List li:last-child {
  margin-right: 0px;
}

.projectsNavPc .tag-List li a {
  font-size: 14px;
  font-size: 1.4rem;
  padding: 10px 15px;
  display: block;
  color: #164C6C;
  position: relative;
  background: #fff;
  transition: .5s ease;
}

.projectsNavPc .tag-List li.current-cat a {
  background: #ECDBCC;
}

.projectsNavPc .tag-List li a:hover {
  background: #ECDBCC;
  color: #164C6C;
}

/*アーカイブ*/
#archive-p {
  margin-top: -80px;
  padding-top: 80px;
}

#projectsContainer-2022 {
  margin-bottom: 100px;
}

#projectsContainer-2022 .flex-area-2022 {
  align-items: stretch;
  justify-content: space-between;
}

#projectsContainer-2022 .flex-area-2022::after {
  content: "";
  display: block;
  width: 31%;
  height: 0;
}

.projectsBox-2022 {
  width: 31.5%;
  margin-bottom: 100px;
}

#projectsContainer-2022 article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

#projectsContainer-2022 .link-block-2022 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 5;
}

.projectsColmImg-2022 {
  padding-top: 54.8%;
  position: relative;
}

.projectsColmImg-2022 img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.projectsColmhead-2022 {
  margin: 0;
}

.projectsColmmid-2022 {
  margin: 15px 0 0;
  min-height: 80px;
  position: relative;
}

.projectsColmmid-2022 h2 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 600;
  margin: auto 0px;
  color: #232734;
}

.projectsColmInfoInner-2022 {
  margin: 15px 0 0;
}

.projectsColmInfoInner-2022 p {
  font-weight: 300;
  color: #232734;
}

#projectsContainer-2022 .projectsCompany-2022 {
  padding-top: 15px;
  padding-bottom: 0px;
  text-align: left;
  font-weight: 400;
  color: #164C6C;
}

.projectsBox-2022 .arrow-box-blue {
  position: relative;
  text-align: center;
  margin: 30px 0 0;
  transition: all .5s;
}

.projectsBox-2022 .arrow-box-blue p {
  width: 100%;
  padding: 20px 25px;
}

/*arrow 2022 blue*/
.projectsBox-2022:hover .arrow-box-blue {
  text-align: center;
  transition: all .5s;
}

.projectsBox-2022:hover .arrow-box-blue p {
  background-color: #ECDBCC;
  color: #164C6C;
  transition: all .5s;
}

.projectsBox-2022:hover .arrow-box-blue p::before {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.projectsBox-2022:hover .arrow-box-blue p::after {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

@media (max-width:992px) {
  #projectsContainer-2022 .flex-area-2022::after {
    content: "";
    display: none;
  }

  .projectsBox-2022 {
    width: 100%;
    margin-bottom: 90px;
  }

  .projectsColmmid-2022 {
    margin: 15px 0 20px;
    min-height: initial;
    position: relative;
  }
}

@media (max-width:768px) {

  /*メニューリスト*/
  .projectsNavPc .parents {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
  }

  .projectsNavPc .parents li {
    width: 50%;
    margin-bottom: 8px;
    padding-right: 5px;
  }

  .projectsNavPc .parents li a {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .projectsNavPc .children li a {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .projectsNavPc .children {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    margin: 30px auto 0;
    padding: 20px 30px;
    max-width: 100%;
    background: #F1EBE6;
  }

  .projectsNavPc .tag-List {
    display: flex;
    margin: 30px auto 0;
    padding: 20px 30px;
    max-width: 100%;
  }

  /*アーカイブ*/
  .projectsColmmid-2022 h2 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0px;
  }
}

@media (max-width:640px) {
  .projectsNavPc .parents {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .projectsNavPc .parents li {
    width: 80%;
    margin-bottom: 8px;
    padding-right: 5px;
  }
}

/*projects singleページ*/
#singleProject-2022 {
  margin-bottom: 0px;
}

/*header*/
.project-mv-2022 {
  margin-bottom: 60px;
  height: 820px;
  position: relative;
}

.singleProjectTitle-2022 {
  position: absolute;
  bottom: 60px;
  left: 50%;
  -webkit-transform: translatex(-50%);
  transform: translatex(-50%);
  width: 82%;
  max-width: 1600px;
  color: #fff;
  z-index: 1;
}

.singleProjectTitle-2022 h1 {
  margin-bottom: 10px;
  font-size: 40px;
  font-size: 4rem;
  font-weight: 600;
}

.singleProjectTitle p {
  color: #fff;
  z-index: 1;
}

.projectCompanyName-2022 {
  font-size: 22px;
  font-size: 2.2rem;
  margin-top: 15px;
}

.projectShadow-2022 {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.projectShadow-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0, transparent 30%, transparent 70%, rgba(68, 68, 68, 0.8) 100%);
}

.projectShadow-2022 img {
  width: 100%;
  max-width: initial;
}

@media (max-width:992px) {
  .singleProjectTitle-2022 h1 {
    font-size: 33px;
    font-size: 3.3rem;
  }
}

@media (max-width:768px) {
  .project-mv-2022 {
    height: 600px;
    margin-bottom: 50px;
  }

  .singleProjectTitle-2022 {
    position: absolute;
    bottom: 80px;
  }

  .singleProjectTitle-2022 h1 {
    font-size: 28px;
    font-size: 2.8rem;
  }

  .projectCompanyName-2022 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .projectShadow-2022::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0, transparent 30%, transparent 50%, rgba(68, 68, 68, 0.8) 100%);
  }
}

@media (max-width:640px) {
  .singleProjectTitle-2022 {
    left: 50%;
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
    width: 90%;
  }

  .singleProjectTitle-2022 h1 {
    font-size: 24px;
    font-size: 2.4rem;
  }

  .projectCompanyName-2022 {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

/*main*/
.singleProject-txt-2022 {
  margin: 0 0 60px;
}

.singleProject-info-2022 {
  background: #F1EBE6;
  padding: 60px 0;
  margin: 0 0 80px;
}

.info-header-2022 {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 100px 30px;
}

.info-header-2022::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 100px;
  border-bottom: 1px solid #707070;
}

.info-header-2022 .flex-area-2022 {
  align-items: stretch;
}

.CompanyInfo-2022 {
  width: 50%;
}

.CompanyInfo-2022 li {
  padding: 8px 0;
  line-height: 150%;
}

.CompanyInfo-2022 li a {
  color: #164C6C;
  margin-right: 10px;
}

.CompanyInfo-2022 li span {
  font-weight: 500;
}

.CompanyInfo-2022 li h2 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 150%;
  padding: 0px 0 15px;
}

.projectPartList-2022 {
  width: 50%;
}

.projectPartList-2022 li {
  padding: 8px 0;
  margin-left: 20px;
  line-height: 150%;
}

.projectPartList-2022 li::before {
  content: '⚫︎';
  margin-left: -20px;
}

.projectPartList-2022 li:first-child {
  margin-left: 0px;
}

.projectPartList-2022 li:first-child::before {
  content: none;
  margin-left: -15px;
}

.projectPartList-2022 li h2 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 150%;
  padding: 0px 0 15px;
}

.info-footer-2022 {
  width: 100%;
  margin: 0 auto;
  padding: 30px 100px 0;
}

.info-footer-2022 .CompanyInfo-2022 {
  width: 100%;
}

.singleProject-movie-2022 {
  max-width: 80%;
  margin: 0 auto 120px;
}

@media (max-width:768px) {
  .singleProject-txt-2022 {
    margin: 0 0 60px;
  }

  .singleProject-info-2022 {
    background: #F1EBE6;
    padding: 40px 0;
    margin: 0 0 40px;
  }

  .info-header-2022 {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px 30px;
  }

  .info-header-2022::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0px 15px;
    border-bottom: 1px solid #707070;
  }

  .CompanyInfo-2022 li h2 {
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 150%;
    padding: 0px 0 5px;
  }

  .info-footer-2022 {
    width: 100%;
    margin: 0 auto;
    padding: 30px 15px 0;
  }

  .projectPartList-2022 li h2 {
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 600;
    padding: 0px 0 5px;
  }

  .singleProject-movie-2022 {
    max-width: 100%;
    margin: 0 auto 50px;
  }

  .CompanyInfo-2022 {
    width: 100%;
    margin-bottom: 20px;
  }

  .projectPartList-2022 {
    width: 100%;
  }

  .projectPartList-2022 li {
    padding: 8px 0;
    margin-left: 16px;
  }

  .projectPartList-2022 li::before {
    content: '・';
    margin-left: -16px;
  }

  .CompanyInfo-2022 li h2 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .projectPartList-2022 li h2 {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

/*Feature*/
.projectsFeature-2022 {
  padding: 80px 0;
}

.projectsFeature-header {
  margin-top: 100px;
  padding-bottom: 10px;
  border-bottom: 1px solid #484848;
}

.projectsFeature-header:first-child {
  margin-top: 0;
}

.projectsFeature-header .feature-title-2022 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
}

.projectsFeature-body {
  margin: 0px auto;
}

.projectsFeature-body .box80-2022 {
  max-width: 80%;
  margin: 80px auto;
}

.projectsFeature-body .box80-2022 p {
  margin-top: 10px;
  text-align: left;
}

.projectsFeature-body .flex-area-2022 {
  align-items: stretch;
  justify-content: space-between;
  margin: 80px auto;
}

.projectsFeature-body .flex-2022 {
  justify-content: space-between;
  margin: 80px auto;
}

.projectsFeature-body .flex-area-2022.ver-2022 {
  justify-content: center;
  margin: 80px auto;
}

.projectsFeature-body .box2c-2022 {
  width: 48%;
}

.projectsFeature-body .box3c-2022 {
  width: 32%;
}

.projectsFeature-body .box3c-2022 p {
  margin-top: 10px;
  text-align: left;
}

.projectsFeature-body .box2c-2022 p {
  margin-top: 10px;
  text-align: left;
}

.projectsFeature-body .box3c-2022 .ver-txt2022 p {
  margin-top: 0px;
  text-align: left;
}

.projectsFeature-body .ver-2022 .box2c-2022 {
  width: 38%;
  padding-right: 20px;
}

.projectsFeature-body .ver-2022 .box2c-2022:nth-child(2) {
  padding-right: 0px;
  padding-left: 20px;
}

.projectsFeature-body .ver-2022 .box3c-2022 {
  width: 28%;
}

.projectsFeature-body .ver-2022 .box3c-2022:nth-child(1) {
  padding-right: 16px;
}

.projectsFeature-body .ver-2022 .box3c-2022:nth-child(2) {
  padding: 0 8px;
}

.projectsFeature-body .ver-2022 .box3c-2022:nth-child(3) {
  padding-left: 16px;
}

.projectsFeature-body .box2c-2022.ver-img2022 {
  width: 48%;
}

.projectsFeature-body .box2c-2022.ver-img2022 img {
  width: 80%;
}

.projectsFeature-body .box2c-2022.ver-img2022.left-2022 img, .projectsFeature-body .box2c-2022.ver-img2022.left-2022 p {
  width: 80%;
  margin-left: auto;
  display: block;
}

.projectsFeature-body .box2c-2022.ver-txt2022 {
  width: 48%;
}

.sp-order1 {
  order: 2;
}

.sp-order2 {
  order: 1;
}

.projectsFeature-footer {
  margin: 40px auto;
  padding: 0px;
  max-width: 80%;
}

.projectsFeature-footer:last-child {
  padding: 0 0 80px;
}

.projectsFeature-footer .youtube-2022 {
  margin: 0px auto 60px;
}

.projectsFeature-footer p {
  padding: 0px;
}

@media (max-width:992px) {}

@media (max-width:768px) {
  .projectsFeature-header .feature-title-2022 {
    font-size: 25px;
    font-size: 2.5rem;
  }

  .projectsFeature-body .flex-area-2022 {
    align-items: stretch;
    justify-content: space-between;
    margin: 40px auto;
  }

  .projectsFeature-body .flex-area-2022.ver-2022 {
    justify-content: center;
    margin: 40px auto;
  }

  .projectsFeature-body .box80-2022 {
    max-width: 100%;
    margin: 40px 0;
  }

  .projectsFeature-body .box2c-2022 {
    width: 100%;
    margin: 40px 0;
  }

  .projectsFeature-body .box2c-2022.m-0 {
    width: 100%;
    margin-bottom: 0px;
  }

  .projectsFeature-body .box3c-2022 {
    width: 100%;
    margin: 40px 0;
  }

  .projectsFeature-body .box3c-2022 p, .projectsFeature-body .box2c-2022 p {
    margin-top: 10px;
    text-align: left;
  }

  .projectsFeature-body .ver-2022 .box3c-2022 p, .projectsFeature-body .ver-2022 .box2c-2022 p {
    margin-top: 10px;
    text-align: center;
  }

  .projectsFeature-body .ver-2022 .box2c-2022 {
    width: 100%;
    padding-right: 0px;
  }

  .projectsFeature-body .ver-2022 .box2c-2022 img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }

  .projectsFeature-body .ver-2022 .box2c-2022 .vertical-2022.acf-img-2022 {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 0%;
  }

  .projectsFeature-body .ver-2022 .box2c-2022 .vertical-2022.acf-img-2022 img {
    position: static;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    width: auto;
    height: 100%;
    object-fit: none;
  }

  .projectsFeature-body .ver-2022 .box2c-2022:nth-child(2) {
    padding-right: 0px;
    padding-left: 0px;
  }

  .projectsFeature-body .ver-2022 .box2c-2022 {
    width: 100%;
    padding-right: 0px;
  }

  .projectsFeature-body .ver-2022 .box2c-2022:nth-child(2) {
    padding-right: 0px;
    padding-left: 0px;
  }

  .projectsFeature-body .ver-2022 .box3c-2022 {
    width: 100%;
  }

  .projectsFeature-body .ver-2022 .box3c-2022 img {
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }

  .projectsFeature-body .ver-2022 .box3c-2022:nth-child(1) {
    padding-right: 0;
  }

  .projectsFeature-body .ver-2022 .box3c-2022:nth-child(2) {
    padding: 0;
  }

  .projectsFeature-body .ver-2022 .box3c-2022:nth-child(3) {
    padding-left: 0;
  }

  .projectsFeature-body .box2c-2022.ver-img2022 {
    width: 80%;
    margin: 0 auto;
  }

  .projectsFeature-body .box2c-2022.ver-img2022 img {
    width: 100%;
    margin: 0;
  }

  .projectsFeature-body .box2c-2022.ver-img2022.left-2022 img, .projectsFeature-body .box2c-2022.ver-img2022.left-2022 p {
    width: 100%;
    margin: 0 auto;
    display: block;
  }

  .projectsFeature-body .box2c-2022.ver-txt2022 {
    width: 100%;
    margin: 0px auto;
  }

  .projectsFeature-body .flex-2022 {
    justify-content: space-between;
    margin: 40px auto;
  }

  .projectsFeature-body .flex-2022 .box2c-2022 {
    width: 100%;
    margin: 0px;
  }

  .projectsFeature-body .flex-2022 .left-2022.box2c-2022 p, .projectsFeature-body .flex-2022 .box2c-2022.sp-order1 p {
    margin: 10px 0 20px;
    text-align: left;
  }

  .sp-order1 {
    order: 1;
  }

  .sp-order2 {
    order: 2;
  }

  .projectsFeature-footer .youtube-2022 {
    margin: 40px auto;
    max-width: 100%;
  }
}

@media (max-width:540px) {
  .projectsFeature-header .feature-title-2022 {
    font-size: 22px;
    font-size: 2.2rem;
  }
}

/*swiper*/
.swiper-area-2022 {
  padding: 0px 0 40px;
  margin: 40px 0;
}

.swiper-projects_colum3-2022 p, .swiper-projects_colum3v-2022 p {
  margin-top: 10px;
}

.swiper-projects_colum3v-2022 p {
  text-align: center;
}

.swiper-projects_colum3-2022 .swiper-button-next, .swiper-projects_colum3v-2022 .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  bottom: -60px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

.swiper-projects_colum3-2022 .swiper-button-prev, .swiper-projects_colum3v-2022 .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  bottom: -60px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:768px) {
  .swiper-single-projects .swiper-button-next {
    width: 30px !important;
    bottom: -60px !important;
    background-size: 30px;
  }

  .swiper-single-projects .swiper-button-prev {
    width: 30px !important;
    bottom: -60px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  .swiper-single-projects .swiper-button-next {
    /*left:52%!important;*/
    bottom: -50px !important;
    background-size: 30px;
  }

  .swiper-single-projects .swiper-button-prev {
    /*right:52%!important;*/
    bottom: -50px !important;
    background-size: 30px;
  }
}

/*photo*/
/*swiper*/
/*.swiper-single-photo .swiper-item{display: block;position: relative;width:100%;height:0;overflow: hidden;padding-top: 63%;z-index:0;}
.swiper-single-photo .swiper-item img{position: absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: auto; height: 100%;object-fit:cover;z-index:5;}*/
.swiper-single-photo {}

.swiper-single-photo .swiper-slide {
  width: fit-content !important;
}

.swiper-single-photo .swiper-item {
  display: block;
  position: relative;
  overflow: hidden;
  ;
  z-index: 0;
}

.swiper-single-photo .swiper-item img {
  width: auto;
  height: 250px;
  object-fit: cover;
  z-index: 5;
}

.swiper-single-photo .swiper-slide p {
  text-align: center;
  margin-top: 5px;
}

.swiper-single-photo .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  bottom: -100px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

.swiper-single-photo .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  bottom: -100px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:992px) {
  .swiper-single-photo .swiper-slide {
    width: 100% !important;
  }

  .swiper-single-photo .swiper-item {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 63%;
    z-index: 0;
  }

  .swiper-single-photo .swiper-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    object-fit: cover;
    z-index: 5;
  }

  .swiper-single-photo-area {
    margin: 0 auto;
    padding-bottom: 100px;
    overflow-x: hidden;
  }

  .swiper-single-photo .swiper-button-next {
    width: 30px !important;
    bottom: -50px !important;
    background-size: 30px;
  }

  .swiper-single-photo .swiper-button-prev {
    width: 30px !important;
    bottom: -50px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:768px) {
  .swiper-single-photo .swiper-button-next {
    width: 30px !important;
    bottom: -80px !important;
    background-size: 30px;
  }

  .swiper-single-photo .swiper-button-prev {
    width: 30px !important;
    bottom: -80px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  .swiper-single-photo .swiper-button-next {
    /*left:52%!important;*/
    bottom: -60px !important;
    background-size: 30px;
  }

  .swiper-single-photo .swiper-button-prev {
    /*right:52%!important;*/
    bottom: -60px !important;
    background-size: 30px;
  }
}

/*Voice Costomer*/
#singleProject-costomer-2022 {
  background: #F2EDE2;
}

#singleProject-costomer-2022 .costomer-movie-2022 {
  max-width: 80%;
  margin: 0 auto 60px;
}

#singleProject-costomer-2022 .costomer-btxt-2022 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 500;
  max-width: 90%;
  margin: 0 auto;
  padding: 0 0 20px;
}

#singleProject-costomer-2022 .costomer-txt-2022 {
  max-width: 90%;
  margin: 0 auto;
  padding: 0 0 60px;
}

@media (max-width:768px) {
  #singleProject-costomer-2022 .costomer-btxt-2022 {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

/*voice*/
#singleProjectSide {
  background: #fff;
  padding: 80px 0;
}

.page-2022 #singleProjectSide h2 {
  padding-top: 0px;
  border-top: 0px solid #d1d2d2;
}

#singleProjectVoice-2022 {
  margin: 0 auto;
  width: 920px;
  max-width: 100%;
}

#singleProjectVoice-2022.flex-area-2022 {
  align-items: stretch;
}

.page-2022 .singleProjectVoiceBox {
  margin-bottom: 80px;
  margin-right: 0;
  width: calc(50% - 30px);
  font-family: "Noto Sans JP", serif;
  position: relative;
}

.page-2022 .singleProjectVoiceBox:first-child {
  margin-right: 30px;
}

.page-2022 .singleProjectVoiceBox:last-child {
  margin-left: 30px;
}

.singleProjectVoiceBox h1 {
  margin-bottom: 15px;
  font-size: 16px;
  font-size: 1.6rem;
  padding-left: 40px;
}

.singleProjectVoiceBox p {
  font-size: 14px;
  font-size: 1.4rem;
  padding-left: 40px;
}

.singleProjectVoiceBox figure {
  margin-bottom: 50px;
  padding-left: 40px;
  position: relative;
}

.singleProjectVoiceBox figure span {
  position: relative;
  display: block;
  padding-top: 65.7142857143%;
}

.singleProjectVoiceBox figure span img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.page-2022 .singleProjectVoiceBox figcaption {
  /*position: absolute;
    top: 0;
    left: 0;
	bottom:0;
	color:#707070;
	width:1px;
	z-index:5;*/
}

.page-2022 .singleProjectVoiceBox figcaption span {
  position: absolute;
  top: 0;
  left: 20px;
  transform-origin: top left;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  font-family: 'futura-pt', serif;
  font-size: 20px;
  color: #707070;
  line-height: 40px;
  background: #fff;
  display: inline-block;
  padding-right: 10px;
}

.page-2022 .singleProjectVoiceBox figcaption::before {
  content: '';
  width: 1px;
  background: #707070;
  position: absolute;
  top: 0;
  bottom: 0px;
  left: 0;
  z-index: -10;
}

.page-2022 .singleProjectVoiceBox figure span:after {
  content: '';
  width: 0;
  height: 0;
  background: none;
  position: absolute;
  bottom: -15px;
  right: -15px;
}

@media (max-width:768px) {
  .page-2022 .singleProjectVoiceBox {
    margin-bottom: 80px;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    padding-right: 0px;
    font-family: "Noto Sans JP", serif;
  }

  .page-2022 .singleProjectVoiceBox:first-child {
    margin-right: auto;
  }

  .page-2022 .singleProjectVoiceBox:last-child {
    margin-left: auto;
    margin-bottom: 0px;
  }

  .singleProjectVoiceBox h1 {
    margin-bottom: 15px;
    font-size: 16px;
    font-size: 1.6rem;
    padding-left: 25px;
  }

  .singleProjectVoiceBox p {
    font-size: 14px;
    font-size: 1.4rem;
    padding-left: 25px;
  }

  .singleProjectVoiceBox figure {
    margin-bottom: 50px;
    padding-left: 25px;
    position: relative;
  }

  .page-2022 .singleProjectVoiceBox figcaption span {
    font-size: 16px;
    color: #707070;
    line-height: 40px;
    background: #fff;
    display: inline-block;
    padding-right: 10px;
  }
}

@media (max-width:640px) {
  .singleProjectVoiceBox h1 {
    margin-bottom: 15px;
    font-size: 16px;
    font-size: 1.6rem;
    padding-left: 25px;
  }

  .singleProjectVoiceBox p {
    font-size: 14px;
    font-size: 1.4rem;
    padding-left: 25px;
  }

  .singleProjectVoiceBox figure {
    margin-bottom: 50px;
    padding-left: 25px;
  }
}

/*singleProjects-slide*/
#singleProjects-slide {
  color: #fff;
  background: #232734;
}

#singleProjects-slide .of-line-title-2022 {
  position: relative;
  margin-bottom: 50px;
}

#singleProjects-slide .of-line-title-2022::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #fff;
}

#singleProjects-slide .of-line-title-2022::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 2px;
  background-color: #fff;
}

#singleProjects-slide .of-line-title-2022 h2 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  line-height: 150%;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

#singleProjects-slide .of-projectsslide-title-2022 {
  font-size: 16px !important;
  font-size: 1.6rem !important;
  font-weight: 300;
  color: #fff;
  margin-top: 15px;
  text-align: center;
}

.swiper-single-projects-area {
  margin: 0 auto;
  padding-bottom: 150px;
  overflow-x: hidden;
}

@media (max-width:768px) {
  #singleProjects-slide .of-line-title-2022 {
    position: relative;
    margin-bottom: 10px;
  }

  #singleProjects-slide .of-line-title-2022 h2 {
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 600;
    text-align: center;
    padding: 20px 0;
  }
}

/*swiper*/
.swiper-single-projects .swiper-item a {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 63%;
  /*　トリミングしたい枠の高さ　*/
  z-index: 0;
}

.swiper-single-projects .swiper-item a img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
}

.swiper-single-projects .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  bottom: -100px !important;
  background-image: url(../img/top/swipe-next_wh.svg);
  background-size: 35px;
  outline: none;
}

.swiper-single-projects .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  bottom: -100px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev_wh.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:992px) {
  .swiper-single-projects-area {
    margin: 0 auto;
    padding-bottom: 100px;
    overflow-x: hidden;
  }

  .swiper-single-projects .swiper-button-next {
    width: 30px !important;
    bottom: -50px !important;
    background-size: 30px;
  }

  .swiper-single-projects .swiper-button-prev {
    width: 30px !important;
    bottom: -50px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:768px) {
  .swiper-single-projects .swiper-button-next {
    width: 30px !important;
    bottom: -80px !important;
    background-size: 30px;
  }

  .swiper-single-projects .swiper-button-prev {
    width: 30px !important;
    bottom: -80px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  .swiper-single-projects .swiper-button-next {
    /*left:52%!important;*/
    bottom: -60px !important;
    background-size: 30px;
  }

  .swiper-single-projects .swiper-button-prev {
    /*right:52%!important;*/
    bottom: -60px !important;
    background-size: 30px;
  }
}

/*singleProjects-back-2022*/
.singleProjects-back-2022 {
  text-align: center;
  margin: 60px 0;
}

/*オフィス家具*/

.mv-furniturebg-2022 {
  position: relative;
  background: url(../img/office_furniture/sofa_chair.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.mv-sustainabilitybg-2022 {
  position: relative;
  background: url(../img/sustainability/sustainability_mv.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.mv-oftransfer {
  position: relative;
  background: url(../img/of-transfer/of_transfer_bg.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.mv-capcellbg-2022 {
  position: relative;
  background: url(../img/capcell/sofa_desk_green.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.mv-officebg-2022 {
  position: relative;
  background: url(../img/officetour/sofa_table_chair.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.mv-woodofficebg {
  position: relative;
  background: url(../img/woodoffice/wood_mv.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.mv-freebg-2022 {
  position: relative;
  background: url(../img/free/desk_chair_sofa_mv.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.mv-degibg-2022 {
  position: relative;
  background: url(../img/digital/digital_bg.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.mv-ofprojects-2022 {
  position: relative;
  background: url(../img/of-projects/of_projects_bg.jpg)no-repeat center center;
  background-size: cover;
  height: 660px;
  padding: 80px 0;
}

.bg-overblack-2022 {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .2);
  z-index: 1;
}

.capcell-page .bg-overblack-2022 {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .44);
  z-index: 1;
}

.mv-overarea-2022 {
  padding: 20px 0 0;
}

.mv-overarea-2022 .mv-toptxt-2022 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  z-index: 5;
  padding: 0;
  width: 82%;
}

.mv-overarea-2022 .mv-toptxt-2022 h1 {
  margin: 0px;
  font-size: 50px;
  font-size: 5.0rem;
  font-weight: 400;
  text-align: center;
  line-height: 150%;
  color: #fff;
}

.mv-officebg-2022 .mv-box-2022 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  z-index: 5;
  padding: 0;
  width: 82%;
}

.mv-officebg-2022 .mv-box-2022 .title01-2022 {
  color: #fff;
}

.mv-overarea-2022 .mv-toptxt-2022 .mv-topsubtxt-2022 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  text-align: center;
  margin: 25px 0 0;
  color: #fff;
}

.mv-overarea-2022 .mv-toptxt-2022 p {
  font-size: 2.0rem;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
  padding: 40px 0 0;
  margin: 0;
  color: #fff;
  width: 100%;
}

.mv-overarea-2022 .mv-toptxt-2022 img {
  width: 100%;
  max-width: 160px;
  height: auto;
  text-align: center;
  margin: 0px auto;
  display: block;
}

.mv-furniture-sp-2022 {
  background: #F2EDE2;
}

@media (max-width:992px) {
  .mv-overarea-2022 .mv-toptxt-2022 h1 {
    font-size: 4.0rem;
  }
}

@media (max-width:768px) {
  .mv-furniturebg-2022 {
    position: relative;
    background: url(../img/office_furniture/sofa_chair_sp.jpg)no-repeat center center;
    background-size: cover;
    height: 450px;
    padding: 0;
  }

  .mv-sustainabilitybg-2022 {
    position: relative;
    background: url(../img/sustainability/sustainability_mv_sp.jpg) no-repeat right/cover !important;
    height: 450px !important;
    padding: 0;
  }

  .mv-oftransfer {
    position: relative;
    background: url(../img/of-transfer/of_transfer_bg_sp.jpg) no-repeat right/cover !important;
    height: 450px !important;
    padding: 0;
  }

  .mv-capcellbg-2022 {
    position: relative;
    background: url(../img/capcell/monitor_desk_sofa_sp.jpg)no-repeat center center;
    background-size: cover;
    height: 450px;
    padding: 0;
  }

  .mv-officebg-2022 {
    position: relative;
    background: url(../img/officetour/sofa_table_chair_sp.jpg)no-repeat center center;
    background-size: cover;
    height: 450px;
    padding: 0px 0;
  }

  .mv-freebg-2022 {
    position: relative;
    background: url(../img/free/desk_chair_mv_sp.jpg)no-repeat center center;
    background-size: cover;
    height: 450px;
    padding: 0;
  }

  .mv-degibg-2022 {
    position: relative;
    background: url(../img/digital/digital_bg_sp.jpg)no-repeat right/cover;
    height: 450px;
    padding: 0;
  }

  .mv-overarea-2022 {
    padding: 30px 0 0;
  }

  .mv-overarea-2022 .mv-toptxt-2022 {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    z-index: 5;
    padding: 0;
    width: 85%;
  }

  .mv-officebg-2022 .mv-box-2022 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    z-index: 5;
    padding: 0;
    width: 82%;
  }

  .mv-capcell-sp-2022 .mv-overarea-2022 .mv-toptxt-2022, .mv-free-sp-2022 .mv-overarea-2022 .mv-toptxt-2022, .mv-degi-sp-2022 .mv-overarea-2022 .mv-toptxt-2022, .mv-furniture-sp-2022 .mv-overarea-2022 .mv-toptxt-2022 {
    position: relative;
    top: 0;
    left: 0;
    transform: translateY(0%) translateX(0%);
    -webkit-transform: translateY(0%) translateX(0%);
    z-index: 5;
    padding: 0;
    width: 100%;
  }

  .mv-overarea-2022 .mv-toptxt-2022 h1 {
    font-size: 26px;
    font-size: 2.6rem;
  }

  .mv-overarea-2022 .mv-toptxt-2022 .mv-topsubtxt-2022 {
    font-size: 21px;
    font-size: 2.1rem;
    text-align: left;
    margin: 0px;
    color: #232734;
  }

  .mv-overarea-2022 .mv-toptxt-2022 p {
    font-size: 1.6rem;
    font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding: 30px 0 0;
  }

  .mv-sustainabilitybg-2022 .mv-overarea-2022 .mv-toptxt-2022 p, .mv-freebg-2022 .mv-overarea-2022 .mv-toptxt-2022 p, .mv-degibg-2022 .mv-overarea-2022 .mv-toptxt-2022 p {
    color: #fff;
    text-align: center;
  }
}


/*オフィス家具 main*/
#of-furniture-2022 .of-line-title-2022 {
  position: relative;
  margin-bottom: 40px;
}

.of-furniture-wrapper-2022 .flex-area-2022 {
  margin: 40px 0 120px;
}

.of-furniture-wrapper-2022 .left-ibox-2022, .of-furniture-wrapper-2022 .right-ibox-2022 {
  width: 50%;
}

.of-furniture-wrapper-2022 .left-box-2022, .of-furniture-wrapper-2022 .right-box-2022 {
  width: 50%;
}

.of-furniture-wrapper-2022 .left-box-2022 .common-box {
  width: 100%;
  max-width: 800px;
  padding-right: 15%;
  padding-left: 18%;
  margin-left: auto;
}

.of-furniture-wrapper-2022 .right-box-2022 .common-box {
  width: 100%;
  max-width: 800px;
  padding-right: 18%;
  padding-left: 15%;
}

.of-furniture-wrapper-2022 .deco-num {
  font-family: 'futura-pt', serif;
  font-size: 45px;
  font-size: 4.5rem;
  margin-bottom: 0;
  text-align: left;
}

.of-furniture-wrapper-2022 .of-furniture-title {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  margin: 15px 0 25px;
  line-height: 175%;
  text-align: left;
}

.of-furniture-wrapper-2022 .of-furniture-txt {
  line-height: 200%;
  text-align: left;
}

.of-furniture-wrapper-2022 .of-furniture-sup {
  font-size: 14px;
  font-size: 1.4rem;
  color: #6A6565;
  line-height: 200%;
  margin-top: 15px;
  margin-left: 15px;
  text-align: left;
}

.of-furniture-wrapper-2022 .of-furniture-sup::before {
  content: '※';
  margin-left: -15px;
}

.of-furniture-wrapper-2022 .arrow-box-blue {
  position: relative;
  text-align: left;
  margin: 50px 0 0;
  transition: all .5s;
}

.furniture-page #top-products {
  background: #F1EBE6;
}


@media (max-width:1000px) {
  .mv-furniturebg-2022 .mv-overarea-2022 .mv-toptxt-2022 p {
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 300;
    text-align: left;
    padding: 40px 0 0;
    color: #fff;
  }

  .of-furniture-wrapper-2022 .flex-area-2022 {
    margin: 80px 0;
  }

  .of-furniture-wrapper-2022 .left-ibox-2022, .of-furniture-wrapper-2022 .right-ibox-2022 {
    width: 100%;
  }

  .of-furniture-wrapper-2022 .left-box-2022, .of-furniture-wrapper-2022 .right-box-2022 {
    width: 100%;
  }

  .of-furniture-wrapper-2022 .left-box-2022 .common-box {
    width: 100%;
    max-width: initial;
    padding-right: 30px;
    padding-left: 30px;
  }

  .of-furniture-wrapper-2022 .right-box-2022 .common-box {
    width: 100%;
    max-width: initial;
    padding-right: 30px;
    padding-left: 30px;
  }

  .of-furniture-wrapper-2022 .deco-num {
    margin: 25px 0 0;
  }

  .furniture-page #top-coordinate {
    margin-top: 0px;
  }
}

@media (max-width:768px) {
  .mv-furniturebg-2022 .mv-overarea-2022 .mv-toptxt-2022 p {
    font-size: 18px;
    font-size: 1.8rem;
    padding: 20px 0 0;
    text-align: center;
  }

  .of-furniture-wrapper-2022 .left-box-2022 .common-box {
    width: 100%;
    max-width: initial;
    padding-right: 15px;
    padding-left: 15px;
  }

  .of-furniture-wrapper-2022 .right-box-2022 .common-box {
    width: 100%;
    max-width: initial;
    padding-right: 15px;
    padding-left: 15px;
  }

  .of-furniture-wrapper-2022 .deco-num {
    font-size: 40px;
    font-size: 4.0rem;
    margin: 25px 0 0;
  }

  .of-furniture-wrapper-2022 .of-furniture-title {
    font-size: 20px;
    font-size: 2.1rem;
    margin: 20px 0 15px;
  }

  .of-furniture-wrapper-2022 .arrow-box-blue p {
    width: 100%;
  }
}

@media (max-width:640px) {
  .mv-furniturebg-2022 .mv-overarea-2022 .mv-toptxt-2022 p {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

/*SDGs main*/
.of-sustainabilitybg {
  padding: 80px 0;
  height: 460px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 150px;
}

.of-sustainabilitybg.bg1-2022 {
  background-image: url(../img/sustainability/material_bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
  background-color: rgba(43, 48, 72, .5);
}

.of-sustainabilitybg.bg2-2022 {
  background-image: url(../img/sustainability/manufacture_bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
  background-color: rgba(43, 48, 72, .5);
}

.of-sustainabilitybg.bg3-2022 {
  background-image: url(../img/sustainability/office_bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
  background-color: rgba(43, 48, 72, .5);
}

@media (max-width:992px) {
  .of-sustainabilitybg {
    margin-top: 30px;
  }
}


@media (max-width:768px) {
  .of-sustainabilitybg {
    padding: 40px 0;
    width: 100%;
    height: 200px;
    position: relative;
    display: block;
    margin-top: 0;
  }
}

@media (max-width:576px) {
  .of-sustainabilitybg {
    height: 150px;
  }
}

.sustainability-page .sustainability-title30 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  color: #333;
  line-height: 175%;
}

.sustainability-page .sustainability-title22 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 600;
  color: #333;
  line-height: 175%;
  margin: 0 0 30px;
}

.sustainability-page .sustainability-title18 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  line-height: 175%;
}

.flex-area-2022 .sustainability-33:last-child {
  margin-bottom: 0;
}

.sustainability-page .sustainability-txt {
  text-align: left;
}

.bottomMenu2022 {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50px;
  z-index: 5;
  width: 82%;
  max-width: 1200px;
  margin: 0 auto;
}

.bottomMenu2022 a {
  position: relative;
  width: 33.333333%;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 150%;
  text-align: center;
  color: #164C6C;
  background-color: #fff;
  padding: 20px 15px 50px;
}

.bottomMenu2022 a:nth-child(2) {
  margin: 0 3px;
}

.bottomMenu2022 a::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%)rotate(45deg);
  -ms-transform: translateX(-50%)rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-bottom: 2px solid #164C6C;
  border-right: 2px solid #164C6C;
  transition: all .5s;
}

.bottomMenu2022 a:hover::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%)rotate(45deg);
  -ms-transform: translateX(-50%)rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
}

#of-sustainability01-2022, #of-sustainability02-2022, #of-sustainability03-2022 {
  padding-top: 100px;
  margin-top: -100px;
}

@media (max-width:768px) {
  .sustainability-page .sustainability-title22 {
    text-align: center;
    margin: 40px 0 30px;
    font-size: 1.8rem;
  }

  .bottomMenu2022 a:nth-child(2) {
    margin: 0;
  }

  .bottomMenu2022 {
    display: block;
    width: 500px;
    position: relative;
    bottom: 0;
    margin: 0px auto;
    padding: 20px 0;
  }

  .bottomMenu2022 a {
    width: 100%;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 400;
    color: #164C6C;
    background-color: #fff;
    padding: 20px 0 40px 0;
    display: block;
  }

  .bottomMenu2022 a:nth-child(2) {
    border-left: 0px solid #D5D5D5;
    border-right: 0px solid #D5D5D5;
    border-top: 3px solid #D5D5D5;
    border-bottom: 3px solid #D5D5D5;
  }

  #of-sustainability01-2022, #of-sustainability02-2022, #of-sustainability03-2022 {
    padding-top: 120px;
    margin-top: -120px;
  }
}

@media (max-width:640px) {
  .bottomMenu2022 {
    display: block;
    width: 300px;
  }
}

/*.sustainability-top*/
.sustainability-top {
  padding-top: 0;
}

.sustainability-top .container-2022 {
  max-width: 1000px;
}

.sustainability-top .sustainability-title30 {
  text-align: center;
}

.sustainability-top .sustainability-title22 {
  color: #164C6C;
}

.sustainability-top .txt-2022 {
  color: #333;
}

.sustainability-top .bottom-line {
  border-bottom: 1px solid #3E455A;
  padding-bottom: 15px;
}

.sustainability-top .flex-area-2022 {
  align-items: center;
  width: 100%;
  margin: 0 0 30px;
  padding: 150px 0 0;
}

#sustainability-link .flex-area-2022 {
  align-items: center;
  width: 100%;
  margin: 0 0 30px;
  padding: 50px 0 0;
}

.sustainability-top .flex-area-2022 .left-box {
  width: 50%;
  padding-right: 25px;
}

.sustainability-top .flex-area-2022 .left-box img {
  width: 100%;
  height: auto;
}

.sustainability-top .flex-area-2022 .right-box {
  width: 50%;
  padding-left: 25px;
}

.sustainability-top .flex-area-2022 .right-box .txt-2022 {
  text-align: left;
  margin-top: 30px;
}

.sustainability-top .flex-area-2022 .right-box .txt-2022 a {
  color: #164C6C;
  border-bottom: 1px solid #707070;
  margin-top: 30px;
}

.sustainability-graph {
  background: #F7F7F7;
  padding: 40px;
  margin: 50px 0;
}

.sustainability-graph a {
  word-break: break-all;
}

.sustainability-graph p {
  color: #333;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
}

.sustainability-lead {
  color: #333;
}

.of-sustainabilitybg-sp {
  margin: 50px 0 20px;
}

.of-sustainabilitybg-sp .sustainability-title30 {
  color: #164C6C;
}

.of-sustainabilitybg-sp .sustainability-txt {
  line-height: 175%;
  color: #164C6C;
  margin-top: 15px;
}

.of-sustainabilitybg .sustainability-title30 {
  color: #fff;
  text-align: center;
  line-height: 150%;
  max-width: 100%;
}

.of-sustainabilitybg .sustainability-txt {
  color: #fff;
  text-align: center;
  display: block;
  margin-top: 15px;
  max-width: 100%;
}

.sustainability-page .sustainability-sup, .sustainability-page .sustainability-sup a {
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 300;
  color: #333;
  line-height: 180%;
}

.sustainability-page .sustainability-sup a img {
  vertical-align: middle;
  width: 12px;
  margin-left: 2px;
}

.of-sustainability-wrapper-2022 {
  position: relative;
  top: -80px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 100px;
  border-radius: 10px;
  background-color: #fff;
}

.of-sustainability-wrapper-2022 .flex-area-2022:last-child {
  margin-bottom: 0;
}

.of-sustainability-wrapper-2022.mb-100 {
  margin-bottom: 100px;
}

.of-sustainability-wrapper-2022.mb-m80 {
  margin-bottom: -80px;
}

.of-sustainability-wrapper-2022 .of-sustainability-header-2022 {
  position: relative;
  border-bottom: 1px solid #3E455A;
  padding-bottom: 30px;
  margin: 0 auto 30px;
  text-align: center;
}

.of-sustainability-wrapper-2022 .flex-area-2022 {
  margin-bottom: 80px;
  align-items: stretch;
}

.of-sustainability-wrapper-2022 .flex-area-2022:firsr-child {
  margin-bottom: 0px;
}

.of-sustainability-wrapper-2022 .flex-50-left-2022 {
  padding-right: 25px;
}

.of-sustainability-wrapper-2022 .flex-50-right-2022 {
  padding-left: 25px;
}

.of-sustainability-wrapper-2022 .sustainability-title24 {
  margin: 0 0 15px;
}

.of-sustainability-wrapper-2022 .sustainability-title18 {
  margin: 20px 0;
}

.of-sustainability-wrapper-2022 p {
  line-height: 1.8;
  color: #333;
}

.of-sustainability-wrapper-2022 .con-detail-txt-link {
  margin: 30px 0 0;
}

.of-sustainability-wrapper-2022 .sustainability-btncaption {
  margin: 0 0 10px;
  text-align: center;
  font-weight: bold;
  color: #164C6C;
}

.of-sustainability-wrapper-2022 .arrow-box-blue p {
  color: #fff;
}

.of-sustainability-wrapper-2022 img {
  width: 100%;
}

.of-sustainability-wrapper-2022 dl {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.of-sustainability-wrapper-2022 dt {
  width: 100px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
}

.of-sustainability-wrapper-2022 dd {
  width: calc(100% - 100px);
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;

}

.of-sustainability-wrapper-2022 .sustainability-33 {
  margin-bottom: 70px;
  display: flex;
  flex-direction: column;
}

.of-sustainability-wrapper-2022 .sustainability-33:nth-child(4) h4 {
  min-height: initial;
}

.of-sustainability-wrapper-2022 .arrow-box-blue {
  margin: 20px auto 0;
}

.of-sustainability-wrapper-2022 .mark-check {
  display: inline-block;
  margin-bottom: 10px;
  margin-left: 26px;
}

.of-sustainability-wrapper-2022 .mark-check-bottom {
  margin-bottom: 25px;
}

.of-sustainability-wrapper-2022 .mark-check::before {
  content: '';
  background: url(../img/sustainability/check.svg)no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
  margin-left: -26px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width:1200px) {
  .of-sustainability-wrapper-2022 dl {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0 0;
  }

  .of-sustainability-wrapper-2022 dt {
    width: 35%;
    font-size: 1.6rem;
  }

  .of-sustainability-wrapper-2022 dd {
    width: 65%;
    font-size: 1.6rem;
  }
}

@media (max-width:992px) {
  .of-sustainabilitybg-sp {
    margin-top: 100px;
  }

  .of-sustainability-wrapper-2022 p {
    margin-top: 20px;
  }

  .sustainability-top .container-2022 {
    max-width: 1000px;
  }

  .sustainability-top .sustainability-title30 {
    font-size: 2.8rem;
  }

  .sustainability-top .flex-area-2022 .left-box {
    width: 100%;
    padding-right: 0px;
  }

  .sustainability-top .flex-area-2022 .left-box img {
    width: 100%;
    height: auto;
  }

  .sustainability-top .flex-area-2022 .right-box {
    width: 100%;
    padding-left: 0px;
    margin: 40px 0 0;
  }

  .sustainability-top .flex-area-2022 .right-box .txt-2022 {
    margin-top: 15px;
  }

  .sustainability-page .sustainability-sup {
    margin: 0 0 20px;
  }

  .sustainability-page .sustainability-sup a img {
    vertical-align: middle;
    width: 12px;
    margin-left: 2px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .of-sustainabilitybg .sustainability-title30 {
    max-width: 100%;
    margin: 0 auto;
  }

  .of-sustainabilitybg .sustainability-txt {
    max-width: 100%;
    margin: 15px auto 0;
  }

  .of-sustainability-wrapper-2022 .sustainability-title24 {
    margin: 0px;
  }

  .of-sustainability-wrapper-2022 {
    position: relative;
    top: 0px;
    max-width: 100%;
    padding: 60px 45px;
    border-radius: 0;
  }

  .of-sustainability-wrapper-2022.mb-100 {
    margin-bottom: 80px;
  }

  .of-sustainability-wrapper-2022.mb-m80 {
    margin-bottom: 0px;
  }

  .of-sustainability-wrapper-2022 .of-sustainability-header-2022 {
    padding-bottom: 10px;
    margin: 0 auto 30px;
    text-align: left;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022 {
    display: block;
    margin: 50px 0;
  }

  .of-sustainability-wrapper-2022 .flex-50-left-2022 {
    width: 100%;
    padding-right: 0px;
  }

  .of-sustainability-wrapper-2022 .flex-50-right-2022 {
    width: 100%;
    padding-left: 0px;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022.flex-tab {
    display: flex;
    justify-content: space-between;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022.flex-tab .flex-33-left-2022 {
    flex-basis: 48%;
    width: 48%;
    padding-right: 0px;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022.flex-tab .flex-33-center-2022 {
    flex-basis: 48%;
    width: 48%;
    padding: 0px;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022.flex-tab .flex-33-right-2022 {
    flex-basis: 48%;
    width: 48%;
    padding-left: 0px;
  }

  .of-sustainability-wrapper-2022 dl {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0;
  }

  .of-sustainability-wrapper-2022 dt {
    width: 20%;
    font-size: 1.5rem;
  }

  .of-sustainability-wrapper-2022 dd {
    width: 80%;
    font-size: 1.5rem;
  }

  .of-sustainability-wrapper-2022 .sustainability-33 img {
    width: 100%;
    margin: 0;
  }

  .of-sustainability-wrapper-2022 .sustainability-33 {
    margin-bottom: 50px;
  }

  .of-sustainability-wrapper-2022 .arrow-box-blue {
    text-align: center;
    margin: 30px 0 0;
  }
}

@media (max-width:768px) {
  .sustainability-graph {
    padding: 20px;
  }

  .of-sustainability-wrapper-2022 img {
    margin: 0 0 25px;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022 {
    display: block;
    margin: 20px 0;
  }

  .sustainability-top .flex-area-2022 {
    padding: 50px 0 0;
  }

  .sustainability-page .sustainability-title30 {
    font-size: 20px;
    font-size: 2.0rem;
  }

  .sustainability-page .sustainability-title24 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .sustainability-page .sustainability-title18 {
    font-size: 16px;
    font-size: 1.6rem;
  }

  /*.sustainability-top*/
  .sustainability-top .sustainability-title30 {
    font-size: 22px;
    font-size: 2.2rem;
    margin-top: 0px;
  }

  .of-sustainabilitybg-sp .sustainability-title30, .sustainability-page h3.sustainability-title30 {
    text-align: center;
  }

  .of-sustainability-wrapper-2022 {
    position: relative;
    top: 0px;
    max-width: 100%;
    padding: 30px 15px;
    border-radius: 0;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022.flex-tab {
    display: block;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022.flex-tab .flex-33-left-2022 {
    flex-basis: 100%;
    width: 100%;
    padding-right: 0px;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022.flex-tab .flex-33-center-2022 {
    flex-basis: 100%;
    width: 100%;
    padding: 0px;
  }

  .of-sustainability-wrapper-2022 .flex-area-2022.flex-tab .flex-33-right-2022 {
    flex-basis: 100%;
    width: 100%;
    padding-left: 0px;
  }

  .of-sustainability-wrapper-2022 dt {
    width: 16%;
    font-size: 1.5rem;
  }

  .of-sustainability-wrapper-2022 dd {
    width: 84%;
    font-size: 1.5rem;
  }

  .of-sustainability-wrapper-2022 .sustainability-33:nth-child(4) h4, .of-sustainability-wrapper-2022 .sustainability-33:nth-child(6) h4 {
    min-height: initial;
  }
}

@media (max-width:640px) {
  .of-sustainability-wrapper-2022 dt {
    width: 29%;
  }

  .of-sustainability-wrapper-2022 dd {
    width: 71%;
  }
}

/*SDGs swiper*/
#sustainability-slide .sustainability-title30 {
  text-align: center;
  margin: 0;
}

.swiper-sustainability-area {
  margin: 0 auto;
  padding: 80px 0;
  overflow-x: hidden;
}

#sustainability-slide .of-projectsslide-title-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  color: #164C6C;
  margin-top: 5px;
  text-align: left;
}

#sustainability-slide .swiper-single-projects .swiper-Comeitem {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 63%;
  /*　トリミングしたい枠の高さ　*/
  z-index: 0;
  border: 1px solid #707070;
}

#sustainability-slide .swiper-single-projects .swiper-Comeitem p {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 5;
  Font-size: 2.0rem;
  font-weight: 400;
}

/*swiper*/
#sustainability-slide .swiper-slide p {
  text-align: center;
  margin-top: 5px;
}

#sustainability-slide .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  top: -30px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

#sustainability-slide .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  top: -30px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:992px) {
  #sustainability-slide .swiper-button-next {
    width: 30px !important;
    top: -30px !important;
    background-size: 30px;
  }

  #sustainability-slide .swiper-button-prev {
    width: 30px !important;
    top: -30px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:768px) {
  #sustainability-slide .swiper-button-next {
    width: 30px !important;
    top: -40px !important;
    background-size: 30px;
  }

  #sustainability-slide .swiper-button-prev {
    width: 30px !important;
    top: -40px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  #sustainability-slide .swiper-button-next {
    /*left:52%!important;*/
    top: -40px !important;
    background-size: 30px;
  }

  #sustainability-slide .swiper-button-prev {
    /*right:52%!important;*/
    top: -40px !important;
    background-size: 30px;
  }
}

/*会社案内*/
.company-page .title01-2022 {
  margin-bottom: 0;
  text-align: center;
  font-size: 50px;
  font-size: 5.0rem;
  font-family: 'futura-pt', serif;
}

.company-page .subtitle01-2022 {
  font-family: "Noto Sans JP", serif;
  text-align: center;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  margin: 5px 0 3%;
}

@media (max-width:768px) {
  .company-page .title01-2022 {
    font-size: 30px;
    font-size: 3.0rem;
  }

  .company-page.subtitle01-2022 {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

@media (max-width:576px) {
  .company-page .title01-2022 {
    font-size: 28px;
    font-size: 2.8rem;
  }

  .company-page.subtitle01-2022 {
    line-height: 175%;
  }
}

.mv-caption-2022 {
  text-align: center;
  margin: 60px auto;
}

.mv-caption-2022 h2 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  text-align: center;
  line-height: 150%;
}

.mv-caption-2022 p {
  font-weight: 400;
  text-align: center;
  line-height: 200%;
  max-width: 80%;
  margin: 25px auto 0;
}

@media (max-width:1000px) {
  .mv-caption-2022 p {
    font-weight: 400;
    text-align: left;
    line-height: 200%;
    max-width: 100%;
    margin: 25px auto 0;
  }
}

@media (max-width:768px) {
  .mv-caption-2022 h2 {
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 600;
  }
}

.company-page .com-title24 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.company-page .com-title28 {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.company-page .com-title30 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

#company-2022 .b5-txtarea-2022 {
  color: #ECDBCC;
  margin-bottom: 30px;
}

#company-2022 .b5-txtarea-2022 .b5-header {
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
}

#company-2022 .b5-txtarea-2022 .b5-num {
  font-size: 45px;
  font-size: 4.5rem;
  font-family: 'futura-pt', serif;
  line-height: 120%;
  color: #164C6C;
  text-align: left;
  margin-left: 10px;
  margin-right: 15px;
  display: inline-block;
  vertical-align: middle;
}

#company-2022 .b5-txtarea-2022 .b5-title {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
  color: #164C6C;
  text-align: left;
  margin-left: 15px;
  line-height: 150%;
  display: inline-block;
  vertical-align: middle;
}

#company-2022 .b5-txtarea-2022 .b5-txt {
  font-weight: 300;
  color: #164C6C;
  text-align: left;
  line-height: 175%;
  margin-top: 10px;
}

#company-2022 .flex-area-2022 {
  margin: 0px 0 100px;
  align-items: flex-start;
}

#company-2022 .left-ibox-2022 {
  width: 53%;
  padding-right: 15px;
}

#company-2022 .right-ibox-2022 {
  width: 53%;
  padding-left: 15px;
}

#company-2022 .left-box-2022 {
  width: 47%;
  padding-right: 30px;
}

#company-2022 .right-box-2022 {
  width: 47%;
  padding-left: 30px;
}

#company-2022 .flex-area-2022 .com-title28 {
  margin: 15px 0 15px;
}

#company-2022 .flex-area-2022 p {
  font-weight: 400;
  line-height: 200%;
}

/*List*/
#company-list .com-title30, #company-list .com-title24 {
  margin-bottom: 15px;
}

#company-list .list-wrapper-2022 {
  margin-bottom: 100px;
}

#company-list dl {
  display: flex;
  border-top: 1px solid #D5D5D5;
  border-bottom: 1px solid #D5D5D5;
  margin-top: -1px;
}

#company-list dl dt {
  width: 200px;
  padding: 30px 20px;
  background: #F7F6F5;
}

#company-list dl dd {
  width: calc(100% - 200px);
  padding: 30px 20px;
}

#company-list dl dd a {
  font-weight: 600;
  color: #164C6C;
  transition: all .5s;
}

#company-list dl dd a:hover {
  color: #ECDBCC;
  opacity: 1;
  transition: all .5s;
}

#company-list .list-btxt-2022 {
  font-weight: 600;
  line-height: 200%;
  color: #164C6C;
}

#company-list .list-txt-2022 {
  font-weight: 400;
  line-height: 200%;
  color: #164C6C;
}

#company-list .list-txt-2022.address-2022 span {
  display: block;
  margin-bottom: 15px;
}

#company-list .list-txt-2022.address-2022 span:last-child {
  display: block;
  margin-bottom: 0px;
}

.company-page #office-2022 .office-txt {
  font-weight: 500;
}

@media (max-width:1000px) {
  #company-2022 .b5-txtarea-2022 {
    color: #ECDBCC;
    margin-bottom: 20px;
  }

  #company-2022 .flex-area-2022 img {
    margin: 0px 0 50px;
  }

  #company-2022 .flex-area-2022 img {
    margin: 0px 0 20px;
  }

  #company-2022 .left-ibox-2022 {
    width: 100%;
    padding-right: 0px;
  }

  #company-2022 .right-ibox-2022 {
    width: 100%;
    padding-left: 0px;
  }

  #company-2022 .left-box-2022 {
    width: 100%;
    padding-right: 0px;
  }

  #company-2022 .right-box-2022 {
    width: 100%;
    padding-left: 0px;
  }

  #company-2022 .flex-area-2022 .com-title28 {
    margin: 0px 0 10px;
  }
}

@media (max-width:768px) {
  .company-page .com-title24 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .company-page .com-title28 {
    font-size: 20px;
    font-size: 2.0rem;
  }

  .company-page .com-title30 {
    font-size: 21px;
    font-size: 2.1rem;
  }

  #company-list dl {
    display: block;
    border-top: 1px solid #D5D5D5;
    border-bottom: 1px solid #D5D5D5;
    margin-top: -1px;
  }

  #company-list dl dt {
    padding: 10px 20px;
    width: 100%;
    background: #F7F6F5;
  }

  #company-list dl dd {
    padding: 20px 20px;
    width: 100%;
  }
}

/*capcell*/
.capcell-page .cap-title34 {
  font-size: 34px;
  font-size: 3.4rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.capcell-page .cap-title30 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.capcell-page .cap-title24 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 500;
  color: #164C6C;
  line-height: 175%;
}

.capcell-page .cap-title22 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 500;
  color: #164C6C;
  line-height: 175%;
}

.capcell-page .cap-title20 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  color: #164C6C;
  line-height: 175%;
}

/*#capcell01-2022*/
#capcell01-2022 .flex-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#capcell01-2022 .flex-4 {
  width: 25%;
  padding-right: 20px;
}

#capcell01-2022 .flex-4:nth-child(2), #capcell01-2022 .flex-4:nth-child(3) {
  width: 25%;
  padding: 0 10px;
}

#capcell01-2022 .flex-4:last-child {
  padding-left: 20px;
  padding-right: 0;
}

#capcell01-2022 .flex-4 img {
  width: 100%;
  max-width: 170px;
  margin: 0 auto;
  display: block;
}

#capcell01-2022 .flex-4 p {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
  margin-top: 15px;
}

/*#capcell02-2022*/
#capcell02-2022 {
  background: #F1EBE6;
}

#capcell02-2022 .cap-title30 {
  color: #3E455A;
  text-align: center;
  padding: 35px 0 20px;
}

#capcell02-2022 .flex-area-2022 {
  justify-content: center;
  margin: 80px 0;
}

#capcell02-2022 .flex-2-one {
  width: 40%;
  display: block;
  max-width: 320px;
  text-align: center;
  margin-right: 30px;
}

#capcell02-2022 .flex-2-two {
  width: 60%;
  display: block;
  max-width: 380px;
  text-align: center;
  margin-left: 30px;
}

#capcell02-2022 .flex-2-one img {
  width: auto;
  height: 420px;
}

#capcell02-2022 .flex-2-two img {
  width: auto;
  height: 400px;
}

#capcell02-2022 .flex-area-2022 .cap-title30 {
  color: #164C6C;
  text-align: center;
  padding: 10px 0 10px;
  margin: 0 !important;
}

#capcell02-2022 .flex-area-2022 p {
  text-align: center;
}

#capcell02-2022 .youtube-wrapper-2022 {
  margin: 50px auto;
  max-width: 80%;
}

/*特徴*/
#capcell-features-2022 {
  background: #F2EDE2;
}

#capcell-features-2022 .flex-area-2022 {
  align-items: flex-start;
  margin: 80px 0;
}

#capcell-features-2022 .flex-area-2022 .left-box-2022 {
  width: 57%;
  padding-right: 60px;
}

#capcell-features-2022 .flex-area-2022 .right-box-2022 {
  width: 57%;
  padding-left: 60px;
}

#capcell-features-2022 .flex-area-2022 .left-ibox-2022 {
  width: 43%;
}

#capcell-features-2022 .flex-area-2022 .right-ibox-2022 {
  width: 43%;
}

#capcell-features-2022 .left-flexbox-2022 {
  width: 43%;
  display: flex;
  justify-content: center;
}

#capcell-features-2022 .left-flexbox-sp-2022 {
  display: none;
}

#capcell-features-2022 .cap-num {
  font-size: 45px;
  font-size: 4.5rem;
  font-family: 'futura-pt', serif;
  color: #164C6C;
  text-align: left;
  margin-bottom: 10px;
  line-height: 100%;
}

#capcell-features-2022 .cap-title22 {
  margin-bottom: 20px;
}

#capcell-features-2022 .flex-area-2022 p {
  text-align: left;
}

#capcell-features-2022 .flex-area-2022 img {
  width: 100%;
}

#capcell-features-2022 .arrow-box-blue {
  text-align: left
}

#capcell-features-2022 .cap-list {
  border: 1px solid #707070;
  padding: 30px;
}

#capcell-features-2022 .cap-list .cap-list-title {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 500;
  padding-bottom: 5px;
  margin-bottom: 30px;
  border-bottom: 1px solid #707070;
}

#capcell-features-2022 .cap-list .cap-btxt {
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 100%;
}

#capcell-features-2022 .cap-list .cap-txt {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 150%;
  margin-bottom: 25px;
}

#capcell-features-2022 .left-flexbox-2022 .img-box, #capcell-features-2022 .left-flexbox-sp-2022 .img-box {
  width: 45%;
  text-align: center;
}

#capcell-features-2022 .left-flexbox-2022 .img-box img, #capcell-features-2022 .left-flexbox-sp-2022 .img-box img {
  max-width: 80%;
  margin: 0 auto;
}

#capcell-features-2022 .left-flexbox-2022 .img-box p, #capcell-features-2022 .left-flexbox-sp-2022 .img-box p {
  text-align: center;
  margin-top: 15px;
}

#capcell-features-2022 .left-flexbox-sp-2022 {
  display: none;
}

/*事例*/
#capcell-case-2022 .capcell-case-body {
  max-width: 90%;
  margin: 0 auto;
}

#capcell-case-2022 .flex-area-2022 {
  margin: 65px 0;
  align-items: stretch;
}

#capcell-case-2022 .left-box-2022 {
  width: 50%;
}

#capcell-case-2022 .right-box-2022, #capcell-case-2022 .right-borderbox-2022 {
  width: 50%;
}

#capcell-case-2022 .left-box-2022 .cap-title34 {
  margin-bottom: 15px;
}

#capcell-case-2022 .right-borderbox-2022 {
  border: 1px solid #164C6C;
  padding: 30px;
}

#capcell-case-2022 .right-borderbox-2022 .cap-title20 {
  border-bottom: 1px solid #164C6C;
  padding: 0 0 10px;
  margin: 0 0 10px;
}

#capcell-case-2022 .common-box {
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
  padding: 65px 0;
}

#capcell-case-2022 .common-box .cap-title24 {
  text-align: left;
  margin-bottom: 10px;
}

#capcell-case-2022 .common-box p {
  margin-bottom: 35px;
}

#capcell-case-2022 .common-box p:last-child {
  margin-bottom: 0px;
  line-height: 200%;
}

#capcell-case-2022 .coment-box {
  margin: 65px 0;
}

#capcell-case-2022 .coment-box .cap-title24 {
  text-align: center;
}

#capcell-case-2022 .coment-box .flex-area-2022 {
  justify-content: space-between;
  margin: 40px 0
}

#capcell-case-2022 .coment-box .left-box-2022 {
  position: relative;
  width: 48%;
  background: #F7F6F5;
  padding: 25px 35px 35px 25px;
  display: flex;
  align-items: flex-start;
}

#capcell-case-2022 .coment-box .left-box-2022::before, #capcell-case-2022 .coment-box .right-box-2022::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 1px;
  background: #ECDBCC;
}

#capcell-case-2022 .coment-box .left-box-2022::after, #capcell-case-2022 .coment-box .right-box-2022::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 1px;
  background: #ECDBCC;
}

#capcell-case-2022 .coment-box .right-box-2022 {
  position: relative;
  width: 48%;
  background: #F7F6F5;
  padding: 25px 35px 35px 25px;
  display: flex;
  align-items: flex-start;
}

#capcell-case-2022 .coment-box .left-box-2022 img, #capcell-case-2022 .coment-box .right-box-2022 img {
  width: 60px;
  padding-right: 15px;
}

#capcell-case-2022 .coment-box p {
  font-weight: 500;
  text-align: left;
  line-height: 200%;
}

#capcell-case-2022 .other-box {
  margin: 120px 0 65px;
}

#capcell-case-2022 h3.cap-title24 {
  text-align: center;
  display: block;
  margin: 0px auto 30px;
}

#capcell-case-2022 .introduction-box {
  display: block;
  margin: 30px auto;
  max-width: 100%;
  background: #164C6C;
  padding: 50px 30px;
  transition: all .5s;
}

#capcell-download-2022 .introduction-box {
  display: block;
  margin: 65px auto;
  max-width: 90%;
  background: #164C6C;
  padding: 50px 30px;
  transition: all .5s;
}

#capcell-case-2022 .introduction-box .flex-2022, #capcell-download-2022 .introduction-box .flex-2022 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#capcell-case-2022 .introduction-box img, #capcell-download-2022 .introduction-box img {
  width: 35%;
}

#capcell-case-2022 .introduction-box .right-box-2022, #capcell-download-2022 .introduction-box .right-box-2022 {
  display: block;
  width: 60%;
  padding-left: 3%;
}

#capcell-case-2022 .introduction-box .cap-title20, #capcell-download-2022 .introduction-box p {
  color: #fff;
  margin: 0 0 20px;
}

#capcell-case-2022 .introduction-box .intro-title, #capcell-download-2022 .introduction-box .intro-title {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 500;
  color: #fff;
  margin: 0px 0;
}

#capcell-case-2022 .introduction-box .intro-title::after, #capcell-download-2022 .introduction-box .intro-title::after {
  content: '';
  display: inline-block;
  background: url(../img/icon-pdf-2022.svg)no-repeat center;
  background-size: cover;
  vertical-align: middle;
  width: 22px;
  height: 24px;
  margin-left: 10px;
  transition: all .5s;
}

#capcell-case-2022 .introduction-box:hover, #capcell-download-2022 .introduction-box:hover {
  background: #164C6C;
  transition: all .5s;
}

/*設備*/
#capcell-facility2022 {
  background-color: #E6DDC7;
}

#capcell-facility2022 .of-line-title-2022 p.sub-txt-2022 {
  text-align: center;
}

#capcell-facility2022 .flex-area-2022 {
  align-items: stretch;
  margin: 65px 0;
}

#capcell-facility2022 .left-box-2022 {
  width: calc(50% - 80px);
  margin-right: 30px;
}

#capcell-facility2022 .left-box-2022 .cap-title24 {
  border-bottom: 1px solid #164C6C;
  padding: 0 0 5px;
  margin-bottom: 15px;
}

#capcell-facility2022 .right-ibox-2022 {
  width: 50%;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#capcell-facility2022 .img-box-one {
  width: 100%;
  position: relative;
  padding-bottom: 40px;
}

#capcell-facility2022 .img-box-one .size1 {
  position: absolute;
  left: 11%;
  bottom: 0;
  text-align: center;
}

#capcell-facility2022 .img-box-one .size2 {
  position: absolute;
  left: 64%;
  bottom: 0;
  text-align: center;
}

#capcell-facility2022 .img-box-left {
  width: 50%;
  padding-right: 15px;
}

#capcell-facility2022 .img-box-right {
  width: 50%;
  padding-left: 15px;
}

#capcell-facility2022 .img-box-left img {
  width: 100%;
  height: auto;
  max-width: 220px;
}

#capcell-facility2022 .img-box-right img {
  width: 100%;
  height: auto;
  max-width: 220px;
}

#capcell-facility2022 .img-box-left p, #capcell-facility2022 .img-box-right p {
  text-align: left;
  margin-top: 10px;
}

#capcell-facility2022 .img-ebox-left {
  width: 50%;
  padding-right: 15px;
  padding-left: 15%;
}

#capcell-facility2022 .img-ebox-right {
  width: 50%;
  padding-left: 15px;
  padding-right: 15%;
}

#capcell-facility2022 .img-ebox-left img {
  width: 100%;
  height: auto;
  max-width: 180px;
  display: block;
  margin: 0 auto;
}

#capcell-facility2022 .img-ebox-right img {
  width: 100%;
  height: auto;
  max-width: 180px;
  display: block;
  margin: 0 auto;
}

#capcell-facility2022 .img-ebox-left .cap-txt, #capcell-facility2022 .img-ebox-right .cap-txt {
  font-weight: 400;
  text-align: center;
  margin-top: 15px;
}

#capcell-facility2022 .right-ibox-2022 .flex-6 {
  width: 31%;
  margin-bottom: 20px;
}

#capcell-facility2022 .right-ibox-2022 .flex-6 p {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
}

#capcell-facility2022 #option {
  padding-top: 100px;
  margin-top: -100px;
}

#capcell-facility2022 #option2 {
  padding-top: 50px;
  margin-top: -50px;
}

#capcell-facility2022 .option-box {
  background: #fff;
  padding: 40px 6%;
}

#capcell-facility2022 .option-box .cap-title24 {
  border-bottom: 1px solid #164C6C;
  padding: 0 0 5px;
  margin-bottom: 15px;
}

#capcell-facility2022 .option-box .flex-area-2022 {
  justify-content: space-between;
  margin: 85px 0 40px;
}

#capcell-facility2022 .option-box .flex-area-2022.last-box {
  margin: 65px 0 40px;
}

#capcell-facility2022 .option-box .flex-4-2022 {
  width: 23%;
}

#capcell-facility2022 .option-box .flex-6-2022 {
  width: 15.5%;
}

#capcell-facility2022 .option-box .flex-area-2022 p {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
}

#capcell-facility2022 .option-box .flex-area-2022 p span {
  font-size: 12px;
  font-size: 1.2rem;
  vertical-align: text-top;
}

#capcell-facility2022 .option-box .sup-txt {
  font-size: 14px;
  font-size: 1.4rem;
  text-align: left;
}

/*流れ*/
#capcell-flow-2022 {}

#capcell-flow-2022 .of-flow-box-2022 {
  background: #F1EBE6;
  padding: 20px 30px;
}

#capcell-flow-2022 .of-flow-box-2022 h3 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 400;
  text-align: left;
  margin: 0 0 10px;
}

/*シミュレーション*/
#capcell-simu-2022 {
  background-color: #F2EDE2;
}

#capcell-simu-2022 .common-box {
  margin: 40px 0;
  position: relative;
}

#capcell-simu-2022 .common-box .flex-area-2022 {
  align-items: stretch;
}

#capcell-simu-2022 .common-box .flex-area-2022 .left-box-2022 {
  width: 50%;
  position: relative;
  text-align: center;
}

#capcell-simu-2022 .common-box .flex-area-2022 .left-box-2022 img {
  width: auto;
  height: 400px;
}

#capcell-simu-2022 .dami-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: 20px;
  background-color: red;
  color: #fff;
  font-weight: 600;
}

#capcell-simu-2022 .common-box .flex-area-2022 .right-box-2022 {
  width: 50%;
  position: relative;
}

#capcell-simu-2022 .common-box .simulation-list dl {
  display: flex;
  border-top: 1px solid #989898;
}

#capcell-simu-2022 .common-box .simulation-list dl:last-child {
  border-top: 1px solid #989898;
  border-bottom: 1px solid #989898;
}

#capcell-simu-2022 .common-box .simulation-list dl dd {
  padding: 20px 0;
  width: calc(100% - 160px);
  line-height: 150%;
}

#capcell-simu-2022 .common-box .simulation-list dl dt.btxt-2022 {
  font-weight: 600;
  padding: 20px 0;
  width: 160px;
  text-align: center;
}

#capcell-simu-2022 .none-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all .5s;
}

#capcell-simu-2022 .none-box.tab-active {
  position: relative;
  opacity: 1;
  transition: all .5s;
}

#capcell-simu-2022 .radio-box {
  margin: 60px auto 0;
  padding: 30px 0;
  background: #F1EBE6;
  width: 100%;
  max-width: 1000px;
  min-width: 830px;
  position: relative;
  z-index: 10;
}

#capcell-simu-2022 .radio-box .flex-area-2022 {
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

#capcell-simu-2022 .radio-box .left-box-2022 {
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30px;
}

#capcell-simu-2022 .radio-box .right-box-2022 {
  width: 33%;
  display: flex;
  align-items: center;
  padding-left: 30px;
}

#capcell-simu-2022 .radio-box .center-box-2022 {
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #707070;
  border-right: 1px solid #707070;
  padding: 0 20px;
}

#capcell-simu-2022 .radio-box .btxt-2022 {
  padding-right: 30px;
  font-weight: 600;
}

#capcell-simu-2022 .radio-box p {
  text-align: left;
  line-height: 150%;
  padding: 8px 0;
}

#capcell-simu-2022 input[type=radio] {
  background-color: #fff;
  border: 1px solid #bcbcbc;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  left: 5px;
  margin: 0px 8px 2px 0;
  vertical-align: middle;
}

#capcell-simu-2022 .left-box-2022 p img {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: auto;
  margin-right: 5px;
}

/*オフィス*/
#capcell-office-2022 {
  background-color: #164C6C;
}

#capcell-office-2022 .of-line-title-2022 h2, #capcell-office-2022 .of-line-title-2022 p {
  color: #fff;
}

#capcell-office-2022 .of-line-title-2022::before {
  background-color: #fff;
}

#capcell-office-2022 .of-line-title-2022::after {
  background-color: #fff;
}

#capcell-office-2022 .flex-2022 {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-bottom: 40px;
}

#capcell-office-2022 .flex-5 {
  width: 19%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#capcell-office-2022 .cap-title20 {
  color: #fff;
}

#capcell-office-2022 .gmap {
  position: relative;
  margin: 10px 0;
}

#capcell-office-2022 .gmap a {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: block;
  background-color: #DEDEDE;
  border-radius: 15px;
  font-size: 14px;
  font-size: 1.4rem;
  color: #164C6C;
  padding: 5px 8px;
  transition: all .5s;
}

#capcell-office-2022 .gmap a:hover {
  background-color: #ECDBCC;
  color: #fff;
}

#capcell-office-2022 .top-block p {
  font-size: 14px;
  font-size: 1.4rem;
  color: #fff;
  line-height: 150%;
}

#capcell-office-2022 .arrow-box-white {
  margin: 30px 0 0;
  width: 100%;
}

#capcell-office-2022 .arrow-box-white p {
  font-size: 13px;
  font-size: 1.3rem;
  width: 100%;
  background-color: #fff;
  padding: 15px 40px 15px 15px;
}

#capcell-office-2022 .arrow-box-white p:hover {
  background-color: #ECDBCC;
  color: #fff;
  transition: all .5s;
}

#capcell-office-2022 .arrow-box-white p::before {
  position: absolute;
  top: 50%;
  right: 25px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#capcell-office-2022 .arrow-box-white p::after {
  position: absolute;
  top: 50%;
  right: 25px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

#capcell-office-2022 .arrow-box-white p:hover::before {
  position: absolute;
  top: 50%;
  right: 15px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

#capcell-office-2022 .arrow-box-white p:hover::after {
  position: absolute;
  top: 50%;
  right: 15px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

/*コンタクト*/
#capcell-contact-2022 {
  text-align: center;
}

#capcell-contact-2022 .cap-title20 {
  text-align: center;
}

#capcell-contact-2022 .blue-btn-2022 {
  display: inline-block;
  padding: 15px 70px;
  background: #164C6C;
  margin: 30px auto;
  text-align: center;
  opacity: 1;
  transition: all .5s;
}

#capcell-contact-2022 .blue-btn-2022:hover {
  opacity: .6;
  transition: all .5s;
}

#capcell-contact-2022 .btn-title-2022 {
  font-size: 37px;
  font-size: 3.7rem;
  font-family: 'futura-pt', serif;
  color: #fff;
  text-align: center;
}

#capcell-contact-2022 .btn-txt-2022 {
  font-size: 14px;
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
}

@media (max-width:992px) {

  /*#capcell01-2022*/
  #capcell01-2022 .of-line-title-2022 h2 {
    font-size: 26px;
    font-size: 2.6rem;
  }

  /*02*/
  #capcell02-2022 .flex-2-one {
    width: 45%;
    display: block;
    max-width: 320px;
    margin: 30px auto;
  }

  #capcell02-2022 .flex-2-two {
    width: 55%;
    display: block;
    max-width: 380px;
    margin: 30px auto;
  }

  #capcell02-2022 .flex-2-one img {
    width: auto;
    height: 300px;
  }

  #capcell02-2022 .flex-2-two img {
    width: auto;
    height: 300px;
  }

  /*特徴*/
  #capcell-features-2022 .flex-area-2022 .left-box-2022 {
    width: 100%;
    padding-right: 0px;
  }

  #capcell-features-2022 .flex-area-2022 .right-box-2022 {
    width: 100%;
    padding-left: 0px;
  }

  #capcell-features-2022 .flex-area-2022 .left-ibox-2022 {
    width: 100%;
  }

  #capcell-features-2022 .flex-area-2022 .right-ibox-2022 {
    width: 100%;
  }

  #capcell-features-2022 .left-flexbox-2022 {
    width: 100%;
    display: none;
  }

  #capcell-features-2022 .left-flexbox-sp-2022 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
  }

  #capcell-features-2022 .flex-area-2022 img {
    margin-bottom: 10px;
  }

  #capcell-features-2022 .cap-num {
    font-size: 40px;
    font-size: 4.0rem;
    margin: 20px 0 10xp;
    line-height: 100%;
  }

  #capcell-features-2022 .cap-list {
    border: 1px solid #707070;
    padding: 30px;
    margin-top: 25px;
  }

  /*事例*/
  #capcell-case-2022 .capcell-case-body {
    max-width: 100%;
    margin: 0 auto;
  }

  #capcell-facility2022 .option-box .flex-area-2022 p {
    font-size: 14px;
    font-size: 1.4rem;
    margin-top: 10px;
  }

  #capcell-download-2022 .introduction-box {
    display: block;
    margin: 0px auto 65px;
    max-width: 100%;
    background: #ECDBCC;
    padding: 15px 20px;
    transition: all .5s;
  }

  /*オフィス*/
  #capcell-office-2022 .flex-2022 {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding-bottom: 40px;
  }

  #capcell-office-2022 .flex-5 {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 80px;
  }

  #capcell-office-2022 .cap-title20 {
    color: #fff;
  }

  #capcell-office-2022 .gmap {
    position: relative;
    margin: 10px 0;
  }

  #capcell-office-2022 .gmap a {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: block;
    background-color: #DEDEDE;
    border-radius: 15px;
    font-size: 14px;
    font-size: 1.4rem;
    color: #164C6C;
    padding: 5px 8px;
    transition: all .5s;
  }

  #capcell-office-2022 .gmap a:hover {
    background-color: #ECDBCC;
    color: #fff;
  }

  #capcell-office-2022 .arrow-box-white {
    margin: 30px 0 0;
    width: 100%;
  }

  #capcell-office-2022 .arrow-box-white p {
    width: 100%;
    background-color: #fff;
    padding: 15px 35px 15px 15px;
  }

  #capcell-office-2022 .arrow-box-white p:hover {
    background-color: #ECDBCC;
    color: #fff;
    transition: all .5s;
  }

  /*設備*/
  #capcell-facility2022 .img-box-one .size1 {
    position: absolute;
    left: 10%;
    bottom: 0;
    text-align: center;
  }

  #capcell-facility2022 .img-box-one .size2 {
    position: absolute;
    left: 61%;
    bottom: 0;
    text-align: center;
  }

  /*シミュレーション*/
  #capcell-simu-2022 .common-box .flex-area-2022 .left-box-2022 {
    width: 100%;
    position: relative;
    text-align: center;
  }

  #capcell-simu-2022 .common-box .flex-area-2022 .left-box-2022 img {
    width: auto;
    height: 400px;
  }

  #capcell-simu-2022 .dami-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    padding: 20px;
    background-color: red;
    color: #fff;
    font-weight: 600;
  }

  #capcell-simu-2022 .common-box .flex-area-2022 .right-box-2022 {
    width: 100%;
    margin-top: 30px;
  }

  #capcell-simu-2022 .common-box .simulation-list ul {
    display: flex;
    border-top: 1px solid #989898;
  }

  #capcell-simu-2022 .common-box .simulation-list ul:last-child {
    border-top: 1px solid #989898;
    border-bottom: 1px solid #989898;
  }

  #capcell-simu-2022 .common-box .simulation-list ul li {
    padding: 20px 0;
    width: calc(100% - 160px);
    line-height: 150%;
  }

  #capcell-simu-2022 .common-box .simulation-list ul li.btxt-2022 {
    font-weight: 600;
    width: 160px;
    text-align: center;
  }

  #capcell-simu-2022 .none-box {
    display: none;
  }

  #capcell-simu-2022 .none-box.tab-active {
    display: block;
  }

  #capcell-simu-2022 .radio-box {
    margin: 20px auto;
    padding: 30px 0;
    background: #F1EBE6;
    width: 100%;
    max-width: 1000px;
    min-width: initial;
  }

  #capcell-simu-2022 .radio-box .flex-area-2022 {
    width: 95%;
    margin: 0 auto;
    justify-content: space-between;
  }

  #capcell-simu-2022 .radio-box .left-box-2022 {
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 10px;
  }

  #capcell-simu-2022 .radio-box .right-box-2022 {
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
  }

  #capcell-simu-2022 .radio-box .center-box-2022 {
    width: 33%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
    padding: 0 5px;
  }

  #capcell-simu-2022 .radio-box .left-nbox-2022, #capcell-simu-2022 .radio-box .center-nbox-2022, #capcell-simu-2022 .radio-box .right-nbox-2022 {
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5px;
  }

  #capcell-simu-2022 .radio-box .btxt-2022 {
    padding-right: 0px;
    font-weight: 600;
    margin-bottom: 0px;
  }

  #capcell-simu-2022 .radio-box p {
    text-align: left;
  }
}

@media (max-width:768px) {
  .capcell-page .cap-title34 {
    font-size: 24px;
    font-size: 2.4rem;
  }

  .capcell-page .cap-title30 {
    font-size: 21px;
    font-size: 2.1rem;
  }

  .capcell-page .cap-title28 {
    font-size: 20px;
    font-size: 2.0rem;
  }

  .capcell-page .cap-title24 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .capcell-page .cap-title22 {
    font-size: 18px;
    font-size: 1.8rem;
  }

  .capcell-page .cap-title20 {
    font-size: 16px;
    font-size: 1.6rem;
  }

  /*#capcell01-2022*/
  #capcell01-2022 .of-line-title-2022 h2 {
    font-size: 21px;
    font-size: 2.1rem;
  }

  #capcell01-2022 .flex-4 {
    width: 50%;
    padding-right: 10px;
    margin-bottom: 40px;
  }

  #capcell01-2022 .flex-4:nth-child(2) {
    width: 50%;
    padding: 0px;
  }

  #capcell01-2022 .flex-4:nth-child(3) {
    width: 50%;
    padding: 0 10px 0 0px;
  }

  #capcell01-2022 .flex-4:last-child {
    padding-left: 0px;
    padding-right: 0;
  }

  #capcell01-2022 .flex-4:nth-child(even) {
    padding-right: 0px;
    padding-left: 10px;
  }

  #capcell01-2022 .flex-4 img {
    width: 100%;
    max-width: 180px;
  }

  #capcell01-2022 .flex-4:nth-child(3) img {
    width: 100%;
    max-width: 160px;
  }

  #capcell01-2022 .flex-4:nth-child(4) img {
    width: 100%;
    max-width: 160px;
  }

  #capcell01-2022 .flex-4 p {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500
  }

  /*02*/
  #capcell02-2022 .flex-area-2022 {
    margin: 80px 0;
  }

  #capcell02-2022 .flex-2-one {
    width: 100%;
    display: block;
    max-width: 80%;
    margin: 30px auto;
  }

  #capcell02-2022 .flex-2-two {
    width: 100%;
    display: block;
    max-width: 80%;
    margin: 30px auto;
  }

  #capcell02-2022 .flex-2-one img {
    width: auto;
    height: 300px;
  }

  #capcell02-2022 .flex-2-two img {
    width: auto;
    height: 300px;
  }

  #capcell02-2022 .flex-area-2022 .cap-title30 {
    color: #164C6C;
    text-align: center;
    padding: 10px 0 0;
    margin: 0 !important;
  }

  #capcell02-2022 .flex-area-2022 .flex-2-one p {
    margin-bottom: 0px;
  }

  #capcell02-2022 .flex-area-2022 .flex-2-two p {
    margin-bottom: 20px;
  }

  #capcell02-2022 .youtube-wrapper-2022 {
    margin: 50px auto 30px;
    max-width: 100%
  }

  /*事例*/
  #capcell-case-2022 .flex-area-2022 {
    margin: 45px 0;
    align-items: stretch;
  }

  #capcell-case-2022 .left-box-2022 {
    width: 100%;
  }

  #capcell-case-2022 .right-box-2022, #capcell-case-2022 .right-borderbox-2022 {
    width: 100%;
  }

  #capcell-case-2022 .right-borderbox-2022 {
    width: 100%;
    border: 1px solid #164C6C;
    padding: 30px;
    margin-top: 20px;
  }

  #capcell-case-2022 .right-borderbox-2022 .cap-title20 {
    border-bottom: 1px solid #164C6C;
    padding: 0 0 10px;
    margin: 0 0 10px;
  }

  #capcell-case-2022 .common-box {
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    padding: 45px 0;
  }

  #capcell-case-2022 .common-box .cap-title24 {
    margin-bottom: 10px;
  }

  #capcell-case-2022 .common-box p {
    margin-bottom: 20px;
  }

  #capcell-case-2022 .common-box p:last-child {
    margin-bottom: 0px;
    line-height: 200%;
  }

  #capcell-case-2022 .coment-box {
    margin: 45px 0;
  }

  #capcell-case-2022 .coment-box .cap-title24 {
    text-align: center;
  }

  #capcell-case-2022 .coment-box .flex-area-2022 {
    justify-content: space-between;
    margin: 30px 0 65px;
  }

  #capcell-case-2022 .coment-box .left-box-2022 {
    position: relative;
    width: 100%;
    background: #F7F6F5;
    padding: 25px 35px 35px 25px;
  }

  #capcell-case-2022 .coment-box .right-box-2022 {
    position: relative;
    width: 100%;
    background: #F7F6F5;
    padding: 25px 35px 35px 25px;
    margin: 20px 0 0;
  }

  #capcell-case-2022 .coment-box p {
    font-weight: 500;
    text-align: left;
    line-height: 200%;
  }

  #capcell-case-2022 .coment-box .left-box-2022 img, #capcell-case-2022 .coment-box .right-box-2022 img {
    width: 50px;
    padding-right: 15px;
  }

  #capcell-case-2022 .introduction-box {
    display: block;
    margin: 65px auto;
    max-width: 100%;
    padding: 15px 20px;
    transition: all .5s;
  }

  #capcell-case-2022 .other-box {
    margin: 85px 0 30px;
  }

  #capcell-case-2022 .other-box .introduction-box {
    margin: 0 auto 65px;
  }

  #capcell-download-2022 .introduction-box {
    display: block;
    margin: 0px auto 65px;
    max-width: 100%;
    background: #ECDBCC;
    padding: 15px 20px;
    transition: all .5s;
  }

  #capcell-case-2022 .introduction-box img, #capcell-download-2022 .introduction-box img {
    width: 40%;
  }

  #capcell-case-2022 .introduction-box .right-box-2022, #capcell-download-2022 .introduction-box .right-box-2022 {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    padding-left: 3%;
  }

  #capcell-case-2022 .introduction-box .intro-title, #capcell-download-2022 .introduction-box .intro-title {
    font-size: 20px;
    font-size: 2.0rem;
    margin: 15px 0 0;
  }

  #capcell-case-2022 .introduction-box .cap-title20, #capcell-download-2022 .introduction-box p {
    font-size: 1.4rem;
    margin: 20px;
  }

  #capcell-case-2022 .introduction-box p, #capcell-download-2022 .introduction-box p {
    margin: 0px;
  }

  #capcell-case-2022 .introduction-box .intro-title::after, #capcell-download-2022 .introduction-box .intro-title::after {
    content: '';
    display: inline-block;
    background: url(../img/icon-pdf-2022.svg)no-repeat bottom;
    vertical-align: bottom;
    margin-bottom: 3px;
  }

  /*仕様　設備*/
  #capcell-facility2022 .left-box-2022 {
    width: 100%;
    padding-right: 00px;
  }

  #capcell-facility2022 .left-box-2022 .cap-title24 {
    border-bottom: 1px solid #164C6C;
    padding: 0 0 5px;
    margin-bottom: 15px;
  }

  #capcell-facility2022 .right-ibox-2022 {
    width: 100%;
    padding-left: 0px;
    margin-top: 30px;
  }

  #capcell-facility2022 .img-box-one {
    width: 100%;
    position: relative;
  }

  #capcell-facility2022 .img-box-one .size1 {
    position: absolute;
    left: 12%;
    bottom: 0;
    text-align: center;
  }

  #capcell-facility2022 .img-box-one .size2 {
    position: absolute;
    left: 66%;
    bottom: 0;
    text-align: center;
  }

  #capcell-facility2022 .img-box-left {
    width: 50%;
    padding-right: 15px;
  }

  #capcell-facility2022 .img-box-right {
    width: 50%;
    padding-left: 15px;
  }

  #capcell-facility2022 .img-box-left img {
    width: 100%;
    height: auto;
    max-width: 220px;
  }

  #capcell-facility2022 .img-box-right img {
    width: 100%;
    height: auto;
    max-width: 220px;
  }

  #capcell-facility2022 .img-box-left p, #capcell-facility2022 .img-box-right p {
    text-align: left;
    margin-top: 10px;
  }

  #capcell-facility2022 .img-ebox-left {
    width: 50%;
    padding-right: 15px;
    padding-left: 5%;
  }

  #capcell-facility2022 .img-ebox-right {
    width: 50%;
    padding-left: 15px;
    padding-right: 5%;
  }

  #capcell-facility2022 .img-ebox-left img {
    width: 100%;
    height: auto;
  }

  #capcell-facility2022 .img-ebox-right img {
    width: 100%;
    height: auto;
  }

  #capcell-facility2022 .right-ibox-2022 .flex-6 {
    width: 48%;
    margin-bottom: 20px;
  }

  #capcell-facility2022 .right-ibox-2022 .flex-6 p {
    font-size: 16px;
    font-size: 1.6rem;
    margin-top: 10px;
  }

  #capcell-facility2022 .option-box {
    background: #fff;
    padding: 40px 6%;
  }

  #capcell-facility2022 .option-box .cap-title24 {
    border-bottom: 1px solid #164C6C;
    padding: 0 0 5px;
    margin-bottom: 15px;
  }

  #capcell-facility2022 .option-box .flex-area-2022 {
    display: flex;
    justify-content: space-between;
    margin: 40px 0 0;
  }

  #capcell-facility2022 .option-box .flex-area-2022.last-box {
    margin: 40px 0 20px;
  }

  #capcell-facility2022 .option-box .flex-4-2022 {
    width: 48%;
    margin-bottom: 20px;
  }

  #capcell-facility2022 .option-box .flex-6-2022 {
    width: 32%;
    margin-bottom: 20px;
  }

  #capcell-facility2022 .option-box .flex-area-2022 p {
    font-size: 14px;
    font-size: 1.4rem;
    margin-top: 10px;
  }

  /*流れ*/
  #capcell-flow-2022 .of-line-title-2022 h2 {
    font-size: 22px;
    font-size: 2.2rem;
  }

  #capcell-flow-2022 .of-flow-box-2022 .flex-area-2022 {
    padding: 25px 0 20px;
  }

  /*シミュレーション*/
  #capcell-simu-2022 .common-box .flex-area-2022 .left-box-2022 img {
    width: auto;
    height: 350px;
  }

  #capcell-simu-2022 .common-box .flex-area-2022 .right-box-2022 {
    width: 100%;
    margin-top: 30px;
  }

  #capcell-simu-2022 .common-box .simulation-list dl dd {
    padding: 20px 0;
    width: calc(100% - 130px);
    line-height: 150%;
  }

  #capcell-simu-2022 .common-box .simulation-list dl dt.btxt-2022 {
    padding: 20px 0 20px 15px;
    width: 130px;
    text-align: left;
  }

  #capcell-simu-2022 .radio-box .flex-area-2022 {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
  }

  #capcell-simu-2022 .radio-box .left-box-2022 {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 0px;
  }

  #capcell-simu-2022 .radio-box .right-box-2022 {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }

  #capcell-simu-2022 .radio-box .center-box-2022 {
    width: 33%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
    padding: 0 5px;
  }

  #capcell-simu-2022 .radio-box .btxt-2022 {
    padding-right: 0px;
    margin-bottom: 0px;
  }

  #capcell-simu-2022 .radio-box p {
    font-size: 12px;
    font-size: 1.2rem;
    padding: 5px 0;
  }

  #capcell-simu-2022 .radio-box .left-nbox-2022 {
    width: 25%;
    padding: 0 5px;
  }

  #capcell-simu-2022 .radio-box .center-nbox-2022 {
    width: 33%;
    padding: 0 5px;
  }

  #capcell-simu-2022 .radio-box .right-nbox-2022 {
    width: 40%;
    padding: 0 5px;
  }

  #capcell-simu-2022 input[type=radio] {
    background-color: #fff;
    border: 1px solid #bcbcbc;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    left: 5px;
    margin: 0px 4px 2px 0;
    vertical-align: middle;
  }

  #capcell-simu-2022 .left-box-2022 p img {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: auto;
    margin-right: 0px;
  }

  /*オフィス*/
  #capcell-office-2022 .flex-2022 {
    padding-bottom: 10px;
  }

  #capcell-office-2022 .flex-5 {
    margin-bottom: 50px;
  }
}

@media (max-width:640px) {

  /*#capcell01-2022*/
  #capcell01-2022 .of-line-title-2022 h2 {
    font-size: 19px;
    font-size: 1.9rem;
  }

  #capcell01-2022 .flex-4:nth-child(3) img {
    width: 100%;
    max-width: 85%;
  }

  #capcell01-2022 .flex-4:nth-child(4) img {
    width: 100%;
    max-width: 85%;
  }

  /*事例*/
  #capcell-case-2022 .introduction-box .intro-title, #capcell-download-2022 .introduction-box .intro-title {
    font-size: 16px;
    font-size: 1.6rem;
    margin: 15px 0 0;
  }

  /*仕様　設備*/
  #capcell-facility2022 .img-box-one .size1 {
    position: absolute;
    left: 11%;
    bottom: 0;
    text-align: center;
  }

  #capcell-facility2022 .img-box-one .size2 {
    position: absolute;
    left: 63%;
    bottom: 0;
    text-align: center;
  }

  /*オフィス*/
  /*arrow 2022 white*/
  #capcell-office-2022 .arrow-box-white p::before {
    right: 15px;
    width: 20px;
    height: 1px;
  }

  #capcell-office-2022 .arrow-box-white p::after {
    right: 15px;
    margin: auto;
    width: 7px;
    height: 7px;
  }

  #capcell-office-2022 .arrow-box-white p:hover::before {
    right: 5px;
    margin: auto;
    width: 30px;
    height: 1px;
  }

  #capcell-office-2022 .arrow-box-white p:hover::after {
    right: 5px;
    margin: auto;
    width: 7px;
    height: 7px;
  }
}


/*オフィス見学*/
.officetour-page .office-title30 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.officetour-page .office-title24 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.officetour-page .office-title20 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

/*#officetour01*/
#officetour01 {
  background: #F1EBE6;
  text-align: center;
}

#officetour01 .subtxt {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 500;
  margin: 0px 0 10px;
  text-align: center;
}

#officetour01 .txt-2022 {
  margin: 30px auto 0;
  text-align: center;
  display: inline-block;
}

/*officetour-archive*/
#officetour-archive {
  background: #F1EBE6;
}

#officetour-archive .head-area-2022 {
  position: relative;
}

#officetour-archive .head-area-2022 a {
  position: absolute;
  top: 10px;
  right: 0px;
  display: block;
  background-color: #DEDEDE;
  border-radius: 15px;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #164C6C;
  padding: 5px 8px;
  transition: all .5s;
}

#officetour-archive .head-area-2022 a:hover {
  background-color: #ECDBCC;
  color: #fff;
}

#officetour-archive .flex-area-2022 {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

#officetour-archive .flex-area-2022 article {
  width: 31%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 80px;
}

#officetour-archive .txt_location {
  text-align: left;
  line-height: 160%;
  margin-left: 4.2em;
  margin-top: 15px;
}

#officetour-archive .txt_location::before {
  content: '所在地：';
  margin-left: -4.2em;
}

#officetour-archive .txt_hours {
  text-align: left;
  line-height: 160%;
  margin-left: 5.3em;
  margin-top: 5px;
  margin-bottom: 5px;
}

#officetour-archive .txt_hours::before {
  content: '営業時間：';
  margin-left: -5.3em;
}

#officetour-archive .txt_holiday {
  text-align: left;
  line-height: 160%;
  margin-left: 4.2em;
}

#officetour-archive .txt_holiday::before {
  content: '定休日：';
  margin-left: -4.2em;
}

#officetour-archive .arrow-box-blue {
  margin: 30px 0 0;
}

#officetour-archive .arrow-box-blue p {
  width: 100%;
}

#officetour-archive .common-box {
  margin: 20px 0;
  padding: 45px 35px;
  background: #fff;
}

#officetour-archive .common-box .office-title24 {
  text-align: center;
}

#officetour-archive .common-box .flex-2022 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 50px 0 0;
}

#officetour-archive .coment-box {
  width: 48%;
  padding: 25px 35px 35px 25px;
  position: relative;
  background: #F1EBE6;
  margin-bottom: 50px;
  display: flex;
  align-items: flex-start;
}

#officetour-archive .coment-box div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#officetour-archive .coment-box:last-child {
  width: 100%;
}

#officetour-archive .coment-box img {
  width: 60px;
  padding-right: 15px;
}

#officetour-archive .coment-box::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 1px;
  background: #ECDBCC;
}

#officetour-archive .coment-box::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 1px;
  background: #ECDBCC;
}

#officetour-archive .btxt-2022 {
  font-weight: 500;
  line-height: 200%;
}

#officetour-archive .txt-2022 {
  line-height: 200%;
  margin-top: 20px;
}

#officetour-archive .name-2022 {
  color: #989898;
  line-height: 200%;
  margin-top: 20px;
}

/*officetour-sky*/
#officetour-sky {}

#officetour-sky .common-box {
  background: #164C6C;
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}

#officetour-sky .flex-area-2022 {
  align-items: stretch;
  position: relative;
  z-index: 10;
}

#officetour-sky .left-box-2022 {
  width: 50%;
  padding-right: 30px;
  text-align: right;
}

#officetour-sky .left-box-2022 .img01 {
  width: 100%;
  max-width: 500px;
}

#officetour-sky .right-box-2022 {
  width: 50%;
  padding-left: 30px;
}

#officetour-sky .right-box-2022 .office-title24 {
  color: #fff;
}

#officetour-sky .right-box-2022 .txt-2022 {
  color: #fff;
  margin: 25px 0 35px;
}

#officetour-sky .common-box .bg-txt {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.btn-white-2022 {
  display: inline-block;
  background: #F2EDE2;
  color: #164C6C;
  padding: 20px;
  transition: all .5s;
}

.btn-white-2022 svg {
  display: inline-block;
  fill: none;
  stroke-miterlimit: 10;
  width: 14px;
  transition: all .5s;
}

.btn-white-2022 polyline, .btn-white-2022 rect {
  stroke: #164C6C;
  transition: all .5s;
}

.btn-white-2022:hover {
  background-color: #ECDBCC;
  color: #164C6C;
}

.btn-white-2022:hover polyline, .btn-white-2022:hover rect {
  stroke: #164C6C;
  background: #164C6C;
  transition: all .5s;
}

@media (max-width:992px) {

  /*officetour-archive*/
  #officetour-archive .flex-area-2022 article {
    width: 48%;
    margin-bottom: 80px;
  }

  #officetour-archive .common-box .flex-2022 {
    display: flex;
    justify-content: space-between;
    margin: 50px 0 0;
  }

  /*officetour-sky*/
  #officetour-sky .flex-area-2022 {
    align-items: stretch;
    position: relative;
    z-index: 10;
  }

  #officetour-sky .left-box-2022 {
    width: 100%;
    padding-right: 0px;
    text-align: center;
  }

  #officetour-sky .left-box-2022 .img01 {
    width: 100%;
    max-width: 80%;
    margin-bottom: 30px;
  }

  #officetour-sky .right-box-2022 {
    width: 100%;
    padding-left: 00px;
  }

  #officetour-sky .right-box-2022 .txt-2022 {
    color: #fff;
    margin: 25px 0 35px;
  }

  #officetour-sky .common-box .bg-txt {
    position: absolute;
    top: -80px;
    left: -26px;
    bottom: auto;
    width: 100%;
    transform: rotate(90deg);
    transform-origin: bottom left;
  }
}

@media (max-width:768px) {
  .officetour-page .mv-toptxt-2022 {
    top: 55%;
  }

  .officetour-page .office-title30 {
    font-size: 21px;
    font-size: 2.1rem;
  }

  .officetour-page .office-title24 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    color: #164C6C;
    line-height: 175%;
  }

  #officetour01 {
    text-align: center;
  }

  #officetour01 .subtxt {
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0px 0 10px;
    text-align: center;
  }

  /*officetour-archive*/
  #officetour-archive .flex-area-2022 article {
    width: 100%;
    margin-bottom: 80px;
  }

  #officetour-archive .common-box {
    margin: 20px 0;
    padding: 30px 25px;
    background: #fff;
  }

  #officetour-archive .common-box .flex-2022 {
    display: block;
    justify-content: space-between;
    margin: 30px 0 0;
  }

  #officetour-archive .coment-box {
    width: 100%;
    padding: 25px 35px 35px 25px;
    margin-bottom: 50px;
  }

  #officetour-archive .coment-box img {
    width: 50px;
    padding-right: 15px;
  }

  /*officetour-sky*/
  #officetour-sky {
    background: #164C6C;
    position: relative;
  }

  #officetour-sky .common-box {
    padding: 0px 20px;
  }

  #officetour-sky .left-box-2022 .img01 {
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }

  #officetour-sky .bg-txt {
    position: absolute;
    top: -5%;
    left: -3%;
    width: 100%;
    transform: rotate(90deg);
    transform-origin: bottom left;
  }

  #officetour-sky .bg-txt img {
    width: 80%;
    height: auto;
  }
}

@media (max-width:640px) {

  /*officetour-sky*/
  #officetour-sky .bg-txt {
    position: absolute;
    top: 0%;
    left: -3%;
    width: 100%;
    transform: rotate(90deg);
    transform-origin: bottom left;
  }
}

/*オフィス一覧　詳細ページ*/

/*MV*/
.office-single-mv {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
  padding: 80px 0 0;
}

.office-single-mv.sappro-bg {
  background-image: url(../img/officetour/05sapporo/sapporo_mv.jpg);
}

.office-single-mv.sendai-bg {
  background-image: url(../img/officetour/06sendai/sendai_mv.jpg);
}

.office-single-mv.omiya-bg {
  background-image: url(../img/officetour/07saitama/omiya_mv.jpg);
}

.office-single-mv.nihonbashi-bg {
  background-image: url(../img/officetour/01nihonbashi/nihonbashi_mv.jpg);
}

.office-single-mv.nishikasai-bg {
  background-image: url(../img/officetour/02nishikasai/nishikasai_mv.jpg);
}

.office-single-mv.okazaki-bg {
  background-image: url(../img/officetour/03okazaki/okazaki_mv.jpg);
}

.office-single-mv.nagoya-bg {
  background-image: url(../img/officetour/04nagoya/nagoya_mv.jpg);
}

.office-single-mv.osaka-bg {
  background-image: url(../img/officetour/08osaka/osaka_mv.jpg);
}

.office-single-mv.fukuoka-bg {
  background-image: url(../img/officetour/09fukuoka/fukuoka_mv.jpg);
}

#single-mv .pnkz-2022 li {
  color: #fff;
}

#single-mv .pnkz-2022 li a {
  color: #fff;
}

/*single-officetour-wrapper*/
#single-officetour-wrapper {
  background: #fff;
  padding: 0;
}

/*header*/
#single-officetour-header {
  padding: 100px 0 80px
}

#single-officetour-header .eng-txt {
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'futura-pt', serif;
}

#single-officetour-header .flex-2022 {
  display: flex;
  align-items: stretch;
  padding-bottom: 50px;
}

#single-officetour-header .left-box-2022 {
  width: 50%;
  padding-right: 20px;
}

#single-officetour-header .right-box-2022 {
  width: 50%;
  padding-left: 20px;
}

.singleOfficeBox {
  font-family: "Noto Sans JP", serif;
  position: relative;
}

.singleOfficeBox figcaption span {
  position: absolute;
  top: 0;
  left: 20px;
  transform-origin: top left;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  font-family: 'futura-pt', serif;
  font-size: 20px;
  color: #707070;
  line-height: 40px;
  background: #fff;
  display: inline-block;
  padding-right: 10px;
}

.singleOfficeBox figcaption::before {
  content: '';
  width: 1px;
  background: #989898;
  position: absolute;
  top: 0;
  bottom: 0px;
  left: 0;
  z-index: 0;
}

.singleOfficeBox figure span:after {
  content: '';
  width: 0;
  height: 0;
  background: none;
  position: absolute;
  bottom: -15px;
  right: -15px;
}

.singleOfficeBox dl {
  display: flex;
  padding-left: 40px;
  width: 100%;
}

.singleOfficeBox dl dt {
  font-size: 16px;
  font-size: 1.6rem;
  width: 100px;
  padding-bottom: 10px;
  line-height: 175%;
}

.singleOfficeBox dl dd {
  font-size: 16px;
  font-size: 1.6rem;
  width: calc(100% - 100px);
  padding-bottom: 10px;
  line-height: 175%;
}

.singleOfficeBox .btxt-2022 {
  font-weight: 600;
}

.singleOfficeBox .txt_attention{
  margin-top: 10px;
  padding-left: 40px;
  font-size: 13px;
  font-weight: bold;
}
#officetour-archive .txt_attention{
  margin-top: 10px;
  font-size: 13px;
  font-weight: bold;
}

#single-officetour-header .common-box {
  padding: 50px 0;
  position: relative;
}

#single-officetour-header .common-box .gmap-btn {
  position: absolute;
  top: 10px;
  right: -30px;
  display: block;
  background-color: #DEDEDE;
  border-radius: 15px;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #164C6C;
  padding: 5px 10px;
  transition: all .5s;
}

#single-officetour-header .single-gmap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 38.333333%;
}

#single-officetour-header .single-gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*arrow 2022 border*/
.arrow-box-border {
  position: relative;
  text-align: left;
  margin: 50px 0;
  transition: all .5s;
}

.singleOfficeBox .arrow-box-border {
  padding-left: 40px;
}

.arrow-box-border p {
  position: relative;
  display: inline-block;
  border: solid 1px #164C6C;
  color: #164C6C;
  padding: 15px 90px 15px 25px;
  vertical-align: middle;
  text-decoration: none;
  transition: all .5s;
}

.arrow-box-border p::before {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 20px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-box-border p::after {
  position: absolute;
  top: 50%;
  right: 40px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

.arrow-box-border:hover {
  transition: all .5s;
}

.arrow-box-border p:hover {
  background-color: #ECDBCC;
  border: solid 1px #ECDBCC;
  color: #164C6C;
  transition: all .5s;
}

.arrow-box-border p:hover::before {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background: #164C6C;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all .5s;
}

.arrow-box-border p:hover::after {
  position: absolute;
  top: 50%;
  right: 30px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #164C6C;
  border-right: 1px solid #164C6C;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
}

/*main*/
/*Feature*/
#single-officefeature {
  background: #F1EBE6;
  padding-bottom: 120px;
}

.omiya-page #single-officefeature {
  padding-bottom: 160px;
}

#single-officefeature .header-area {
  padding: 50px 0;
  text-align: center;
}

#single-officefeature .header-area .office-title24 {
  text-align: center;
}

#single-officefeature .header-area .sub-txt {
  text-align: center;
  line-height: 200%;
  margin-top: 25px;
}

#single-officefeature .flex-area-2022 {
  align-items: flex-start;
  margin: 0px 0 80px;
  padding-bottom: 100px;
}

#single-officefeature .left-ibox-2022 {
  width: 57%;
  position: relative;
  padding-right: 20px;
}

#single-officefeature .right-ibox-2022 {
  width: 57%;
  position: relative;
  padding-left: 20px;
}

#single-officefeature .left-ibox-2022 .top-txt {
  font-family: 'futura-pt', serif;
  position: relative;
  top: 30px;
  left: 20%;
  display: block;
}

#single-officefeature .left-ibox-2022 .top-txt span {
  font-size: 60px;
  font-size: 6.0rem;
  font-family: 'futura-pt', serif;
  line-height: 120%;
  display: block;
}

#single-officefeature .left-ibox-2022 .left-img-box01 {
  width: 100%;
  padding-left: 18%;
}

#single-officefeature .left-ibox-2022 .left-img-box02 {
  position: relative;
  right: -210px;
  top: -20px;
  width: 40%;
  z-index: 5;
  margin-left: auto;
}

#single-officefeature .left-ibox-2022 .left-img-box03 {
  position: absolute;
  left: 0;
  bottom: -160px;
  width: 48%;
  z-index: 10;
}

#single-officefeature .right-ibox-2022 .top-txt {
  font-family: 'futura-pt', serif;
  position: relative;
  top: 30px;
  left: -2%;
  display: block;
}

#single-officefeature .right-ibox-2022 .top-txt span {
  font-size: 60px;
  font-size: 6.0rem;
  font-family: 'futura-pt', serif;
  line-height: 120%;
  display: block;
}

#single-officefeature .right-ibox-2022 .right-img-box01 {
  width: 100%;
  padding-right: 18%;
}

#single-officefeature .right-ibox-2022 .right-img-box02 {
  position: relative;
  left: -210px;
  top: -20px;
  width: 40%;
  z-index: 5;
  margin-right: auto;
}

#single-officefeature .right-ibox-2022 .right-img-box03 {
  position: absolute;
  right: 0;
  bottom: -160px;
  width: 48%;
  z-index: 10;
}

#single-officefeature .caption-txt01 {
  font-size: 14px;
  font-size: 1.4rem;
  position: absolute;
  left: 0;
  bottom: -30px;
  display: inline-block;
  text-align: left;
}

#single-officefeature .caption-txt02 {
  font-size: 14px;
  font-size: 1.4rem;
  position: absolute;
  right: 0;
  bottom: -30px;
  text-align: right;
}

#single-officefeature .left-box-2022 {
  width: 43%;
  padding-right: 60px;
  padding-left: 9%;
  padding-top: 5%;
}

#single-officefeature .right-box-2022 {
  width: 43%;
  padding-left: 60px;
  padding-right: 9%;
  padding-top: 5%;
}

#single-officefeature .left-box-2022 .office-title24, #single-officefeature .right-box-2022 .office-title24 {
  line-height: 150%;
  padding-bottom: 30px;
  margin: 15% 0 40px;
  position: relative;
}

/*.sendai-page #single-officefeature .left-box-2022 .office-title24,.sendai-page #single-officefeature .right-box-2022 .office-title24{line-height:150%;padding-bottom:30px;margin:40% 0 40px;position:relative;}*/
#single-officefeature .left-box-2022 .office-title24::before, #single-officefeature .right-box-2022 .office-title24::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 1px;
  background: #707070;
}

#single-officefeature .left-box-2022 p, #single-officefeature .right-box-2022 p {
  text-align: left;
}

/*VR*/
#single-officevr {
  background-color: #fff;
  margin-top: -120px;
  padding-top: 120px;
}

#single-officevr-none {
  background-color: #F2F0F0;
}

#single-officevr .office-title24 {
  margin: 0px 0 60px;
  text-align: center;
}

#single-officevr .common-box {
  margin-bottom: 120px;
}

#single-officevr .common-box.last-box {
  margin-bottom: 0;
}

#single-officevr .flex-area-2022 {
  justify-content: space-between;
  margin: 15px 0 15px;
}

#single-officevr .common-box .office-Marcetitle {
  font-family: 'futura-pt', serif;
  font-size: 30px;
  font-size: 3.0rem;
}

#single-officevr .common-box .left-txt {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
}

.vr-box-outer {
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
}

#single-officevr .common-box .vr-box {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

#single-officevr .common-box .vr-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*aside*/
#single-office-content aside {
  padding: 70px 0;
  text-align: center;
}

#single-office-content aside .office-title24 {
  text-align: center;
  margin: 0px 0 0px;
}

#single-office-content aside .arrow-box-blue {
  margin: 20px 0 60px;
}

#single-office-content aside .arrow-box-blue p {
  padding: 25px 90px 25px 25px;
}

#single-office-content aside .back-btn {
  display: inline-block;
  padding: 15px;
  border: 1px solid #164C6C;
  color: #164C6C;
  transition: all .5s;
}

#single-office-content aside .back-btn:hover {
  background-color: #ECDBCC;
  color: #164C6C;
  border: 1px solid #ECDBCC;
}

.sapporo-page #single-office-content aside {
  padding: 0px 0 120px;
  text-align: center;
}

@media (max-width:1200px) {

  /*MV*/
  .office-single-mv {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 550px;
    padding: 80px 0 0;
  }

  /*Feature*/
  .omiya-page #single-officefeature {
    padding-bottom: 80px;
  }

  #single-officefeature .flex-area-2022 {
    display: block;
    margin: 80px 0;
    padding-bottom: 40px;
  }

  #single-officefeature .left-ibox-2022 {
    width: 100%;
    position: relative;
    padding-right: 0px;
  }

  #single-officefeature .right-ibox-2022 {
    width: 100%;
    position: relative;
    padding-left: 0px;
  }

  #single-officefeature .left-ibox-2022 .top-txt {
    position: relative;
    top: 30px;
    left: 10%;
  }

  #single-officefeature .left-ibox-2022 .top-txt span {
    font-size: 60px;
    font-size: 6.0rem;
  }

  #single-officefeature .left-ibox-2022 .left-img-box01 {
    width: 82%;
    margin: 0 auto;
    padding: 0;
  }

  #single-officefeature .left-ibox-2022 .left-img-box01 img {
    width: 80%;
  }

  #single-officefeature .left-ibox-2022 .left-img-box02 {
    position: relative;
    right: 0px;
    top: -20px;
    width: 30%;
    margin-left: auto;
  }

  #single-officefeature .left-ibox-2022 .left-img-box03 {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: -100px;
    width: 38%;
  }

  #single-officefeature .right-ibox-2022 .top-txt {
    position: relative;
    top: 30px;
    left: 23%;
    display: block;
  }

  #single-officefeature .right-ibox-2022 .top-txt span {
    font-size: 60px;
    font-size: 6.0rem;
  }

  #single-officefeature .right-ibox-2022 .right-img-box01 {
    width: 82%;
    margin: 0 auto;
    padding-right: 0;
    text-align: right;
  }

  #single-officefeature .right-ibox-2022 .right-img-box01 img {
    width: 80%;
  }

  #single-officefeature .right-ibox-2022 .right-img-box02 {
    position: relative;
    left: 0px;
    top: -20px;
    width: 30%;
    margin-right: auto;
  }

  #single-officefeature .right-ibox-2022 .right-img-box03 {
    position: relative;
    right: 0;
    bottom: 0;
    margin-top: -100px;
    width: 38%;
  }

  #single-officefeature .caption-txt01 {
    text-align: left;
    margin-top: 10px;
  }

  #single-officefeature .caption-txt02 {
    text-align: right;
    margin-top: 10px;
  }

  #single-officefeature .left-box-2022 {
    width: 82%;
    margin: 65px auto 0;
    padding: 0px;
  }

  #single-officefeature .right-box-2022 {
    width: 82%;
    margin: 65px auto 0;
    padding: 0px;
  }

  #single-officefeature .left-box-2022 .office-title24, #single-officefeature .right-box-2022 .office-title24 {
    line-height: 150%;
    padding-bottom: 10px;
    margin: 0 0 30px;
    position: relative;
  }

  /*.sendai-page #single-officefeature .left-box-2022 .office-title24,.sendai-page #single-officefeature .right-box-2022 .office-title24{line-height:150%;padding-bottom:10px;margin:0 0 30px;position:relative;}*/
  #single-officefeature .left-box-2022 .office-title24::before, #single-officefeature .right-box-2022 .office-title24::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: #707070;
  }

  #single-officefeature .left-box-2022 p, #single-officefeature .right-box-2022 p {
    text-align: left;
  }

  #single-officefeature .left-tbox-2022 {
    width: 82%;
    margin: 50px auto 0;
    padding: 0px;
  }

  #single-officefeature .left-tbox-2022 .office-title24 {
    display: block;
    width: 80%;
    padding-bottom: 10px;
    margin: 0 0 30px auto;
    position: relative;
  }

  #single-officefeature .left-tbox-2022 .office-title24::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: #707070;
  }

  #single-officefeature .left-tbox-2022 p {
    text-align: left;
    display: block;
    width: 80%;
    margin-left: auto;
  }
}

@media (max-width:992px) {

  /*header*/
  #single-officetour-header .flex-2022 {
    display: block;
    align-items: stretch;
    padding-bottom: 0px;
  }

  #single-officetour-header .eng-txt {
    font-size: 18px;
    font-size: 1.8rem;
  }

  #single-officetour-header .left-box-2022 {
    width: 100%;
    padding-right: 0px;
    margin-bottom: 0px;
  }

  #single-officetour-header .right-box-2022 {
    width: 100%;
    padding-left: 0px;
  }

  .singleOfficeBox {
    margin-top: 45px;
  }

  .singleOfficeBox figcaption span {
    position: absolute;
    top: 0;
    left: 20px;
    transform-origin: top left;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    font-size: 18px;
    line-height: 40px;
    display: inline-block;
    padding-right: 10px;
  }

  .singleOfficeBox figcaption::before {
    content: '';
    width: 1px;
    background: #989898;
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0;
    z-index: 0;
  }

  .singleOfficeBox figure span:after {
    content: '';
    width: 0;
    height: 0;
    background: none;
    position: absolute;
    bottom: -15px;
    right: -15px;
  }

  .singleOfficeBox dl {
    display: flex;
    padding-left: 40px;
    width: 100%;
  }

  .singleOfficeBox dl dt {
    font-size: 15px;
    font-size: 1.5rem;
    width: 100px;
  }

  .singleOfficeBox dl dd {
    font-size: 15px;
    font-size: 1.5rem;
    width: calc(100% - 100px);
    padding-bottom: 10px;
    line-height: 175%;
  }

  .singleOfficeBox .btxt-2022 {
    font-weight: 600;
  }

  .singleOfficeBox .txt_attention{
    margin-top: 10px;
    padding-left: 40px;
    font-size: 13px;
    font-weight: bold;
  }
    #officetour-archive .txt_attention{
    margin-top: 10px;
    font-size: 13px;
    font-weight: bold;
  }

  #single-officetour-header .common-box {
    padding: 30px 0 40px;
    position: relative;
  }

  #single-officetour-header .common-box .gmap-btn {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0px;
    display: block;
    background-color: #DEDEDE;
    border-radius: 15px;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #164C6C;
    padding: 5px 10px;
    transition: all .5s;
  }

  #single-officetour-header .single-gmap {
    padding-top: 66%;
  }

  #single-officetour-header .arrow-box-blue {
    margin-top: 70px;
  }

  /*Feature*/
  #single-officefeature .header-area {
    padding: 10px 0;
    text-align: center;
  }
}

@media (max-width:768px) {

  /*MV*/
  .office-single-mv {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 400px;
    padding: 80px 0 0;
  }

  /*Feature*/
  #single-officefeature .flex-area-2022 {
    display: block;
    margin: 60px 0;
    padding-bottom: 10px;
  }

  #single-officefeature .flex-area-2022.last-area {
    display: block;
    margin: 60px 0 0;
    padding-bottom: 40px;
  }

  #single-officefeature .left-ibox-2022 .top-txt {
    top: 20px;
    left: 5%;
  }

  #single-officefeature .left-ibox-2022 .top-txt span {
    font-size: 45px;
    font-size: 4.5rem;
  }

  #single-officefeature .left-ibox-2022 .left-img-box01 {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
  }

  #single-officefeature .left-ibox-2022 .left-img-box01 img {
    width: 80%;
  }

  #single-officefeature .left-ibox-2022 .left-img-box02 {
    position: relative;
    top: -50px;
    width: 40%;
  }

  #single-officefeature .left-ibox-2022 .left-img-box03 {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: -50px;
    width: 45%;
  }

  #single-officefeature .left-ibox-2022 .left-img-box02 img.cap-none {
    margin-top: 30px;
  }

  #single-officefeature .left-ibox-2022 .left-img-box03 img.cap-none {
    margin-top: 30px;
  }

  #single-officefeature .right-ibox-2022 .top-txt {
    position: relative;
    top: 20px;
    left: 19%;
  }

  #single-officefeature .right-ibox-2022 .top-txt span {
    font-size: 45px;
    font-size: 4.5rem;
  }

  #single-officefeature .right-ibox-2022 .right-img-box01 {
    width: 100%;
    padding: 0 15px;
  }

  #single-officefeature .right-ibox-2022 .right-img-box01 img {
    width: 80%;
  }

  #single-officefeature .right-ibox-2022 .right-img-box02 {
    position: relative;
    top: -50px;
    width: 40%;
  }

  #single-officefeature .right-ibox-2022 .right-img-box03 {
    position: relative;
    margin-top: -50px;
    width: 45%;
  }

  #single-officefeature .right-ibox-2022 .right-img-box02 img.cap-none {
    margin-top: 30px;
  }

  #single-officefeature .right-ibox-2022 .right-img-box03 img.cap-none {
    margin-top: 30px;
  }

  #single-officefeature .left-box-2022 {
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  #single-officefeature .right-box-2022 {
    width: 100%;
    margin: 40px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }

  #single-officefeature .left-tbox-2022 {
    width: 100%;
    margin: 40px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }

  #single-officefeature .left-tbox-2022 .office-title24 {
    display: block;
    width: 80%;
    margin: 0 0 30px auto;
  }

  #single-officefeature .left-tbox-2022 p {
    text-align: left;
    display: block;
    width: 80%;
    margin-left: auto;
  }

  #single-officefeature .caption-txt01 {
    font-size: 12px;
    font-size: 1.2rem;
    position: relative;
    left: 0;
    bottom: 0px;
    display: inline-block;
    text-align: left;
  }

  #single-officefeature .caption-txt02 {
    font-size: 12px;
    font-size: 1.2rem;
    position: relative;
    right: 0;
    bottom: 0px;
    text-align: right;
    margin-left: auto;
  }

  /*VR*/
  #single-officevr {
    background-color: #F2F0F0;
    margin-top: -100px;
    padding-top: 100px;
  }

  #single-officevr .office-title24 {
    font-size: 2.2rem;
    margin: 40px 0 60px;
    text-align: center;
  }

  #single-officevr .common-box {
    margin-bottom: 80px;
  }

  #single-officevr .common-box .left-txt {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 500;
  }

  #single-officevr .flex-area-2022 {
    display: flex;
    margin: 15px 0 10px;
  }

  #single-officevr .common-box .office-Marcetitle {
    font-size: 30px;
    font-size: .3.0rem;
  }

  /*aside*/
  #single-office-content aside {
    padding: 40px 0;
    text-align: center;
  }
}

@media (max-width:640px) {
  #single-officefeature {
    padding-bottom: 12%;
  }

  .omiya-page #single-officefeature {
    padding-bottom: 12%;
  }

  /*VR*/
  #single-officevr {
    background-color: #F2F0F0;
    margin-top: 0px;
    padding-top: 12%;
  }

  #single-officevr .common-box .office-Marcetitle {
    font-size: 22px;
    font-size: 2.2rem;
  }
}

/*フリーアドレス　ページ*/

/*Font*/
.free-page .free-title30 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.free-page .free-title24 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.free-page .free-title22 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.free-page .free-title20 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

/*free01-2022*/
#free01-2022 {}

#free01-2022 .header-area {
  padding: 40px 0;
}

#free01-2022 .header-area .free-title30 {
  text-align: center;
  margin: 0 0 20px;
}

#free01-2022 .header-area .txt-2022 {
  text-align: left;
  line-height: 175%;
  width: 75%;
  margin: 0 auto;
}

#free01-2022 .common-box {
  margin: 80px 0;
}

#free01-2022 .common-box table {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#free01-2022 .common-box table .txt-center {
  text-align: center;
}

#free01-2022 .common-box table tbody {
  width: 100%;
  margin: 0px;
}

#free01-2022 .common-box table tr {}

#free01-2022 .common-box table th {
  padding: 15px 20px;
  border: 1px solid #34384F;
}

#free01-2022 .common-box table td {
  padding: 15px;
  border: 1px solid #34384F;
  height: 100%;
}

#free01-2022 .common-box table th.block70, #free01-2022 .common-box table td.block70 {
  width: 70px;
  border: 1px solid #34384F;
  padding: 15px 0;
}

#free01-2022 .common-box table th.block70.none-border, #free01-2022 .common-box table td.block70.none-border {
  border: 1px solid transparent;
  border-right-color: #dedede;
}

#free01-2022 .common-box table .block3 {
  width: calc(100% / 3);
}

/*headarea*/
#free01-2022 .common-box table .head-area {
  font-weight: 500;
  border: 1px solid #DEDEDE;
  padding: 20px 30px;
}

#free01-2022 .common-box table .ver-top {
  vertical-align: top;
}

#free01-2022 .common-box table .head-area.last-border {
  border-bottom-color: #34384F;
}

#free01-2022 .common-box table .head-area img {
  width: 80%;
  height: auto;
  max-width: initial;
}

#free01-2022 .common-box table .head-area .btxt-2022 {
  font-weight: 500;
  text-align: center;
}

#free01-2022 .common-box table .head-area .free-title20 {
  width: 80%;
  text-align: center;
  margin: 20px auto 25px;
}

#free01-2022 .common-box table .head-area .txt-2022 {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  text-align: left;
  margin: 15px 0 0;
}

#free01-2022 .common-box table .bg-gray-2022 {
  background: rgba(144, 144, 144, .1);
}

#free01-2022 .common-box table .bg-none-2022 {
  border: none;
}

#free01-2022 .common-box table .bg-blue-2022 {
  background: #34384F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#free01-2022 .common-box table td img {
  width: 100%;
  max-width: 30px;
  display: block;
  margin: 0 auto;
}

#free01-2022 .common-box table td.block3 p {
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
}

#free01-2022 .common-box2 {
  margin: 60px auto 0;
}

#free01-2022 .common-box2 .free-title22 {
  text-align: center;
  padding: 30px 0;
}

#free01-2022 .common-box2 dl {
  position: relative;
  max-width: 70%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 30px auto;
}

#free01-2022 .common-box2 dl::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-left: 1px solid #707070;
  border-right: 1px solid #707070;
}

#free01-2022 .common-box2 dl dt {
  font-weight: 600;
  line-height: 175%;
  width: 25%;
  padding: 15px 0;
  text-align: center;
  position: relative;
}

#free01-2022 .common-box2 dl dt::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
  bottom: 20%;
  width: 1px;
  background: rgba(112, 112, 112, .55);
}

#free01-2022 .common-box2 dl dd {
  line-height: 175%;
  width: 75%;
  padding: 15px 25px;
  margin: 10px 0;
  position: relative;
}

#free01-2022 .common-box2 .bottom-txt {
  max-width: 70%;
  padding: 30px 0;
  margin: 0px auto;
  text-align: left;
}

/*free02-2022*/
#free02-2022 {
  background: #fff;
}

#free02-2022 .header-area {
  padding: 40px 0;
  margin: 0 auto;
  width: 80%;
}

#free02-2022 .header-area .free-title30 {
  text-align: center;
  margin: 0 0 20px;
  padding: 0 0 5px;
  border-bottom: 1px solid #3E455A;
}

#free02-2022 .header-area .common-box {
  margin: 60px 0;
}

#free02-2022 .header-area .common-box .free-title24 {
  text-align: center;
  margin: 0px 0 40px;
}

#free02-2022 .header-area .common-box .flex-area-2022 {
  justify-content: space-between;
}

#free02-2022 .header-area .common-box .flex-5 {
  width: 20%;
  text-align: center;
  position: relative;
}

#free02-2022 .header-area .common-box .flex-5::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 0;
  bottom: 30%;
  width: 1px;
  background: #707070;
}

#free02-2022 .header-area .common-box .flex-5:last-child::after {
  content: '';
  position: absolute;
  top: 30%;
  right: 0;
  bottom: 30%;
  width: 1px;
  background: #707070;
}

#free02-2022 .header-area .common-box .flex-5 p {
  text-align: center;
  line-height: 150%;
  margin: 0 0 15px;
}

#free02-2022 .header-area .common-box .flex-5 p span {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 500;
  display: block;
}

#free02-2022 .header-area .common-box .flex-5 img {
  width: 100%;
  max-width: 100px;
}

#free02-2022 .common-box2 {
  padding: 40px 0;
}

#free02-2022 .common-box2 .flex-area-2022 {
  align-items: stretch;
}

#free02-2022 .common-box2 .flex-area-2022 .left-box {
  width: 55%;
  padding-right: 20px;
}

#free02-2022 .common-box2 .flex-area-2022 .right-box {
  width: 45%;
}

#free02-2022 .common-box2 .flex-area-2022 .right-txtarea {
  width: 100%;
  padding-left: 40px;
}

#free02-2022 .common-box2 .flex-area-2022 .right-txtarea.sp992 {
  display: none;
}

#free02-2022 .common-box2 .flex-area-2022 .right-box .mark-txt {
  position: relative;
  text-align: left;
  margin-bottom: 5px;
}

#free02-2022 .common-box2 .flex-area-2022 .right-box .mark-txt::before {
  content: url(../img/free/check.svg);
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 5px;
}

#free02-2022 .common-box2 .flex-area-2022 .right-box .txt-2022 {
  line-height: 200%;
  text-align: left;
  margin-top: 30px;
}

/*#flow-day-map*/
#flow-day-map {
  padding: 60px 0 0;
}

#flow-day-map .head-box h4 {
  position: relative;
}

#flow-day-map .head-box h4::before {
  content: '';
  background: url(../img/free/icon_left.svg)no-repeat center / contain;
  margin-right: 10px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 30px;
}

#flow-day-map .head-box h4::after {
  content: '';
  background: url(../img/free/icon_right.svg)no-repeat center / contain;
  margin-left: 10px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 30px;
}

#flow-day-map .head-box .free-title20 {
  text-align: center;
  vertical-align: middle;
}

#flow-day-map .head-box .txt-2022 {
  text-align: center;
  width: 75%;
  margin: 15px auto;
}

#flow-day-map .mainbox {
  position: relative;
  width: 100%;
  margin: 60px auto;
  text-align: center;
}

#flow-day-map .mainbox .mainbox-img {
  position: relative;
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
}

#flow-day-map .mainbox .mainbox-img .flowmap-bg {
  position: relative;
  width: 100%;
  z-index: 0;
}

#flow-day-map .mainbox .c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(195, 195, 195, .75);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  max-width: 130px;
  max-height: 130px;
  border-width: 0;
  transition: all .5s;
}

#flow-day-map .mainbox .c-btn .free-title24 {
  transition: all .5s;
}

#flow-day-map .mainbox .c-btn .txt-2022 {
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 600;
  transition: all .5s;
}

#flow-day-map .mainbox .c-btn:hover {
  background: rgba(13, 16, 35, .8);
  transition: all .5s;
  cursor: pointer;
}

#flow-day-map .mainbox .c-btn:hover .free-title24 {
  color: #fff;
  transition: all .5s;
}

#flow-day-map .mainbox .c-btn:hover .txt-2022 {
  color: #fff;
  transition: all .5s;
}

#flow-day-map .mainbox .btn01 {
  position: absolute;
  top: 3%;
  left: 18%;
}

#flow-day-map .mainbox .btn02 {
  position: absolute;
  top: 3%;
  left: 62%;
}

#flow-day-map .mainbox .btn03 {
  position: absolute;
  top: 21%;
  left: 24%;
}

#flow-day-map .mainbox .btn04 {
  position: absolute;
  top: 27%;
  left: 75%;
}

#flow-day-map .mainbox .btn05 {
  position: absolute;
  top: 6%;
  left: 45%;
}

#flow-day-map .mainbox .btn06 {
  position: absolute;
  top: 48%;
  left: 85%;
}

/*フリーアドレス　モーダル*/
#flow-day-map .free-modal {
  display: none;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%;
}

/*#flow-day-map .free-modal{opacity:0;z-index:-100;transition:all .5s;}
#flow-day-map .free-modal.open-free{opacity:1;z-index:10;transition:all .5s;}*/
#flow-day-map .modal-content {
  position: absolute;
  background: rgba(13, 16, 35, .8);
  margin: 0 auto;
  width: 100%;
  max-width: 550px;
  padding: 20px
}

#flow-day-map #easyModal1 .modal-content {
  top: 2%;
  left: 34%;
}

#flow-day-map #easyModal2 .modal-content {
  top: 1%;
  right: 40%;
}

#flow-day-map #easyModal3 .modal-content {
  top: 37%;
  left: 39%;
}

#flow-day-map #easyModal4 .modal-content {
  top: 27%;
  right: 27%;
}

#flow-day-map #easyModal5 .modal-content {
  top: 21%;
  left: 60%;
}

#flow-day-map #easyModal6 .modal-content {
  top: 49%;
  right: 17%;
}

#flow-day-map .modal-content .under-line {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  line-height: 150%;
  padding: 0 0 5px;
  margin: 0 0 15px;
  border-bottom: 1px #fff dotted;
}

#flow-day-map .modal-content .under-line time {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  display: inline-block;
  margin-right: 10px;
}

#flow-day-map .modal-header {
  position: relative;
  z-index: 600;
}

#flow-day-map .modal-header .header-left {
  width: 48%;
  padding-right: 15px;
}

#flow-day-map .modal-header .header-right {
  width: 52%;
  padding-left: 15px;
}

#flow-day-map .modal-header img {
  width: 100%;
  height: auto;
}

#flow-day-map .modal-header p {
  color: #fff;
  line-height: 200%;
}

#flow-day-map #modalClose1, #flow-day-map #modalClose2, #flow-day-map #modalClose3, #flow-day-map #modalClose4, #flow-day-map #modalClose5, #flow-day-map #modalClose6 {
  font-size: 40px;
  color: #fff;
  text-align: right;
  position: absolute;
  top: 15px;
  right: 15px;
}

#flow-day-map #modalClose1:hover, #flow-day-map #modalClose2:hover, #flow-day-map #modalClose3:hover, #flow-day-map #modalClose4:hover, #flow-day-map #modalClose5:hover, #flow-day-map #modalClose6:hover {
  cursor: pointer;
}

#flow-day-map .modal-body {
  padding: 0px;
  margin: 15px 0;
  color: #fff;
}

#flow-day-map .modal-body a {
  color: #fff;
  position: relative;
}

#flow-day-map .modal-body .body-title {
  font-size: 19px;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 150%;
  padding: 0 0 5px;
  margin: 0 0 15px;
  border-bottom: 1px #fff dotted;
}

#flow-day-map .modal-body .flex-area-2022 {
  align-items: stretch;
  margin: 30px 0;
}

#flow-day-map .modal-body .left-box {
  width: 50%;
  padding-right: 15px;
}

#flow-day-map .modal-body .left-box img, #flow-day-map .modal-body .right-box img {
  width: 100%;
  height: auto;
}

#flow-day-map .modal-body .right-box {
  width: 50%;
  padding-left: 15px;
}

#flow-day-map .modal-body .btxt-2022 {
  font-weight: 600;
  line-height: 150%;
  margin-bottom: 10px;
}

#flow-day-map .modal-body .hover-link {
  color: #fff;
  position: relative;
  display: block;
  transition: all .5s;
}

#flow-day-map .modal-body .hover-link .img-box {
  position: relative;
  z-index: 650;
  transition: all .5s;
}

#flow-day-map .modal-body .hover-link .img-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  transition: all .5s;
}

#flow-day-map .modal-body .hover-link .img-box .hover-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  text-align: center;
  z-index: 700;
  transition: all .5s;
}

#flow-day-map .modal-body .hover-link:hover {
  display: block;
  transition: all .5s;
}

#flow-day-map .modal-body .hover-link:hover .img-box::before {
  opacity: 1;
  transition: all .5s;
}

#flow-day-map .modal-body .hover-link:hover .img-box .hover-txt {
  opacity: 1;
}

#flow-day-map .modal-body .arrow-box-blue {
  margin: 20px 0 0;
  text-align: left;
}

/*#flow-day-map .pin-spacer{padding:0!important;}
#flow-day-map .side-scroll{padding:80px 0 0;}
#flow-day-map .scroll-box{position:relative;width:100%;height:410px;}
#flow-day-map .scroll-box .scroll-list{display:flex;position:absolute;top: 60px;left: 0;display: flex;gap: 0 30px;}
#flow-day-map .scroll-box .content-box{min-width:320px;margin-right:30px;padding-bottom:30px;}
#flow-day-map .scroll-box .content-box:last-child{margin-right:0;}*/
#flow-day-map .content-box .txt-2022 {
  font-weight: 400;
  display: flex;
  align-items: center;
  margin: 10px 0 20px;
  padding: 0 0 10px;
  border-bottom: 1px solid #164C6C;
}

#flow-day-map .content-box .txt-2022 time {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  font-family: 'futura-pt', serif;
}

#flow-day-map .content-box .txt-2022 span {
  font-size: 20px;
  font-size: 2.0rem;
  padding: 0 15px;
}

#flow-day-map .content-box .mark-txt {
  position: relative;
  text-align: left;
  margin-bottom: 5px;
}

#flow-day-map .content-box .mark-txt::before {
  content: url(../img/free/check.svg);
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 5px;
}

/*SP 開閉メニュー*/
#flow-day-map .nav-Freearea-2022 {
  margin: 20px 0 0;
}

#flow-day-map .list-free-2022 {
  display: block;
  border-bottom: 1px solid #707070;
  padding: 10px 0;
  position: relative;
  transition: all .5s;
}

#flow-day-map .list-free-2022:last-child {
  border: none;
}

#flow-day-map .list-free-2022::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #707070;
  width: 16px;
  height: 1px;
  opacity: 1;
  transition: all .5s;
}

#flow-day-map .list-free-2022::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 28px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #707070;
  width: 1px;
  height: 16px;
  opacity: 1;
  transition: all .5s;
}

#flow-day-map .list-free-2022.open-free::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
  width: 16px;
  height: 1px;
}

#flow-day-map .list-free-2022.open-free::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 28px;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
  width: 1px;
  height: 16px;
  opacity: 0;
}

#flow-day-map .list-free-2022 .txt-2022 {
  font-weight: 600;
  display: flex;
}

#flow-day-map .list-free-2022 .txt-2022 time {
  font-weight: 600;
  width: 80px;
}

#flow-day-map .list-free_child-2022 {
  display: none;
  padding: 30px 0;
  border-bottom: 1px solid #707070;
}

#flow-day-map .list-free_child-2022 .modal-header .header-right p {
  color: #232734 !important;
  line-height: 200%;
}

#flow-day-map .list-free_child-2022 .modal-body {
  color: #232734 !important;
  padding: 0px;
  margin: 15px 0;
}

#flow-day-map .list-free_child-2022 .modal-body .under-line {
  font-size: 19px;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 150%;
  padding: 0 0 5px;
  margin: 0 0 15px;
  border-bottom: 1px #232734 dotted;
}

#flow-day-map .nav-Freearea-2022 .modal-body .flex-area-2022 {
  display: flex;
  align-items: stretch;
  margin: 30px 0;
}

#flow-day-map .nav-Freearea-2022 .modal-body .left-box {
  width: 40%;
  padding-right: 10px;
}

#flow-day-map .nav-Freearea-2022 .modal-body .left-box img {}

#flow-day-map .nav-Freearea-2022 .modal-body .right-box {
  width: 60%;
  padding-left: 0px;
  margin-top: 0px;
}

#flow-day-map .nav-Freearea-2022 .modal-body .arrow-box-blue {
  margin: 20px 0 40px;
  text-align: center;
}

#flow-day-map .nav-Freearea-2022 .modal-body .arrow-box-blue p {
  padding: 15px 80px 15px 20px;
}

/*#flow-day*/
#flow-day {
  margin: 120px 0 0;
  padding: 120px 0;
  border-top: 1px solid #707070;
}

#flow-day .free-title24 {
  text-align: center;
  margin-bottom: 15px;
}

#flow-day .scroll-box {
  overflow-x: hidden;
  width: 100%;
}

#flow-day .flow-day-img {
  width: 100%;
  height: auto;
  min-width: 1200px;
  margin: 60px auto;
}

#flow-day .line-box {
  position: relative;
  width: 100%;
  min-width: 1200px;
  height: 140px;
  margin: 0px 0;
  border-bottom: 1px solid #707070;
}

#flow-day .line-box .top-box {
  position: relative;
  height: 60px;
  border-bottom: 1px solid #707070;
}

#flow-day .line-box .top-box::before {
  content: '';
  position: absolute;
  left: 18.5%;
  top: 20%;
  bottom: 10%;
  width: 1px;
  background: #707070;
}

#flow-day .line-box .top-box::after {
  content: '';
  position: absolute;
  left: 77%;
  top: 20%;
  bottom: 10%;
  width: 1px;
  background: #707070;
}

#flow-day .line-box .top-box .num01 {
  position: absolute;
  top: 50%;
  left: 7%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 400;
  font-family: 'futura-pt', serif;
}

#flow-day .line-box .top-box .num02 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 400;
  font-family: 'futura-pt', serif;
}

#flow-day .line-box .top-box .num03 {
  position: absolute;
  top: 50%;
  left: 85%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 400;
  font-family: 'futura-pt', serif;
}

#flow-day .line-box .bottom-box {
  position: relative;
  height: 80px;
}

#flow-day .line-box .bottom-box .num04 {
  position: absolute;
  top: 50%;
  left: 5.5%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#flow-day .line-box .bottom-box .num05 {
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#flow-day .line-box .bottom-box .num06 {
  position: absolute;
  top: 50%;
  left: 58%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#flow-day .line-box .bottom-box .num07 {
  position: absolute;
  top: 50%;
  left: 85%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#flow-day .line-box .txt-2022 {
  font-size: 19px;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 160%;
  text-align: center;
}

#flow-day .line-box .en-txt {
  font-family: 'futura-pt', serif;
  line-height: 100%;
  text-align: center;
}

#free02-2022 #flow-day .bottom-txt {
  text-align: center;
  margin: 30px auto 0;
  width: 100%;
  padding-bottom: 0px;
}

#free02-2022 .common-box3 {}

#free02-2022 .common-box3 .flex-area-2022 {
  min-width: 1200px;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 50px;
  padding: 60px 0 0;
}

#free02-2022 .common-box3 .flex-area-2022 .flex-4 {
  width: 22%;
}

#free02-2022 .common-box3 .flex-area-2022 .txt-2022 {
  line-height: 150%;
  text-align: center;
  margin-top: 10px;
}

#free02-2022 .common-box3 .flex-area-2022 .eng-txt {
  font-family: 'futura-pt', serif;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 150%;
  text-align: center;
  margin-top: 5px;
}

#free02-2022 .common-box3 .bottom-txt {
  text-align: center;
  margin: 0 auto;
  width: 75%;
  padding-bottom: 60px;
}

#free02-2022 .common-box4 {
  padding: 80px 0;
  border-top: 1px solid #707070;
}

#free02-2022 .common-box4 .header-box {
  padding: 40px 0;
  margin: 0 auto;
}

#free02-2022 .common-box4 .header-box .free-title24 {
  text-align: center;
  margin: 0 0 20px;
}

#free02-2022 .common-box4 .header-box .txt-2022 {
  text-align: center;
}

#free02-2022 .common-box4 .flex-area-2022 {
  align-items: stretch;
}

#free02-2022 .common-box4 .flex-area-2022 .left-box {
  width: 50%;
  padding-right: 20px;
}

#free02-2022 .common-box4 .flex-area-2022 .right-box {
  width: 50%;
  padding-left: 20px;
}

#free02-2022 .common-box4 .flex-area-2022 .left-box img, #free02-2022 .common-box4 .flex-area-2022 .right-box img {
  margin-bottom: 20px;
}

#free02-2022 .common-box4 .flex-area-2022 .left-box .txt-2022, #free02-2022 .common-box4 .flex-area-2022 .right-box .txt-2022 {
  text-align: left;
}

#free02-2022 .common-box4 .flex-area-2022 .left-box .free-title20, #free02-2022 .common-box4 .flex-area-2022 .right-box .free-title20 {
  text-align: center;
  border-bottom: 1px solid #707070;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

/*swiper*/
#flow-slide-2022 .swiper-flow-area {
  margin: 0 auto;
  padding: 80px 0 20px;
  overflow-x: hidden;
}

#flow-slide-2022 .swiper-slide p {
  text-align: center;
  margin-top: 5px;
}

#flow-slide-2022 .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  top: -30px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

#flow-slide-2022 .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  top: -30px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:992px) {
  #flow-slide-2022 .swiper-button-next {
    width: 30px !important;
    top: -30px !important;
    background-size: 30px;
  }

  #flow-slide-2022 .swiper-button-prev {
    width: 30px !important;
    top: -30px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:768px) {
  #flow-slide-2022 .swiper-button-next {
    width: 30px !important;
    top: -40px !important;
    background-size: 30px;
  }

  #flow-slide-2022 .swiper-button-prev {
    width: 30px !important;
    top: -40px !important;
    right: 50px !important;
    background-size: 30px;
  }

  #flow-slide-2022 .arrow-box-blue {
    margin: 0px 0 30px;
  }
}

@media (max-width:640px) {
  #flow-slide-2022 .swiper-button-next {
    /*left:52%!important;*/
    top: -40px !important;
    background-size: 30px;
  }

  #flow-slide-2022 .swiper-button-prev {
    /*right:52%!important;*/
    top: -40px !important;
    background-size: 30px;
  }
}

/*free03-2022*/
#free03-2022 {
  background: #164C6C;
}

#free03-2022 .header-area {
  padding: 40px 0;
}

#free03-2022 .header-area .free-title24 {
  color: #fff;
  text-align: center;
  margin: 0 0 20px;
}

#free03-2022 .header-area .txt-2022 {
  color: #fff;
  line-height: 200%;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

#free03-2022 .common-box {
  width: 80%;
  margin: 20px auto;
}

#free03-2022 .common-box .free-title20 {
  color: #fff;
  text-align: center;
  margin: 0 0 30px;
}

#free03-2022 .common-box .flex-area-2022 {
  justify-content: space-between;
}

#free03-2022 .common-box .flex-4 {
  width: 24%;
  text-align: center;
}

#free03-2022 .common-box .flex-4 img {
  width: 70%;
}

#free03-2022 .common-box .flex-4 p {
  color: #fff;
  line-height: 150%;
  text-align: center;
  margin: 10px 0 0;
}

@media (max-width:1478px) {

  /*#flow-day*/
  #flow-day .scroll-box {
    overflow-x: scroll;
    width: 100%;
  }
}

@media (max-width:1340px) {
  #free01-2022 .common-box dl .dl-head-area img {
    width: 100%;
    height: auto;
    max-width: initial;
  }

  #free01-2022 .common-box dl .dl-head-area .free-title20 {
    width: 100%;
    text-align: center;
    margin: 20px auto 25px;
  }

  #flow-day-map .modal-content {
    max-width: 500px;
  }
}

@media (max-width:1200px) {
  #flow-day-map .mainbox .c-btn {
    background: rgba(195, 195, 195, .75);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    max-width: 120px;
    max-height: 120px;
  }

  #flow-day-map .mainbox .btn01 {
    position: absolute;
    top: 1%;
    left: 19%;
  }

  #flow-day-map .mainbox .btn02 {
    position: absolute;
    top: 1%;
    left: 62%;
  }

  #flow-day-map .mainbox .btn03 {
    position: absolute;
    top: 21%;
    left: 23%;
  }

  #flow-day-map .mainbox .btn04 {
    position: absolute;
    top: 27%;
    left: 73%;
  }

  #flow-day-map .mainbox .btn05 {
    position: absolute;
    top: 6%;
    left: 42%;
  }

  #flow-day-map .mainbox .btn06 {
    position: absolute;
    top: 48%;
    left: 81%;
  }

  /*フリーアドレス　モーダル*/
  #flow-day-map .modal-content {
    position: absolute;
    background: rgba(13, 16, 35, .8);
    margin: 0 auto;
    width: 100%;
    max-width: 50%;
  }

  #flow-day-map #easyModal1 .modal-content {
    top: 2%;
    left: 35%;
  }

  #flow-day-map #easyModal2 .modal-content {
    top: 1%;
    right: 39%;
  }

  #flow-day-map #easyModal3 .modal-content {
    top: 37%;
    left: 39%;
  }

  #flow-day-map #easyModal4 .modal-content {
    top: 27%;
    right: 28%;
  }

  #flow-day-map #easyModal5 .modal-content {
    top: 21%;
    left: 58%;
  }

  #flow-day-map #easyModal6 .modal-content {
    top: 49%;
    right: 20%;
  }

  #flow-day-map .modal-body {
    padding: 0px;
    margin: 15px 0;
    color: #fff;
  }

  #flow-day-map .modal-body .under-line {
    font-size: 19px;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 150%;
    padding: 0 0 5px;
    margin: 0 0 15px;
    border-bottom: 1px #fff dotted;
  }
}

@media (max-width:992px) {

  /*free01-2022*/
  #free01-2022 .header-area .txt-2022 {
    width: 80%;
  }

  #free01-2022 .common-box {
    margin: 40px 0;
  }

  #free01-2022 .common-box table {
    margin: 0px 0 80px;
    height: auto;
  }

  #free01-2022 .common-box table tr {}

  #free01-2022 .common-box table th {
    padding: 15px 20px;
    border: 1px solid #34384F;
  }

  #free01-2022 .common-box table th.block70, #free01-2022 .common-box table td.block70 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    border: 1px solid #34384F;
    padding: 15px 0;
  }

  #free01-2022 .common-box table th.block70.none-border, #free01-2022 .common-box table td.block70.none-border {
    border: none;
  }

  #free01-2022 .common-box table td {
    padding: 15px;
    border: 1px solid #34384F;
    min-height: 100%;
  }

  #free01-2022 .common-box table .block1 {
    width: 100%;
  }

  /*headarea*/
  #free01-2022 .common-box table .head-area {
    text-align: center;
    border: 1px solid #DEDEDE;
    padding: 20px 30px;
  }

  #free01-2022 .common-box table .head-area.last-border {
    border-bottom-color: #34384F;
  }

  #free01-2022 .common-box table .head-area img {
    width: 80%;
    height: auto;
    max-width: initial;
  }

  #free01-2022 .common-box table .head-area .btxt-2022 {
    font-weight: 500;
    text-align: center;
  }

  #free01-2022 .common-box table .head-area .free-title20 {
    width: 80%;
    text-align: center;
    margin: 10px auto 15px;
  }

  #free01-2022 .common-box table .head-area .txt-2022 {
    font-size: 14px;
    font-size: 1.4rem;
    text-align: left;
    margin: 15px 0 0;
  }

  #free01-2022 .common-box table .bg-blue-2022 {
    background: #34384F;
    color: #fff;
    ;
  }

  #free01-2022 .common-box table td img {
    width: 100%;
    max-width: 30px;
    margin: 0 auto;
  }

  #free01-2022 .common-box table td.block1 p {
    text-align: center;
  }

  #free01-2022 .common-box2 {
    margin: 60px auto 0;
  }

  #free01-2022 .common-box2 .free-title22 {
    text-align: center;
    padding: 20px 0 10px;
  }

  #free01-2022 .common-box2 dl {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 30px auto;
  }

  #free01-2022 .common-box2 dl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-left: 0px;
    border-right: 0px;
  }

  #free01-2022 .common-box2 dl dt {
    font-weight: 600;
    line-height: 175%;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    position: relative;
  }

  #free01-2022 .common-box2 dl dt::before {
    content: '';
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    bottom: 0%;
    width: 100%;
    background: transparent;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
  }

  #free01-2022 .common-box2 dl dd {
    line-height: 175%;
    width: 100%;
    padding: 10px 15px;
    margin: 10px 0;
    position: relative;
  }

  #free01-2022 .common-box2 .bottom-txt {
    max-width: 100%;
    padding: 20px 0;
    margin: 0px auto;
    text-align: left;
  }

  /*free02-2022*/
  #free02-2022 .header-area {
    padding: 40px 0;
    margin: 0 auto;
    width: 100%;
  }

  #free02-2022 .header-area .free-title30 {
    text-align: center;
    margin: 0 0 20px;
    padding: 0 10px 10px;
    border-bottom: 1px solid #3E455A;
  }

  #free02-2022 .header-area .common-box {
    margin: 30px 10px;
  }

  #free02-2022 .header-area .common-box .flex-5 {
    width: 50%;
    text-align: center;
    position: relative;
    margin-bottom: 50px;
  }

  #free02-2022 .header-area .common-box .flex-5::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 0;
    bottom: 30%;
    width: 0px;
    background: #707070;
  }

  #free02-2022 .header-area .common-box .flex-5:last-child::after {
    content: '';
    position: absolute;
    top: 30%;
    right: 0;
    bottom: 30%;
    width: 0px;
    background: #707070;
  }

  #free02-2022 .header-area .common-box .flex-5 img {
    width: 100%;
    max-width: 150px;
  }

  #free02-2022 .common-box2 {
    padding: 40px 0;
  }

  #free02-2022 .common-box2 .flex-area-2022 {
    display: block;
    align-items: stretch;
  }

  #free02-2022 .common-box2 .flex-area-2022 .left-box {
    width: 100%;
    margin: 0 auto;
    padding-right: 0px;
    margin: 0 0 30px;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-box {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-txtarea.pc992 {
    display: none;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-txtarea.sp992 {
    width: 100%;
    max-width: 800px;
    padding-left: 0px;
    padding-right: 0%;
    display: flex;
    flex-wrap: wrap;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-txtarea .left-box {
    width: 50%;
    margin: 0;
    padding: 0;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-txtarea .right-box {
    width: 50%;
    margin: 0;
    padding: 0;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-box .mark-txt {
    position: relative;
    text-align: left;
    margin-bottom: 5px;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-box .mark-txt::before {
    content: url(../img/free/check.svg);
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-box .txt-2022 {
    line-height: 200%;
    text-align: left;
    margin-top: 30px;
  }

  /*#flow-day-map*/
  #flow-day-map {
    padding: 60px 0 0;
  }

  #flow-day-map .head-box .txt-2022 {
    text-align: left;
    width: 100%;
    margin: 15px auto;
  }

  /*フリーアドレス　モーダル*/
  #flow-day-map .mainbox .c-btn .free-title24 {
    font-size: 1.8rem;
    pointer-events: none;
  }

  #flow-day-map .mainbox .c-btn {
    background: rgba(195, 195, 195, .75);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    max-width: 90px;
    max-height: 90px;
    pointer-events: none;
  }

  #flow-day-map .free-modal {
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  #flow-day-map .modal-content {
    position: absolute;
    overflow-y: scroll;
    background: rgba(13, 16, 35, .8);
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    padding: 20px;
  }

  #flow-day-map #easyModal1 .modal-content {
    top: 0;
    left: 50%;
    right: auto;
  }

  #flow-day-map #easyModal2 .modal-content {
    top: 0;
    left: 50%;
    right: auto;
  }

  #flow-day-map #easyModal3 .modal-content {
    top: 0;
    left: 50%;
    right: auto;
  }

  #flow-day-map #easyModal4 .modal-content {
    top: 0;
    left: 50%;
    right: auto;
  }

  #flow-day-map #easyModal5 .modal-content {
    top: 0;
    left: 50%;
    right: auto;
  }

  #flow-day-map #easyModal6 .modal-content {
    top: 0;
    left: 50%;
    right: auto;
  }

  #flow-day-map #modalClose1, #flow-day-map #modalClose2, #flow-day-map #modalClose3, #flow-day-map #modalClose4, #flow-day-map #modalClose5, #flow-day-map #modalClose6 {
    font-size: 40px;
  }

  #flow-day-map .modal-header {
    display: block;
    justify-content: space-between;
    position: relative;
    z-index: 600;
  }

  #flow-day-map .modal-header .header-left {
    width: 100%;
    padding-right: 0px;
  }

  #flow-day-map .modal-header .header-right {
    width: 100%;
    padding-left: 0px;
    margin-top: 20px;
  }

  #flow-day-map .modal-header .header-left img {
    width: 100%;
    height: auto;
  }

  #flow-day-map .modal-body {
    padding: 0px;
    margin: 30px 0;
    color: #fff;
  }

  #flow-day-map .modal-body .under-line {
    font-size: 19px;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 150%;
    padding: 0 0 5px;
    margin: 0 0 15px;
    border-bottom: 1px #fff dotted;
  }

  #flow-day-map .modal-body .flex-area-2022 {
    align-items: stretch;
    margin: 30px 0;
  }

  #flow-day-map .modal-body .left-box {
    width: 50%;
    padding-right: 10px;
  }

  #flow-day-map .modal-body .left-box img {}

  #flow-day-map .modal-body .right-box {
    width: 50%;
    padding-left: 10px;
  }

  #flow-day-map .modal-body .arrow-box-blue {
    margin: 20px 0 0;
    text-align: left;
  }

  #flow-day-map .content-box img {
    width: 100%;
  }

  #flow-day {
    padding: 60px 0 80px;
    border: none;
  }

  #flow-day .flow-day-img {
    width: 100%;
    height: auto;
    min-width: 1200px;
    margin: 20px auto;
  }

  #flow-day .line-box .top-box .num01 {
    position: absolute;
    top: 50%;
    left: 7%;
    font-size: 20px;
    font-size: 2.0rem;
  }

  #flow-day .line-box .top-box .num02 {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    font-size: 2.0rem;
  }

  #flow-day .line-box .top-box .num03 {
    position: absolute;
    top: 50%;
    left: 85%;
    font-size: 20px;
    font-size: 2.0rem;
  }

  #flow-day .line-box .bottom-box {
    position: relative;
    height: 80px;
  }

  #flow-day .line-box .bottom-box .num04 {
    position: absolute;
    top: 50%;
    left: 5.5%;
    transform: translateY(-50%);
  }

  #flow-day .line-box .bottom-box .num05 {
    position: absolute;
    top: 50%;
    left: 30%;
  }

  #flow-day .line-box .bottom-box .num06 {
    position: absolute;
    top: 50%;
    left: 58%;
  }

  #flow-day .line-box .bottom-box .num07 {
    position: absolute;
    top: 50%;
    left: 85%;
  }

  #flow-day .line-box .txt-2022 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 160%;
    text-align: center;
  }

  #flow-day .line-box .en-txt {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 100%;
    text-align: center;
  }

  #flow-day .bottom-txt {
    width: 100%;
  }
}

@media (max-width:768px) {
  .free-page .free-title30 {
    font-size: 21px;
    font-size: 2.1rem;
  }

  .free-page .free-title24 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
  }

  .free-page .free-title22 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
  }

  .free-page .free-title20 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
  }

  /*free01-2022*/
  #free01-2022 .header-area .free-title30 {
    text-align: center;
    margin: 0 0 20px;
  }

  #free01-2022 .header-area .txt-2022 {
    width: 100%;
    margin: 0 auto;
  }

  /*free02-2022*/
  #free02-2022 .header-area {
    padding: 0px;
    margin: 0 auto;
    width: 100%;
  }

  #free02-2022 .header-area .common-box .flex-area-2022 {
    display: flex;
  }

  #free02-2022 .common-box2 .flex-area-2022 .left-box {
    width: 100%;
    padding-right: 0px;
    margin: 0 0 30px;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-box {
    width: 100%;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-txtarea .left-box {
    width: 45%;
    margin: 0;
    padding: 0;
  }

  #free02-2022 .common-box2 .flex-area-2022 .right-txtarea .right-box {
    width: 55%;
    margin: 0;
    padding: 0;
  }

  #flow-day-map .nav-Freearea-2022 {
    margin: 10px 0 0;
  }

  #flow-day-map .head-box .txt-block {
    text-align: center
  }

  #flow-day-map .head-box .txt-block h4 {
    position: relative;
    display: inline-block;
    text-align: center;
  }

  #flow-day-map .head-box .txt-block h4::before {
    content: '';
    background: url(../img/free/icon_left.svg)no-repeat center / contain;
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    margin-right: 0px;
    margin-bottom: 0px;
    display: block;
    vertical-align: middle;
    width: 15px;
    height: 55px;
  }

  #flow-day-map .head-box .txt-block h4::after {
    content: '';
    background: url(../img/free/icon_right.svg)no-repeat center / contain;
    position: absolute;
    right: -30px;
    top: 0;
    bottom: 0;
    margin-left: 0px;
    margin-bottom: 0px;
    display: block;
    vertical-align: middle;
    width: 15px;
    height: 55px;
  }

  #flow-day-map .mainbox .c-btn {
    pointer-events: none;
  }

  #flow-day-map .modal-body .flex-area-2022 {
    display: flex;
    align-items: stretch;
    margin: 30px 0;
  }

  #flow-day-map .modal-body .left-box {
    width: 100%;
    padding-right: 0px;
  }

  #flow-day-map .modal-body .left-box img {}

  #flow-day-map .modal-body .right-box {
    width: 100%;
    padding-left: 0px;
    margin-top: 20px;
  }

  #flow-day-map .modal-body .arrow-box-blue {
    margin: 20px 0 30px;
    text-align: left;
  }

  #flow-day-map .scroll-box {
    overflow-x: scroll;
    width: 100%;
    display: flex;
    -ms-overflow-style: none;
    scrollbar-width: none;
    height: auto;
    margin-top: 60px;
  }

  #flow-day-map .scroll-box::-webkit-scrollbar {
    display: none;
  }

  /*#flow-day-map .scroll-box .content-box{min-width:300px;margin-right:30px;padding-bottom:30px;}*/
  #flow-day-map .scroll-box .content-box .txt-2022 {
    font-weight: 400;
    margin: 10px 0 20px;
    padding: 0 0 10px;
  }

  #flow-day-map .scroll-box .content-box .txt-2022 time {
    font-size: 25px;
    font-size: 2.5rem;
  }

  #flow-day-map .scroll-box .content-box .txt-2022 span {
    font-size: 18px;
    font-size: 1.8rem;
    padding: 0 15px;
  }

  /*#flow-day*/
  #flow-day {
    margin: 0px;
    padding: 80px 0;
    border-top: 0px solid #707070;
  }

  #flow-day .scroll-box {
    overflow-x: scroll;
    width: 100%;
  }

  /*=========
scrollbar
=========*/

  .scroll__inner {
    background-color: #ffffff;
    padding: 0 0 20px 0;
    overflow-x: scroll;
    -ms-overflow-style: none;
    /* IE, Edge 対応 */
    scrollbar-width: none;
    /* Firefox 対応 */
  }

  .scroll__inner::-webkit-scrollbar {
    /* Chrome, Safari 対応 */
    display: none;
  }

  .simplebar-scrollbar::before {
    background: #666;
    border-radius: 2px;
    height: 2px !important;
    margin-left: 2px;
    margin-top: 0px;
  }

  .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
  }

  .simplebar-track {
    background: #E6DDC7;
    height: 6px !important;
  }

  #free02-2022 #flow-day .bottom-txt {
    text-align: left;
    margin: 20px auto 0;
    width: 100%;
    padding-bottom: 0px;
  }

  #free02-2022 .common-box3 {
    padding: 40px 0;
  }

  #free02-2022 .common-box3 .flex-area-2022 {
    display: flex;
    padding: 20px 0;
    margin-bottom: 0px;
  }

  #free02-2022 .common-box3 .flex-area-2022 .eng-txt {
    font-size: 16px;
    font-size: 1.6rem;
  }

  #free02-2022 .common-box4 {
    padding: 0px 10px;
    border-top: 1px solid #707070;
  }

  #free02-2022 .common-box4 .header-box {
    padding: 40px 0;
    margin: 0 auto;
  }

  #free02-2022 .common-box4 .header-box .free-title24 {
    text-align: center;
    margin: 0 0 20px;
  }

  #free02-2022 .common-box4 .header-box .txt-2022 {
    text-align: left;
  }

  #free02-2022 .common-box4 .flex-area-2022 {
    align-items: stretch;
  }

  #free02-2022 .common-box4 .flex-area-2022 .left-box {
    width: 100%;
    padding-right: 0px;
    margin-bottom: 30px;
  }

  #free02-2022 .common-box4 .flex-area-2022 .right-box {
    width: 100%;
    padding-left: 0px;
  }

  #free02-2022 .common-box4 .flex-area-2022 .left-box img, #free02-2022 .common-box4 .flex-area-2022 .right-box img {
    margin-bottom: 20px;
  }

  #free02-2022 .common-box4 .flex-area-2022 .left-box .txt-2022, #free02-2022 .common-box4 .flex-area-2022 .right-box .txt-2022 {
    text-align: left;
  }

  #free02-2022 .common-box4 .flex-area-2022 .left-box .free-title20, #free02-2022 .common-box4 .flex-area-2022 .right-box .free-title20 {
    text-align: left;
    border-bottom: 0px solid #707070;
    padding-bottom: 0px;
    margin-bottom: 15px;
  }

  /*free03-2022*/
  #free03-2022 .header-area .free-title24 {
    text-align: center;
    margin: 0 0 20px;
  }

  #free03-2022 .header-area .txt-2022 {
    text-align: left;
    width: 100%;
    margin: 0 auto;
  }

  #free03-2022 .common-box {
    width: 80%;
    margin: 20px auto;
  }

  #free03-2022 .common-box .free-title20 {
    color: #fff;
    text-align: center;
    margin: 0 0 30px;
  }

  #free03-2022 .common-box .flex-area-2022 {
    display: flex;
    justify-content: space-between;
  }

  #free03-2022 .common-box .flex-4 {
    width: 48%;
    text-align: center;
    margin: 0 0 30px;
  }

  #free03-2022 .common-box .flex-4 img {
    width: 80%;
  }

  #free03-2022 .common-box .flex-4 p {
    color: #fff;
    line-height: 150%;
    text-align: center;
    margin: 10px 0 0;
  }
}

@media (max-width:640px) {
  #free01-2022 .common-box table.table3 td.first-td.block70 {
    padding: 27px 0;
  }

  #free02-2022 .header-area .common-box .flex-5 img {
    width: 100%;
    max-width: 100px;
  }

  #flow-day-map .head-box .txt-block h4::before {
    content: '';
    background: url(../img/free/icon_left.svg)no-repeat center / contain;
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    margin-right: 0px;
    margin-bottom: 0px;
    display: block;
    vertical-align: middle;
    width: 20px;
    height: auto;
  }

  #flow-day-map .head-box .txt-block h4::after {
    content: '';
    background: url(../img/free/icon_right.svg)no-repeat center / contain;
    position: absolute;
    right: -30px;
    top: 0;
    bottom: 0;
    margin-left: 0px;
    margin-bottom: 0px;
    display: block;
    vertical-align: middle;
    width: 20px;
    height: auto;
  }

  #flow-day-map .mainbox .c-btn .free-title24 {
    font-size: 1.4rem;
  }

  #flow-day-map .mainbox .c-btn {
    background: rgba(195, 195, 195, .75);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    max-width: 60px;
    max-height: 60px;
  }

  #flow-day-map .modal-content {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 100%;
    max-width: 90%;
    padding: 80px 30px 30px;
    overflow-y: scroll;
  }

  #flow-day-map #easyModal1 .modal-content {
    top: 50%;
    left: 50%;
    max-height: 75%
  }

  #flow-day-map #easyModal2 .modal-content {
    top: 50%;
    left: 50%;
    max-height: 75%;
  }

  #flow-day-map #easyModal3 .modal-content {
    top: 50%;
    left: 50%;
    max-height: 75%;
  }

  #flow-day-map #easyModal4 .modal-content {
    top: 50%;
    left: 50%;
    max-height: 75%;
  }

  #flow-day-map #easyModal5 .modal-content {
    top: 50%;
    left: 50%;
    max-height: 75%;
  }

  #flow-day-map #easyModal6 .modal-content {
    top: 50%;
    left: 50%;
    max-height: 75%;
  }
}

@media (max-width:480px) {
  #flow-day-map .mainbox .c-btn .free-title24 {
    font-size: 1.4rem;
  }

  #flow-day-map .mainbox .c-btn {
    background: rgba(195, 195, 195, .75);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    max-width: 45px;
    max-height: 45px;
  }
}

@media (max-width:374px) {
  #free01-2022 .common-box table.table3 td.first-td.block70 {
    padding: 40px 0;
  }
}

/*フリーアドレスオフィスプロジェクト事例 swiper*/
#free-slide-2022 {
  background: #F1EBE6;
}

#free-slide-2022 .free-title30 {
  text-align: center;
  margin: 0;
}

.swiper-free-area {
  margin: 0 auto;
  padding: 80px 0;
  overflow-x: hidden;
}

#free-slide-2022 .of-projectsslide-title-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  color: #164C6C;
  margin-top: 5px;
  text-align: left;
}

/*swiper*/
#free-slide-2022 .swiper-slide p {
  text-align: center;
  margin-top: 5px;
}

#free-slide-2022 .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  top: -30px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

#free-slide-2022 .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  top: -30px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:992px) {
  #free-slide-2022 .swiper-button-next {
    width: 30px !important;
    top: -30px !important;
    background-size: 30px;
  }

  #free-slide-2022 .swiper-button-prev {
    width: 30px !important;
    top: -30px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:768px) {
  #free-slide-2022 .swiper-button-next {
    width: 30px !important;
    top: -40px !important;
    background-size: 30px;
  }

  #free-slide-2022 .swiper-button-prev {
    width: 30px !important;
    top: -40px !important;
    right: 50px !important;
    background-size: 30px;
  }

  #free-slide-2022 .arrow-box-blue {
    margin: 0px 0 30px;
  }
}

@media (max-width:640px) {
  #free-slide-2022 .swiper-button-next {
    /*left:52%!important;*/
    top: -40px !important;
    background-size: 30px;
  }

  #free-slide-2022 .swiper-button-prev {
    /*right:52%!important;*/
    top: -40px !important;
    background-size: 30px;
  }
}

/*デジタルサービス*/


/*Font*/
.digital-page .degi-title30 {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.digital-page .degi-title30 span {
  font-family: 'futura-pt', serif;
  display: block;
  font-size: 50px;
  font-size: 5.0rem;
  font-weight: 500;
  margin: 0 0 20px;
  letter-spacing: -5px;
}

.digital-page .degi-title24 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
  margin-bottom: 30px;
}

.digital-page .degi-title20 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

.digital-page .degi-title18 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #164C6C;
  line-height: 175%;
}

/*digital01-2022*/
#digital01-2022 {
  background: #F1EBE6;
}

#digital01-2022 .container-2022 {
  max-width: 1400px;
  margin: 0 auto;
}

#digital01-2022 .header-area {
  padding: 40px 0 20px;
}
#digital01-2022 .header-area .txt-2022 {
  width: 100%;
  max-width:850px;
  margin:0 auto;
}

.header-area .degi-title30 {
  text-align: center;
  margin: 0 0 20px;
}

.header-area .txt-2022 {
  text-align: left;
  /* width: 60.7%; */
  margin: 0 auto;
}

#digital01-2022 .common-box {
  padding: 40px 0 60px;
}

#digital01-2022 .common-box .flex-2022 {
  margin: 20px 0 40px;
}

#digital01-2022 .common-box .left-box-2022 {
  width: 49.8%;
}

#digital01-2022 .common-box .right-box-2022 {
  width: 49.8%;
}

#digital01-2022 .common-box p {
  line-height: 200%;
}

#digital01-2022 .common-box .degi-title30 span {
  font-family: 'futura-pt', serif;
  font-size: 40px;
  font-size: 4.0rem;
  color: #ECDBCC;
  margin-right: 15px;
}

#digital01-2022 .common-box .vr-box {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

#digital01-2022 .common-box .vr-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#digital01-2022 .footer-area-2022 {
  margin: 60px auto;
  max-width: 90%;
}

#digital01-2022 .footer-area-2022 ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

#digital01-2022 .footer-area-2022 li {
  width: 15%;
  border: 1px solid #164C6C;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
  transition: all .5s;
}

#digital01-2022 .footer-area-2022 li a {
  color: #164C6C;
  line-height: 150%;
  padding: 15px;
  transition: all .5s;
}

#digital01-2022 .footer-area-2022 li:hover {
  background: #ECDBCC;
  border: 1px solid #232734;
  transition: all .5s;
}

#digital01-2022 .footer-area-2022 li:hover a {
  color: #164C6C;
  transition: all .5s;
}

#digital01-2022 .footer-area-2022 .txt-2022 {
  font-weight: 400;
  text-align: center;
  margin: 0 0 30px;
}

/*#digital02-2022*/
#digital02-2022{
  padding:135px 0 120px;
}
#digital02-2022 .container-2022 {
  max-width: 1400px;
  margin: 0 auto;
}
#digital02-2022 .header-area .txt-2022 {
  width: 100%;
  max-width:850px;
  margin:0 auto;
}

#digital02-2022 .common-box {
  width: 100%;
  margin: 70px auto 0;
}
#digital02-2022 .common-box .flex-2022{
  display: flex;
  flex-wrap: nowrap;
  align-items:center;
  gap:80px;
}
#digital02-2022 .common-box .flex-2022:not(:nth-last-of-type(1)){
  margin-bottom: 70px;
}
#digital02-2022 .common-box .flex-2022:nth-of-type(even){
  flex-direction: row-reverse;
}
#digital02-2022 .common-box .flex-2022 .img-box-2022{
  width: auto;
  height:470px;
}
#digital02-2022 .common-box .flex-2022 .img-box-2022 .img-box-2022-item{
  width: 100%;
  height:100%;
}
#digital02-2022 .common-box .flex-2022 .txt-box-2022{
  color:#333;
  flex:1;
}

#digital02-2022 .common-box .flex-2022 .txt-box-2022 .ttl-2022{
  font-weight: bold;
  font-size: 24px;
}
#digital02-2022 .common-box .flex-2022 .txt-box-2022 .sub-ttl-2022{
  font-size: 18px;
  display: block;
  margin-bottom: 30px;
  margin-top:15px;
}
#digital02-2022 .common-box .flex-2022 .txt-box-2022 .sup-txt{
  font-size: 14px;
}
#digital02-2022 .common-box .flex-2022 .txt-box-2022 .txt-2022 + .sup-txt{
  margin-top: 30px;
}
#digital02-2022 .common-box .flex-2022 .txt-box-2022 .arrow-box-blue{
    position: relative;
    text-align: left;
    margin: 50px 0 0;
    transition: all .5s;
}
@media (max-width:1105px) {
  #digital02-2022 .common-box .flex-2022{
    flex-direction: column;
    gap: 0;
  }
  #digital02-2022 .common-box .flex-2022:nth-of-type(even){
  flex-direction: column;
}
  #digital02-2022 .common-box .flex-2022:not(:nth-last-of-type(1)){
    margin-bottom: 50px;
  }
  #digital02-2022 .common-box .flex-2022 .txt-box-2022 .txt-2022 + .sup-txt {
    margin-top: 25px;
  }
  #digital02-2022 .common-box .flex-2022 .txt-box-2022 .arrow-box-blue{
    text-align: center;
  }
}
@media (max-width:768px) {
  #digital02-2022{
    padding-top: 15%;
    padding-bottom: 15%;
  }
  #digital02-2022 .common-box .flex-2022 .img-box-2022{
    height:auto;
  }
  #digital02-2022 .common-box .flex-2022 .txt-box-2022 .ttl-2022{
    font-size: 2.2rem;
  }
  #digital02-2022 .common-box .flex-2022 .txt-box-2022 .sub-ttl-2022{
    font-size: 1.75rem;
    margin-bottom: 5%;
    margin-top:2%;
  }
  #digital02-2022 .common-box .flex-2022 .txt-box-2022 .sup-txt{
    font-size: 1.3rem;
  }
}

/*#digital03-2022 new*/
#digital03-2022 {
  background: #F1EBE6;
}

#digital03-2022 .container-2022 {
  max-width: 1400px;
  margin: 0 auto;
}

#digital03-2022 .header-area {
  padding: 40px 0 20px;
}

#digital03-2022 .header-area .degi-title30 {
  text-align: center;
  margin: 0 0 20px;
}

#digital03-2022 .header-area .txt-2022 {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

/* #smartfurniture01 */

#smartfurniture01 {
  margin: 100px 0 0;
}

#smartfurniture01 .common-box {
  max-width: 80%;
  margin: 60px auto 120px;
}

#smartfurniture01 .common-box img {
  margin: 0 auto 30px;
}

#smartfurniture01 .common-box .degi-title30, #smartfurniture02 .common-box .degi-title30 {
  margin: 0 auto 30px;
}

#smartfurniture01 .common-box p, #smartfurniture02 .common-box p, #smartfurniture03 .common-box p {
  line-height: 200%;
}

/* #smartfurniture02 */
#smartfurniture02 .common-box {
  max-width: 100%;
  margin: 60px auto 120px;
}

#smartfurniture02 .innerImg-box {
  background: #fff;
  padding: 40px;
}

#smartfurniture02 .flex-2022 {
  margin: 20px auto;
}

#smartfurniture02 .flex-2022 .degi-title18 {
  font-weight: 400;
  color: #164C6C;
  margin-bottom: 10px;
}

#smartfurniture02 .flex-2022 .left-box-2022 {
  width: 50%;
  padding-right: 10px
}

#smartfurniture02 .flex-2022 .right-box-2022 {
  width: 50%;
  padding-left: 10px
}

#smartfurniture02 .flex-area-2022 {
  margin: 80px auto;
  align-items: stretch;
}

#smartfurniture02 .flex-area-2022 .left-box-2022 {
  width: calc(33.3333% - 20px);
  margin-right: 20px;
  background: #fff;
}

#smartfurniture02 .flex-area-2022 .center-box-2022 {
  width: calc(33.3333% - 20px);
  margin: 0 10px;
  background: #fff;
}

#smartfurniture02 .flex-area-2022 .right-box-2022 {
  width: calc(33.3333% - 20px);
  margin-left: 20px;
  background: #fff;
}

#smartfurniture02 .flex-area-2022 .left-box-2022 img, #smartfurniture02 .flex-area-2022 .center-box-2022 img, #smartfurniture02 .flex-area-2022 .right-box-2022 img {
  width: 100%;
  height: auto;
}

#smartfurniture02 .flex-area-2022 .txtbox-2022 {
  padding: 25px 25px 30px;
}

#smartfurniture02 .flex-area-2022 .eng-txt {
  font-family: 'futura-pt', serif;
  font-size: 16px;
  font-size: 1.6rem;
  color: #164C6C;
  line-height: 150%;
  text-align: left;
}

#smartfurniture02 .flex-area-2022 .eng-txt span {
  font-family: 'futura-pt', serif;
  font-size: 40px;
  font-size: 4.0rem;
  color: #164C6C;
  line-height: 100%;
  margin-left: 5px;
}

#smartfurniture02 .flex-area-2022 .txt-2022 {
  line-height: 200%;
  margin: 20px 0;
}

#smartfurniture02 .flex-area-2022 .sup-txt {
  font-size: 14px;
  font-size: 1.4rem;
}

.innerMovie-box {
  max-width: 80%;
  margin: 60px auto;
}

/* #smartfurniture03 */
#smartfurniture03 .common-box {
  max-width: 80%;
  margin: 60px auto 60px;
}

#smartfurniture03 .flex-2022 {
  margin: 20px 0 30px;
}

#smartfurniture03 .flex-2022 .left-box-2022 {
  width: 50%;
  padding-right: 10px
}

#smartfurniture03 .flex-2022 .right-box-2022 {
  width: 50%;
  padding-left: 10px
}

/* digital-slide */
/*Degital swiper*/
#digital-slide .container-2022 {
  max-width: 1400px;
  margin: 0 auto;
}

#digital-slide .degi-title30 {
  text-align: center;
  margin: 0;
}

.swiper-digital-area {
  margin: 0 auto;
  padding: 80px 0;
  overflow-x: hidden;
}

#digital-slide .of-projectsslide-title-2022 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  color: #164C6C;
  margin-top: 5px;
  text-align: left;
}

/*swiper*/
#digital-slide .swiper-slide p {
  text-align: center;
  margin-top: 5px;
}

#digital-slide .swiper-button-next {
  width: 35px !important;
  top: auto !important;
  top: -30px !important;
  background-image: url(../img/top/swipe-next.svg);
  background-size: 35px;
  outline: none;
}

#digital-slide .swiper-button-prev {
  width: 35px !important;
  top: auto !important;
  top: -30px !important;
  left: auto !important;
  right: 55px !important;
  background-image: url(../img/top/swipe-prev.svg);
  background-size: 35px;
  outline: none;
}

@media (max-width:992px) {
  #digital-slide .swiper-button-next {
    width: 30px !important;
    top: -30px !important;
    background-size: 30px;
  }

  #digital-slide .swiper-button-prev {
    width: 30px !important;
    top: -30px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:768px) {
  #digital02-2022 .common-box {
    margin: 40px auto 0;
  }

  .header-area .txt-2022 {
    width: 100%;
  }

  #digital01-2022 .common-box {
    padding: 40px 0 0;
  }

  #digital-slide .swiper-button-next {
    width: 30px !important;
    top: -40px !important;
    background-size: 30px;
  }

  #digital-slide .swiper-button-prev {
    width: 30px !important;
    top: -40px !important;
    right: 50px !important;
    background-size: 30px;
  }
}

@media (max-width:640px) {
  #digital-slide .swiper-button-next {
    /*left:52%!important;*/
    top: -40px !important;
    background-size: 30px;
  }

  #digital-slide .swiper-button-prev {
    /*right:52%!important;*/
    top: -40px !important;
    background-size: 30px;
  }
}


#digital04-2022 {
  background: #F1EBE6;
}

#digital04-2022 .container-2022 {
  max-width: 1400px;
  margin: 0 auto;
}

#digital04-2022 .header-area {
  padding: 40px 0 20px;
}

#digital04-2022 .header-area .degi-title30 {
  text-align: center;
  margin: 0 0 20px;
}

#digital04-2022 .header-area .txt-2022 {
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

#digital04-2022 .common-box {
  margin: 40px auto;
  max-width: 1000px;
}

#digital04-2022 .common-box .flex-area-2022 {
  align-items: stretch;
}

#digital04-2022 .common-box .flex-area-2022 .left-box-2022 {
  width: 40%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img01 {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img01 img {
  width: 100%;
  max-width: 250px;
  display: block;
  margin: 100px 0 0;
}

#digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img02 {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img02 img {
  width: 100%;
  height: auto;
  max-width: 200px;
}

#digital04-2022 .common-box .flex-area-2022 .center-box-2022 {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#digital04-2022 .common-box .flex-area-2022 .center-box-2022 img {
  width: 100%;
  max-width: 100px;
}

#digital04-2022 .common-box .flex-area-2022 .right-box-2022 {
  width: 40%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img01 {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img01 img {
  width: 100%;
  max-width: 280px;
  margin: auto;
}

#digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img02 {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img02 img {
  width: 100%;
  height: auto;
  max-width: 180px;
}

#digital04-2022 .smasso-box {
  background: #F1EBE6;
  padding: 60px 100px;
  max-width: 1200px;
  margin: 0 auto;
}

#digital04-2022 .smasso-box .degi-title30 {
  text-align: center;
  padding: 30px 0;
}

#digital04-2022 .smasso-box .flex-area-2022 {
  padding: 30px 0;
}

#digital04-2022 .smasso-box .left-img {
  width: 180px;
  height: auto;
}

#digital04-2022 .smasso-box .right-box {
  width: calc(100% - 230px);
  margin-left: auto;
}

#digital04-2022 .smasso-box .right-box .degi-title24 span {
  font-family: 'futura-pt', serif;
  font-size: 35px;
  font-size: 3.5rem;
  padding-right: 15px;
}

#digital04-2022 .smasso-box .right-box .txt-2022 {
  line-height: 200%;
  margin: 20px 0 0;
}

#digital04-2022 .cap-box {
  margin: 60px 0;
}

#digital04-2022 .cap-box .degi-title24 {
  text-align: center;
}

#digital04-2022 .cap-box .txt-2022 {
  margin: 20px 0;
  text-align: center;
}

@media (max-width:992px) {

  /*digital01-2022*/
  .header-area .degi-title30 {
    text-align: center;
    margin: 0 0 20px;
  }

  #digital01-2022 .common-box .degi-title30 {
    display: flex;
    align-items: center;
  }

  #digital01-2022 .common-box .degi-title30 span {
    font-family: 'futura-pt', serif;
    font-size: 30px;
    font-size: 3.0rem;
    color: #ECDBCC;
    margin-right: 15px;
  }

  #digital01-2022 .header-area .txt-2022 {
    text-align: center;
    width: 100%;
    margin: 0 auto;
  }

  #digital01-2022 .footer-area-2022 ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
  }

  #digital01-2022 .footer-area-2022 li {
    width: 32%;
    margin: 0 0 10px;
    height: auto;
  }

  /* #smartfurniture01 */
  #smartfurniture01 .common-box {
    max-width: 100%;
    margin: 60px auto 120px;
  }

  #smartfurniture01 .common-box img {
    margin: 0 auto 30px;
  }

  #smartfurniture01 .common-box .degi-title30, #smartfurniture02 .common-box .degi-title30 {
    margin: 0 auto 30px;
    text-align: center;
  }

  #smartfurniture01 .common-box p, #smartfurniture02 .common-box p, #smartfurniture03 .common-box p {
    line-height: 200%;
  }

  /* #smartfurniture02 */
  #smartfurniture02 .common-box {
    max-width: 100%;
    margin: 60px auto 120px;
  }

  #smartfurniture02 .innerImg-box {
    background: #fff;
    padding: 40px;
  }

  #smartfurniture02 .innerImg-box .degi-title18 {
    font-size: 1.4rem;
  }

  #smartfurniture02 .flex-2022 {
    align-items: flex-end;
    margin: 20px auto;
  }

  #smartfurniture02 .flex-2022 .degi-title24 {
    font-weight: 400;
    color: #fff;
    margin-bottom: 10px;
  }

  #smartfurniture02 .flex-2022 .left-box-2022 {
    width: 50%;
    padding-right: 10px
  }

  #smartfurniture02 .flex-2022 .right-box-2022 {
    width: 50%;
    padding-left: 10px
  }

  #smartfurniture02 .flex-area-2022 {
    display: block;
    margin: 80px auto;
    align-items: stretch;
  }

  #smartfurniture02 .flex-area-2022 .left-box-2022 {
    width: 100%;
    margin: 0px 0 50px;
    background: #fff;
  }

  #smartfurniture02 .flex-area-2022 .center-box-2022 {
    width: 100%;
    margin: 0px 0 50px;
    background: #fff;
  }

  #smartfurniture02 .flex-area-2022 .right-box-2022 {
    width: 100%;
    margin: 0px;
    background: #fff;
  }

  #smartfurniture02 .flex-area-2022 img {
    width: 100%;
    margin: 0px;
    background: #fff;
  }

  #smartfurniture02 .flex-area-2022 .txtbox-2022 {
    padding: 25px 25px 30px;
  }

  #smartfurniture02 .flex-area-2022 .eng-txt {
    font-family: 'futura-pt', serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 150%;
    text-align: left;
  }

  #smartfurniture02 .flex-area-2022 .eng-txt span {
    font-family: 'futura-pt', serif;
    font-size: 40px;
    font-size: 4.0rem;
    line-height: 100%;
    margin-left: 5px;
  }

  #smartfurniture02 .flex-area-2022 .txt-2022 {
    line-height: 200%;
    margin: 20px 0;
  }

  #smartfurniture02 .flex-area-2022 .sup-txt {
    font-size: 14px;
    font-size: 1.4rem;
  }

  .innerMovie-box {
    max-width: 100%;
    margin: 60px auto;
  }

  /*digital04-2022*/
  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img01 {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img01 img {
    width: 100%;
    max-width: 70%;
    display: block;
    margin: 100px 0 0;
  }

  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img02 {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img02 img {
    width: 100%;
    height: auto;
    max-width: 180px;
  }

  #digital04-2022 .common-box .flex-area-2022 .center-box-2022 {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #digital04-2022 .common-box .flex-area-2022 .center-box-2022 img {
    width: 100%;
    max-width: 50%;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 {
    width: 40%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img01 {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img01 img {
    width: 100%;
    max-width: 250px;
    margin: auto;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img02 {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img02 img {
    width: 100%;
    height: auto;
    max-width: 160px;
  }

  #digital04-2022 .smasso-box {
    background: #F1EBE6;
    padding: 60px 10%;
  }

  #digital04-2022 .smasso-box .degi-title30 {
    text-align: center;
    padding: 30px 0 0;
  }

  #digital04-2022 .smasso-box .flex-area-2022 {
    position: relative;
    padding: 60px 0;
  }

  #digital04-2022 .smasso-box .flex-area-2022:nth-child(3)::before, #digital04-2022 .smasso-box .flex-area-2022:nth-child(4)::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #C6BEAC;
  }

  #digital04-2022 .smasso-box .left-img {
    width: 180px;
    height: auto;
    display: block;
    margin: 0 auto 30px;
  }

  #digital04-2022 .smasso-box .right-box {
    width: 100%;
    margin: 0 auto;
  }

  #digital04-2022 .smasso-box .right-box .degi-title24 {
    display: flex;
    align-items: center;
    padding-right: 0px;
  }

  #digital04-2022 .smasso-box .right-box .degi-title24 span {
    font-family: 'futura-pt', serif;
    font-size: 35px;
    font-size: 3.5rem;
  }

  #digital04-2022 .smasso-box .right-box .txt-2022 {
    line-height: 200%;
    margin: 20px 0 0;
  }
}

@media (max-width:768px) {
  #digital01-2022 .common-box .txt-2022 {
    margin-top: 20px;
  }

  #digital03-2022 .header-area {
    padding: 0;
  }

  .digital-page .degi-title30 {
    font-size: 21px;
    font-size: 2.1rem;
  }

  .digital-page .degi-title24 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    color: #164C6C;
    line-height: 175%;
  }

  .digital-page .degi-title20 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    color: #164C6C;
    line-height: 175%;
  }

  .digital-page .degi-title18 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    color: #164C6C;
    line-height: 175%;
  }

  /*digital01-2022*/
  .header-area .degi-title30 {
    text-align: center;
    margin: 0 0 20px;
  }

  #digital01-2022 .header-area:first-child {
    padding: 0;
  }

  #digital01-2022 .header-area .txt-2022 {
    text-align: left;
    width: 100%;
    margin: 0 auto;
  }

  #digital01-2022 .common-box .left-box-2022 {
    width: calc(50% + 15px);
    margin-left: -15px;
  }

  #digital01-2022 .common-box .right-box-2022 {
    width: calc(50% + 15px);
    margin-right: -15px;
  }

  #digital01-2022 .footer-area-2022 {
    margin: 60px auto 0;
    max-width: 100%;
  }

  #digital01-2022 .footer-area-2022 .txt-2022 {
    font-weight: 400;
    text-align: center;
    margin: 0 0 20px;
  }

  /*digital03-2022*/
  #digital03-2022 .header-area .txt-2022 {
    text-align: left;
    width: 100%;
    margin: 0 auto;
  }

  #digital03-2022 .common-box {
    margin: 40px auto 80px;
    max-width: 100%;
  }

  /* #smartfurniture01 */
  #smartfurniture01 .common-box {
    max-width: 100%;
    margin: 40px auto 80px;
  }

  /* #smartfurniture02 */
  #smartfurniture02 .common-box {
    max-width: 100%;
    margin: 40px auto 80px;
  }

  #smartfurniture02 .innerImg-box {
    background: #fff;
    padding: 15px 20px 20px;
  }

  #smartfurniture02 .innerImg-box .degi-title18 {
    font-size: 1.0rem;
  }

  #smartfurniture02 .flex-2022 {
    margin: 0px auto;
  }

  #smartfurniture02 .flex-2022 .left-box-2022 {
    width: 50%;
    padding-right: 5px
  }

  #smartfurniture02 .flex-2022 .right-box-2022 {
    width: 50%;
    padding-left: 5px
  }

  /*digital04-2022*/
  #digital04-2022 .header-area {
    padding: 40px 0 20px;
  }

  #digital04-2022 .header-area .degi-title30 {
    text-align: center;
    margin: 0 0 20px;
  }

  #digital04-2022 .header-area .txt-2022 {
    text-align: center;
    width: 100%;
    margin: 0 auto;
  }

  #digital04-2022 .common-box {
    margin: 40px auto;
    max-width: 1000px;
  }

  #digital04-2022 .common-box .flex-area-2022 {
    align-items: stretch;
  }

  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 {
    width: 100%;
    text-align: center;
    display: block;
  }

  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img01 {
    height: auto;
    display: block;
  }

  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img01 img {
    width: 100%;
    max-width: 60%;
    display: block;
    margin: 0px auto 20px;
  }

  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img02 {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #digital04-2022 .common-box .flex-area-2022 .left-box-2022 .img02 img {
    width: 100%;
    height: auto;
    max-width: 60%;
  }

  #digital04-2022 .common-box .flex-area-2022 .center-box-2022 {
    width: 100%;
    display: block;
  }

  #digital04-2022 .common-box .flex-area-2022 .center-box-2022 img {
    width: 100%;
    max-width: 61px;
    margin: 30px 0;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 {
    width: 100%;
    text-align: center;
    display: block;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img01 {
    height: auto;
    display: block;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img01 img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img02 {
    height: auto;
    display: block;
  }

  #digital04-2022 .common-box .flex-area-2022 .right-box-2022 .img02 img {
    width: 100%;
    height: auto;
    max-width: 160px;
  }

  #digital04-2022 .smasso-box {
    background: #F1EBE6;
    padding: 40px 0;
  }

  #digital04-2022 .smasso-box .flex-area-2022 {
    position: relative;
    padding: 40px 0;
  }

  #digital04-2022 .smasso-box .left-img {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto 30px;
  }

  #digital04-2022 .smasso-box .degi-title30 {
    text-align: center;
    padding: 0px 0 0;
  }

  #digital04-2022 .smasso-box .flex-area-2022 {
    position: relative;
    padding: 40px 0;
  }

  #digital04-2022 .cap-box {
    margin: 40px 0 20px;
  }

  #digital04-2022 .cap-box .arrow-box-blue {
    margin: 30px 0 0;
  }
}

/*CAP-CELLページバナー入れ*/
.capcellBanner {
  background: #2a3b4f;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 25px 70px 25px 100px;
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .capcellBanner {
    padding: 25px 50px 25px 70px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .capcellBanner {
    justify-content: space-around;
    padding: 50px 70px;
  }
}

@media screen and (max-width: 768.98px) {
  .capcellBanner {
    padding: 8vw 5.333333333333333vw;
    border-radius: 2.666666666666667vw;
    justify-content: space-around;
  }
}

.capcellBanner_img {
  width: 61.97183098591549%;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .capcellBanner_img {
    width: 40%;
  }
}

@media screen and (max-width: 768.98px) {
  .capcellBanner_img {
    width: 40%;
  }
}

.capcellBanner_img img {
  width: 100%;
}

.capcellBanner_img-outer {
  width: 34.95145631067961%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .capcellBanner_img-outer {
    width: 90%;
    justify-content: center;
  }
}

@media screen and (max-width: 768.98px) {
  .capcellBanner_img-outer {
    width: 100%;
    justify-content: center;
  }
}

.capcellBanner_logo {
  width: 33.80281690140845%;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .capcellBanner_logo {
    width: 33%;
  }
}

@media screen and (max-width: 768.98px) {
  .capcellBanner_logo {
    width: 30%;
  }
}

.capcellBanner_logo img {
  width: 100%;
}

.capcellBanner_txt {
  color: #fff;
  font-size: 18px;
  margin: 0 0 25px;
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .capcellBanner_txt {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .capcellBanner_txt {
    margin: 25px 0;
  }
}

@media screen and (max-width: 768.98px) {
  .capcellBanner_txt {
    font-size: 4vw;
    margin: 4vw 0;
  }
}

.capcellBanner_link {
  background: #fff;
  color: #2a3b4f;
  display: block;
  text-align: center;
  padding: 25px 0;
  font-weight: bold;
  border-radius: 10px;
  line-height: 2;
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .capcellBanner_link {
    padding: 15px 0;
  }
}

@media screen and (max-width: 768.98px) {
  .capcellBanner_link {
    padding: 4vw 0;
  }
}

.capcellBanner_link-outer {
  width: 52.83018867924528%;
  padding-right: 5.660377358490567%;
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .capcellBanner_link-outer {
    padding-right: 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .capcellBanner_link-outer {
    width: 100%;
    padding-right: 0;
  }
}

@media screen and (max-width: 768.98px) {
  .capcellBanner_link-outer {
    width: 100%;
    padding-right: 0;
  }
}

.capcellBanner_outer {
  transition: 0.4s;
}

.capcellBanner_outer:hover {
  opacity: 0.8;
}


/*ホワイトペーパーpopup*/

.wpPopup {
  position: fixed;
  bottom: 40px;
  right: 60px;
  opacity: 0;
  transition: 0.4s;
  z-index: 89;
  background: #fff;
  border: 1px solid #e2e3e3;
}

@media screen and (max-width: 768.98px) {
  .wpPopup {
    display: none;
  }
}

.wpPopup.is-active {
  opacity: 1;
}

.wpPopup_pc {
  width: 350px;
}

.wpPopup_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #989898;
  position: relative;
}

.wpPopup_ttl {
  font-size: 18px !important;
  font-family: "游ゴシック", YuGothic, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
  color: #fff;
  padding: 17px 0 15px;
  margin: 0 auto;
  font-weight: bold;
}

.wpPopup_btn {
  position: absolute;
  top: 0;
  bottom: -5px;
  right: 20px;
  z-index: 10000;
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin: auto;
  transition: 0.4s;
}

.wpPopup_btn-line {
  position: absolute;
  width: 25px;
  height: 1px;
  background: #fff;
  text-align: center;
  transition: 0.4s;
}

.wpPopup_btn-line.line1 {
  top: 0;
  transform: translateY(10px) rotate(-45deg);
}

.wpPopup_btn-line.line2 {
  top: 32px;
  transform: translateY(-22px) rotate(45deg);
}

.wpPopup_content {
  text-align: center;
  padding: 30px 0;
}

.wpPopup_content-ttl {
  margin: 0 0 20px;
  font-weight: bold;
  font-size: 16px !important;
  font-family: "游ゴシック", YuGothic, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

.wpPopup_content-btn {
  width: 80%;
  font-size: 15px !important;
  font-family: "游ゴシック", YuGothic, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
  padding: 16px 20px;
  font-weight: bold;
  letter-spacing: 1px;
  background-color: #164C6C;
  color: #fff;
  transition: all .5s;
  display: inline-block;
}

.wpPopup_content-btn:hover {
  opacity: 0.8;
  transition: all 0.4s;
}

.wpPopup_content-txt {
  font-family: "游ゴシック", YuGothic, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
  padding-left: 70px;
  text-align: left;
  font-weight: bold;
  margin: 20px 0;
}

.wpPopup_content-txt li {
  background: linear-gradient(transparent 60%, #e6ddc7 0%);
  display: inline-block;
  position: relative;
  margin: 0 0 10px;
  font-size: 14px !important;
}

.wpPopup_content-txt li:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -25px;
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
  width: 7px;
  height: 14px;
  border-right: 3px solid #ECDBCC;
  border-bottom: 3px solid #ECDBCC;
}

.wpPopup_content-img {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ececec;
}

.wpPopup_content-img img {
  width: 100%;
}



/*コーポレートサイトtab表示ルール適用*/

@media print, screen and (min-width: 769px) {
  .pc-only {
    display: block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pc-only {
    display: none !important;
  }
}

@media screen and (max-width: 768.98px) {
  .pc-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pc-tab-only {
    display: block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pc-tab-only {
    display: block !important;
  }
}

@media screen and (max-width: 768.98px) {
  .pc-tab-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 769px) {
  .tab-only {
    display: none !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .tab-only {
    display: block !important;
  }
}

@media screen and (max-width: 768.98px) {
  .tab-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}

@media screen and (max-width: 768.98px) {
  .sp-only {
    display: block !important;
  }
}

@media print, screen and (min-width: 769px) {
  .tab-sp-only {
    display: none !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .tab-sp-only {
    display: block !important;
  }
}

@media screen and (max-width: 768.98px) {
  .tab-sp-only {
    display: block !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pc-sp-only {
    display: block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pc-sp-only {
    display: none !important;
  }
}

@media screen and (max-width: 768.98px) {
  .pc-sp-only {
    display: block !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pc-min-only {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .pc-min-only {
    display: block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pc-min-only {
    display: none !important;
  }
}

@media screen and (max-width: 768.98px) {
  .pc-min-only {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .pc-min-none {
    display: none !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pc-min-tab-only {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .pc-min-tab-only {
    display: block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pc-min-tab-only {
    display: block !important;
  }
}

@media screen and (max-width: 768.98px) {
  .pc-min-tab-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pc-min-sp-only {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .pc-min-sp-only {
    display: block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pc-min-sp-only {
    display: none !important;
  }
}

@media screen and (max-width: 768.98px) {
  .pc-min-sp-only {
    display: block !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pc-large-only {
    display: block !important;
  }
}

@media screen and (min-width: 1301px) and (max-width: 1700px) {
  .pc-large-only {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .pc-large-only {
    display: none !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pc-large-only {
    display: none !important;
  }
}

@media screen and (max-width: 768.98px) {
  .pc-large-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pc-large-none {
    display: none !important;
  }
}

@media screen and (min-width: 1301px) and (max-width: 1700px) {
  .pc-large-none {
    display: block !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .pc-large-none {
    display: block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pc-large-none {
    display: block !important;
  }
}

@media screen and (max-width: 768.98px) {
  .pc-large-none {
    display: block !important;
  }
}


.airconBanner {
  background: url("../img/capcell/back_banner.jpg") no-repeat top center;
  width: 100%;
  background-size: cover;
  padding-top: 50px;
  padding-bottom: 40px;
}

@media screen and (max-width: 768.98px) {
  .airconBanner {
    background: url("../img/capcell/back_banner_sp.jpg") no-repeat top center;
    background-size: cover;
    padding-top: 9.333333333333334vw;
    padding-bottom: 9.333333333333334vw;
  }
}

.airconBanner_outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .airconBanner_outer {
    justify-content: space-between;
    padding-bottom: 20px;
  }
}

@media screen and (max-width: 768.98px) {
  .airconBanner_outer {
    display: block;
  }
}

.airconBanner_img {
  width: 24.166666666666668%;
}

@media screen and (max-width: 768.98px) {
  .airconBanner_img {
    width: 40%;
    margin: 0;
  }
}

.airconBanner_img img {
  width: 100%;
}

.airconBanner_img-txt {
  font-size: 15px;
  text-align: center;
  color: #333;
  margin: 5px 0 0;
}

@media screen and (max-width: 768.98px) {
  .airconBanner_img-txt {
    font-size: 3.2vw !important;
    line-height: 1.5 !important;
  }
}

.airconBanner_content {
  color: #333;
  width: 55.41666666666667%;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .airconBanner_content {
    width: 65%;
  }
}

@media screen and (max-width: 768.98px) {
  .airconBanner_content {
    width: 100%;
  }
}

.airconBanner_content-main {
  width: 50.13333333333333vw;
}

@media screen and (max-width: 768.98px) {
  .airconBanner_content-main--outer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}

.airconBanner_content-an {
  color: #2b75a7;
  font-weight: bold;
  background: #fff;
  border: solid 1px #2b75a7;
  width: 110px;
  text-align: center;
  padding: 8px 0;
  margin: 0 0 7px;
  border-radius: 4px;
  line-height: 1 !important;
  font-size: 15px !important;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .airconBanner_content-an {
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 768.98px) {
  .airconBanner_content-an {
    width: 24vw;
    padding: 2.4vw 0 2.133333333333333vw;
    margin-bottom: 1.866666666666667vw;
    font-size: 3.466666666666667vw !important;
  }
}

.airconBanner_content-ttl {
  font-size: 30px !important;
  font-weight: bold;
  margin: 0 0 35px;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .airconBanner_content-ttl {
    line-height: 1.5;
  }
}

@media screen and (max-width: 768.98px) {
  .airconBanner_content-ttl {
    font-size: 5.066666666666666vw !important;
    margin-bottom: 2.666666666666667vw;
    line-height: 1.5 !important;
  }
}

.airconBanner_content-ex--ttl {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 10px;
}

@media screen and (max-width: 768.98px) {
  .airconBanner_content-ex--ttl {
    font-size: 4.266666666666667vw !important;
    line-height: 2 !important;
    margin: 0 0 2.666666666666667vw;
  }
}

.airconBanner_content-ex--txt {
  margin: 0 0 40px;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .airconBanner_content-ex--txt {
    margin: 0;
  }
}

@media screen and (max-width: 768.98px) {
  .airconBanner_content-ex--txt {
    margin: 0 0 5.333333333333333vw;
  }
}

.airconBanner_button {
  background: #2b75a7;
  color: #fff;
  margin: 0;
  padding: 20px 37px 22px 24px;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  font-size: 16px !important;
  width: 445px;
  position: relative;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .airconBanner_button {
    width: auto;
    padding: 20px 24px;
  }
}

@media screen and (max-width: 768.98px) {
  .airconBanner_button {
    width: 100%;
    font-size: 4vw !important;
    padding: 6.133333333333333vw 0;
  }
}

.airconBanner_button:before {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

@media screen and (max-width: 768.98px) {
  .airconBanner_button:before {
    content: none;
  }
}

.airconBanner_link {
  transition: 0.4s;
  display: inline-block;
}

@media screen and (max-width: 768.98px) {
  .airconBanner_link {
    width: 100%;
  }
}

.airconBanner_link:hover {
  opacity: 0.8;
}

.office-an {
  margin: 10px 0 0;
}

@media screen and (max-width: 768.98px) {
  .office-an {
    margin: 3vw 0 0;
  }
}



/* woodoffice
====================================================*/
/*mv*/
.woodoffice_mv {
  width: 100%;
  position: relative;
}

.woodoffice_mv-bg {
  position: relative;
  background: url(../img/woodoffice/wood_mv.jpg) no-repeat center center/cover;
  height: 100vh;
  padding: 80px 0;
}

.woodoffice_mv-box {
  position: absolute;
  color: #fff;
  top: 20%;
}

.woodoffice_mv-box .trailmade-title-box {
  margin: 0 0 60px;
}

.woodoffice_mv-box .trailmade-title-box h2 {
  text-align: left;
  color: #fff;
  font-size: 100px;
  font-size: 10rem;
}

.woodoffice_mv-box .trailmade-title-box h2 span {
  font-size: 120px;
  font-size: 12rem;
}

.woodoffice_mv-box h3 {
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: 500;
  margin: 0 0 30px;
  line-height: 1.5;
}

.woodoffice_mv-box p {
  line-height: 2;
  font-weight: 500;
}

.woodoffice_mv-tree img {
  width: 100%;
  bottom: 10vh;
  z-index: 2;
  position: absolute;
}

@media (max-width:768px) {
  .woodoffice_mv-bg {
    background: url(../img/woodoffice/wood_mv_sp.jpg) no-repeat center center/cover;
  }

  .woodoffice_mv-box .trailmade-title-box {
    margin: 0 0 30px;
  }

  .woodoffice_mv-box .trailmade-title-box h2 {
    font-size: 6rem;
  }

  .woodoffice_mv-box .trailmade-title-box h2 span {
    font-size: 8rem;
  }

  .woodoffice_mv-box h3 {
    font-size: 2.2rem;
  }

  .woodoffice_mv-tree img {
    bottom: 5vh;
  }

  .woodoffice_mv-box {
    top: 17vh;
    left: 0;
    padding: 0 15px;
  }
}

/*reason*/
.woodoffice_reason {
  background: #F7F7F7 url(../img/woodoffice/wood_reason_bg.png) no-repeat bottom right 100px/700px;
  padding: 100px 0 0;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.woodoffice_reason h2 {
  font-size: 32px;
  font-size: 3.2rem;
  margin: 0 0 40px;
  line-height: 1.8;
}

.woodoffice_reason p {
  padding: 0 0 100px;
  line-height: 2.2;
  font-weight: 500;
}

@media only screen and (min-width:993px) and (max-width:1200px) {
  .woodoffice_reason {
    background: #F7F7F7 url(../img/woodoffice/wood_reason_bg.png) no-repeat bottom right 40px/500px;
  }
}

@media only screen and (max-width:992px) {
  .woodoffice_reason {
    height: unset;
    padding: 50px 0 0;
    background: none;
  }
}

@media (max-width:768px) {
  .woodoffice_reason {
    height: unset;
    padding: 50px 0 0;
    background: none;
  }

  .woodoffice_reason h2 {
    font-size: 2.0rem;
    margin: 0 0 20px;
  }

  .woodoffice_reason p {
    padding: 0 0 30px;
  }

  .woodoffice_reason img {
    width: 80%;
    margin: 0 auto;
  }
}

/*wood*/
.woodoffice_wood {
  color: #fff;
  background: url(../img/woodoffice/wood_wood_bg.jpg) no-repeat center center/cover;
  height: 80vh;
  padding: 80px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.woodoffice_wood:before {
  content: "";
  background: rgba(0, 0, 0, .1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.woodoffice_wood-box {
  z-index: 2;
}

.woodoffice_wood h2 {
  font-size: 32px;
  font-size: 3.2rem;
  margin: 0 0 20px;
  line-height: 1.8;
}

.woodoffice_wood p {
  line-height: 2.2;
  font-weight: 500;
}

@media (max-width:768px) {
  .woodoffice_wood {
    height: unset;
  }

  .woodoffice_wood h2 {
    font-size: 2.4rem;
  }
}

/*sus*/
.woodoffice_sus {
  background: #F1EBE6;
  padding: 150px 0;
}

.woodoffice_sus h2 {
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: bold;
  position: absolute;
  left: 0;
  line-height: 1.8;
}

.woodoffice_sus-lead {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: right;
  margin: 0 0 60px;
}

.woodoffice_sus-lead img {
  width: 800px;
}

.woodoffice_sus-co2 {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  position: relative;
  justify-content: right;
  margin: 0 0 60px;
}

.woodoffice_sus-co2-txt {
  margin-left: 50px;
  font-weight: 500;
}

.woodoffice_sus-co2-txt h3 {
  font-size: 20px;
  font-size: 2.0rem;
  margin: 0 0 30px;
  font-weight: 500;
}

.woodoffice_sus-co2-txt p {
  line-height: 1.8;
}

.woodoffice_sus-co2 img {
  width: 37.5%;
}

@media (max-width:992px) {
  .woodoffice_sus {
    padding: 50px 0;
  }

  .woodoffice_sus-lead {
    display: block;
    margin: 0 0 60px;
  }

  .woodoffice_sus h2 {
    position: relative;
    margin: 0 0 20px;
  }

  .woodoffice_sus-co2 {
    display: block;
  }

  .woodoffice_sus-co2-txt {
    margin-left: 0;
  }

  .woodoffice_sus-co2-txt h3 {
    margin: 0 0 20px;
  }

  .woodoffice_sus-co2 img {
    margin-bottom: 20px;
    width: 100%;
  }

  .woodoffice_sus-banner a:after {
    right: 40px !important;
  }
}

@media (max-width:768px) {
  .woodoffice_sus {
    padding: 50px 0;
  }

  .woodoffice_sus-lead {
    display: block;
    margin: 0 0 60px;
  }

  .woodoffice_sus h2 {
    font-size: 2.2rem;
    position: relative;
    margin: 0 0 20px;
  }

  .woodoffice_sus-co2 {
    display: block;
  }

  .woodoffice_sus-co2-txt {
    margin-left: 0;
  }

  .woodoffice_sus-co2-txt h3 {
    margin: 0 0 20px;
    font-size: 1.8rem;
  }

  .woodoffice_sus-co2 img {
    margin-bottom: 20px;
  }
}


/*sus banner*/
.woodoffice_sus-banner a {
  width: 100%;
  overflow: hidden;
  transition: all .5s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 400px;
  text-align: center;
  position: relative;
}

.woodoffice_sus-banner a:hover {
  transform: scale(1.05);
  opacity: .7;
  transition-duration: 0.5s;
  transition: all .5s;
}

.woodoffice_sus-banner--outer {
  overflow: hidden;
}

.woodoffice_sus-banner a:after {
  content: "";
  background: url(../img/woodoffice/wood_arrow.svg) no-repeat;
  width: 76px;
  height: 156px;
  position: absolute;
  right: 100px;
}

.woodoffice_sus-banner a p {
  text-align: center;
}

.woodoffice_sus-banner a h4 {
  margin: 0 0 20px;
}

.woodoffice_sus-banner--txt {
  text-align: center;
}

.woodoffice_sus-banner01 {
  background: url(../img/woodoffice/wood_banner_01.jpg) no-repeat center center/cover;
}

.woodoffice_sus-banner01 h4 {
  font-family: 'futura-pt', serif;
  font-size: 40px;
  font-size: 4.0rem;
}

.woodoffice_sus-banner02 {
  background: url(../img/woodoffice/wood_banner_02.jpg) no-repeat center center/cover;
  position: relative;
}

.woodoffice_sus-banner02 h4 {
  font-family: "Shippori Mincho", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 36px;
  font-size: 3.6rem;
}

.woodoffice_sus-banner--note {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px !important;
  font-size: 1.2rem !important;
}

.woodoffice_sus-banner03 {
  background: url(../img/woodoffice/wood_banner_03.jpg) no-repeat center center/cover;
}

.woodoffice_sus-banner03 h4 {
  font-size: 30px;
  font-size: 3.0rem;
}

@media (max-width:768px) {
  .woodoffice_sus-banner a {
    height: 40vw;
  }

  .woodoffice_sus-banner a h4 {
    font-size: 2.4rem;
  }

  .woodoffice_sus-banner a:after {
    content: none;
  }

  .woodoffice_sus-banner a p {
    font-size: 1.3rem;
  }
}




/*series*/
.woodoffice_series {
  padding: 100px 0;
}

.woodoffice_series h2 {
  font-family: 'futura-pt', serif;
  font-size: 32px;
  font-size: 3.2rem;
  color: #164C6C;
  font-weight: 500;
  margin: 0 0 20px;
}

.woodoffice_series p {
  color: #164C6C;
  font-weight: 500;
  line-height: 1.8;
}

.swiper-woodseries {
  margin: 70px 0 0;
}

.woodoffice-slider {
  overflow: visible;
}

.swiper {
  overflow: visible;
}

.woodoffice-slider .swiper-slide {
  width: fit-content;
  height: 300px;
}

.woodoffice-slider .swiper-slide img {
  height: 250px;
}

.woodoffice-slider .swiper-slide p {
  text-align: center;
  font-family: 'futura-pt', serif;
  color: #333;
}

@media (max-width:768px) {
  .woodoffice_series {
    padding: 50px 0;
  }

  .woodoffice-slider .swiper-slide {
    height: 45vw;
  }

  .woodoffice-slider .swiper-slide img {
    height: 40vw;
  }

  .swiper-woodseries {
    margin: 40px 0 0;
  }
}


/*point*/
.woodoffice_point {
  background: #F1EBE6;
  padding: 0 0 150px;
}

.woodoffice_point-head.relax {
  background: url(../img/woodoffice/wood_relax_bg.jpg) no-repeat center center/cover;
  color: #fff;
  text-align: center;
  padding: 200px 0;
}

.woodoffice_point-head.green {
  background: url(../img/woodoffice/wood_green_bg.jpg) no-repeat center center/cover;
  color: #fff;
  text-align: center;
  padding: 200px 0;
}

.woodoffice_point-head h2 {
  font-size: 32px;
  font-size: 3.2rem;
  margin: 0 0 30px;
  font-weight: bold;
}

.woodoffice_point-head p {
  text-align: center;
  font-size: 16px;
  font-size: 1.6rem;
}

.woodoffice_point-icon {
  padding: 50px 0 0;
  color: #333;
}

.woodoffice_point-icon .arrow-box-blue {
  margin: 80px 0 0;
}

.woodoffice_point-icon.relax .caption-text {
  margin: 30px 15px 0 !important;
  font-size: 16px !important;
  font-size: 1.6rem !important;
}

.woodoffice_point-icon.green .caption-text {
  margin: 50px 0 0 !important;
}

@media (max-width:992px) {
  /* .woodoffice_point {
    padding: 0 0 80px;
  }

  .woodoffice_point-head {
    padding: 50px 30px !important;
  }

  .woodoffice_point-icon {
    padding: 20px 0 0;
  } */

  .woodoffice_point-icon .flex-ever {
    flex-wrap: wrap;
  }

  /* .woodoffice_point-icon .arrow-box-blue {
    margin: 40px 0 0;
  }

  .woodoffice_point-icon.relax .caption-text {
    margin: 20px 10px 0 !important;
  }

  .woodoffice_point-icon.green .caption-text {
    margin: 20px 10px 0 !important;
  } */
  .woodoffice_point .column-4 {
    width: 48%;
    margin: 0 1% 5%;
  }
}

@media (max-width:768px) {
  .woodoffice_point {
    padding: 0 0 80px;
  }

  .woodoffice_point-head {
    padding: 50px 30px !important;
  }

  .woodoffice_point-head h2 {
    font-size: 2.4rem;
  }

  .woodoffice_point-icon {
    padding: 20px 0 0;
  }

  .woodoffice_point-icon .flex-ever {
    flex-wrap: wrap;
  }

  .woodoffice_point-icon .arrow-box-blue {
    margin: 40px 0 0;
  }

  .woodoffice_point-icon.relax .caption-text {
    margin: 20px 10px 0 !important;
  }

  .woodoffice_point-icon.green .caption-text {
    margin: 20px 10px 0 !important;
    font-size: 1.6rem;
  }
}