.keyvisual {
  position: relative;
}
.keyvisual:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 118vw;
  background: url('../img/about/key_deco.png') no-repeat center top;
  background-size: contain;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .keyvisual::before {
    height: 959px;
  }
}
@media screen and (min-width: 1501px) {
  .keyvisual::before {
    background-size: 100% 100%;
  }
}

/*--------------------------------------
    sec1
--------------------------------------*/
#sec1 {
  padding: 16vw 0;
}
#sec1 .top {
  position: relative;
  z-index: 1;
}
#sec1 .top:before {
  content: '';
  position: absolute;
  top: 85vw;
  left: 0;
  width: 100%;
  height: 74vw;
  background: url('../img/about/s1_deco.png') no-repeat center;
  background-size: contain;
  z-index: -1;
}
#sec1 .top h3 {
  font-size: 6vw;
  line-height: 1.5;
  position: relative;
}
#sec1 .top h3:before {
  content: '';
  position: absolute;
  bottom: -12vw;
  left: -10%;
  background: url('../img/about/s1_ttl_deco.png') no-repeat center bottom;
  width: 34vw;
  height: 19vw;
  background-size: contain;
}
#sec1 .top h3.ttl2 {
  margin-left: auto;
  display: table;
  margin-top: 5vw;
}
#sec1 .top h3.ttl2::before {
  background: url('../img/about/s1_ttl_deco2.png') no-repeat center bottom;
  background-size: contain;
  left: auto;
  right: -10%;
}
#sec1 .top h2 {
  position: absolute;
  left: 46%;
  top: 98vw;
  background: #fff;
  border: 1px solid;
  font-size: 7vw;
  white-space: nowrap;
  padding: 10px 0;
  letter-spacing: 0.1em;
}
#sec1 .top h2 .int {
  height: 13vw;
  margin-top: -4vw;
}
#sec1 .top h2 .int:before {
  display: none;
}
#sec1 .top h2 .ttl-deco span {
  min-width: 15vw;
  display: inline-block;
}
#sec1 .top h2 .ttl-deco span::before {
  left: calc(100% - 5vw);
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  line-height: 1;
}
#sec1 .top h2::before,
#sec1 .top h2::after {
  content: '';
  position: absolute;
  top: -2vw;
  left: -34vw;
  width: 29vw;
  height: 14vw;
  background: url('../img/about/s1_line.png') no-repeat center;
  background-size: contain;
}
#sec1 .top h2::after {
  top: auto;
  bottom: 2vw;
  left: auto;
  right: -34vw;
  background: url('../img/about/s1_line2.png') no-repeat center;
  background-size: contain;
}
#sec1 .top .logo1 {
  margin: 14vw 0 66vw -5vw;
  width: 70%;
}
#sec1 .top .logo2 {
  width: 80%;
  margin-left: auto;
}
#sec1 .bottom {
  margin-top: 12vw;
}
#sec1 .bottom .s1-js p {
  width: 90vw !important;
}
#sec1 .bottom .sl-fade {
  margin: -16vw -5vw 0;
}
#sec1 .bottom .sl-fade .slick-dots {
  display: none !important;
}
#sec1 .bottom h2 {
  font-size: 6vw;
  background: #fff;
  border: 1px solid;
  padding: 3px 17px;
  margin-bottom: 6vw;
  margin-top: -11vw;
  position: relative;
  z-index: 2;
  letter-spacing: 0.06em;
  display: table;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  #sec1 {
    padding: 90px 0 83px;
  }
  #sec1 .top::before {
    width: 100%;
    height: 381px;
    top: 71px;
    left: -20px;
  }
  #sec1 .top .wrap {
    max-width: 1090px;
  }
  #sec1 .top h2 {
    top: 83px;
    font-size: 42px;
    line-height: 65px;
    left: calc(50% - 16px);
    padding: 22px 2px 20px 0;
    width: 69px;
    box-sizing: border-box;
  }
  #sec1 .top h2 .int {
    height: 55px;
    margin-top: -13px;
    letter-spacing: 0em;
    position: relative;
    left: -2px;
  }
  #sec1 .top h2::before {
    width: 145px;
    height: 55px;
    left: -164px;
    top: 112px;
  }
  #sec1 .top h2::after {
    width: 155px;
    height: 34px;
    right: -167px;
    bottom: 68px;
  }
  #sec1 .top h2 .ttl-deco span {
    min-width: 67px;
  }
  #sec1 .top h2 .ttl-deco span::before {
    font-size: 20px;
    left: calc(100% - 14px);
    margin-top: 2px;
  }
  #sec1 .top h3 {
    font-size: 26px;
    line-height: 39px;
    margin-left: calc(50% - 244px);
  }
  #sec1 .top h3::before {
    width: 145px;
    height: 70px;
    bottom: -55px;
    left: -41px;
  }
  #sec1 .top h3.ttl2 {
    margin-top: -34px;
    margin-right: calc(50% - 353px);
  }
  #sec1 .top h3.ttl2::before {
    right: -23px;
    bottom: -63px;
  }
  #sec1 .top .logo1 {
    width: auto;
    margin: 9px 0 -101px 69px;
  }
  #sec1 .top .logo2 {
    width: 315px;
  }
  #sec1 .bottom {
    margin-top: 119px;
  }
  #sec1 .bottom .s1-js p {
    width: auto !important;
  }
  #sec1 .bottom .sl-fade {
    margin: -185px auto 0;
    width: 100%;
    max-width: 932px;
    position: relative;
    left: 39px;
  }
  #sec1 .bottom h2 {
    font-size: 38px;
    line-height: 51px;
    margin-top: -118px;
    margin-left: 1px;
    padding: 0 28px 3px 32px;
    margin-bottom: 69px;
  }
  #sec1 .bottom .txt {
    margin-left: 1px;
  }
}

/*--------------------------------------
    sec2
--------------------------------------*/
#sec2 {
  background: url('../img/about/s2_bg.png') no-repeat center top;
  background-size: auto 95vw;
  padding: 5vw 0 12vw;
  position: relative;
}
#sec2:before {
  content: '';
  position: absolute;
  top: 181vw;
  left: 0;
  width: 109%;
  height: 100vw;
  background: url('../img/about/s2_bg2.png') no-repeat right;
  background-size: contain;
  z-index: -1;
}
#sec2::after {
  content: '';
  position: absolute;
  bottom: -52vw;
  left: 0;
  width: 100%;
  height: 100vw;
  background: url('../img/about/s2_bg3.png') no-repeat left;
  background-size: contain;
  z-index: -1;
}
#sec2 h2 {
  color: #fff;
  font-size: 7vw;
  white-space: nowrap;
  margin: 0 auto 7vw;
  letter-spacing: 0.1em;
  line-height: 1.5;
  width: 21vw;
}
#sec2 h2 .block {
  display: block;
  margin-top: 24vw;
}
#sec2 h2 small {
  font-size: 93.8775510204%;
  letter-spacing: 0.06em;
}
#sec2 .first-ttl {
  font-size: 5.6vw;
  line-height: 1.8;
}
#sec2 .first-ttl span {
  display: table;
  background: #fff;
  border: 1px solid;
  margin-left: auto;
  margin-bottom: 2vw;
  padding: 0 17px;
}
#sec2 .first-ttl span:nth-child(1) {
  margin-left: 0;
}
#sec2 .note {
  text-align: right;
}
#sec2 .note::after {
  content: '';
  display: inline-block;
  background: url('../img/about/s2_icon.png') no-repeat center;
  width: 28px;
  height: 28px;
  background-size: contain;
  margin: 0 0px -8px 3px;
}
#sec2 .main {
  margin-top: 12vw;
}
#sec2 .main .item {
  width: 80%;
  position: relative;
}
#sec2 .main .item + .item {
  margin-top: 7vw;
}
#sec2 .main .item:nth-child(1) h3 {
  top: 0;
  position: absolute;
  left: 100%;
}
#sec2 .main .item:nth-child(2n) {
  margin-left: auto;
}
#sec2 .main .item h3 {
  font-size: 7vw;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  #sec2 {
    background-size: auto 651px;
    padding-top: 33px;
    padding-bottom: 30px;
  }
  #sec2 .deco {
    position: absolute;
    left: 0;
    top: 309px;
    z-index: -1;
  }
  #sec2::before {
    width: 1110px;
    height: 1042px;
    top: 764px;
    left: calc(50% - 427px);
  }
  #sec2::after {
    width: 1315px;
    height: 1160px;
    bottom: -578px;
    left: calc(50% - 736px);
  }
  #sec2 .wrap {
    max-width: 1240px;
  }
  #sec2 h2 {
    font-size: 49px;
    width: 128px;
    position: relative;
    left: 20px;
    line-height: 63px;
    height: 551px;
    margin-bottom: -13px;
  }
  #sec2 h2 .block {
    margin-top: 160px;
  }
  #sec2 .first-ttl {
    font-size: 38px;
    margin-right: -1px;
    line-height: 57px;
    letter-spacing: 0.06em;
  }
  #sec2 .first-ttl span {
    margin-bottom: 14px;
    padding: 0 23px 2px 13px;
  }
  #sec2 .first-ttl span:nth-child(1) {
    margin-left: auto;
    margin-right: 158px;
  }
  #sec2 .first-ttl span:nth-child(2) {
    padding: 0 17px 0 39px;
  }
  #sec2 .note {
    margin-right: 158px;
    margin-top: -4px;
  }
  #sec2 .note::after {
    width: 32px;
    height: 32px;
    margin: 0 0 -9px 0;
  }
  #sec2 .main {
    gap: 60px;
    margin: 45px auto 0;
    width: 100%;
    max-width: 1108px;
    flex-wrap: wrap;
  }
  #sec2 .main .item {
    width: calc(50% - 29px);
  }
  #sec2 .main .item h3 {
    font-size: 48px;
    transform: scaleX(0.8);
    transform-origin: left;
    letter-spacing: 0.1em;
    line-height: 80px;
    margin-bottom: -1px;
  }
  #sec2 .main .item:nth-child(1) h3 {
    top: -52px;
    position: absolute;
    left: 102.1%;
  }
  #sec2 .main .item:nth-child(2) {
    margin-right: -7px;
    margin-top: 506px;
  }
  #sec2 .main .item:nth-child(3) {
    margin-top: -526px;
    margin-left: 12px;
  }
  #sec2 .main .item:nth-child(3) h3 {
    transform: scaleY(0.8);
    margin: 0 0 6px -1px;
  }
  #sec2 .main .item:nth-child(4) {
    margin: 76px -22px 0 auto;
  }
  #sec2 .main .item:nth-child(4) h3 {
    letter-spacing: 0.06em;
    margin-left: -2px;
    margin-bottom: 17px;
  }
}
@media screen and (min-width: 1501px) {
  #sec2 {
    background-size: 100%;
  }
  #sec2 h2 {
    margin-bottom: 4vw;
  }
}

.s2-popup {
  background: transparent;
  border: none;
}
.s2-popup .remodal-close {
  margin-right: 10px;
  width: 40px;
  height: 40px;
  margin-bottom: -55px;
}
.s2-popup .pop-js {
  min-width: 100%;
}
.s2-popup .pop-js .slick-track {
  align-items: center;
  display: flex;
}
.s2-popup .pop-js .slick-track,
.s2-popup .pop-js .slick-slide,
.s2-popup .pop-js .item {
  min-width: 90vw;
}
.s2-popup .pop-js .item {
  position: relative;
  text-align: left;
}
.s2-popup .pop-js .item .txt {
  color: #fff;
  margin-top: 5vw;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .s2-popup {
    width: 706px;
    margin: 0 auto;
  }
  .s2-popup .remodal-close {
    width: 56px;
    height: 56px;
    margin-bottom: -81px;
    margin-right: 19px;
  }
  .s2-popup .pop-js .slick-track,
  .s2-popup .pop-js .slick-slide,
  .s2-popup .pop-js .item {
    min-width: 706px;
  }
  .s2-popup .pop-js .slick-next {
    width: 62px;
    height: 65px;
    right: -84px;
  }
  .s2-popup .pop-js .slick-prev {
    width: 62px;
    height: 65px;
    left: -84px;
  }
  .s2-popup .pop-js .item .content {
    text-align: left;
    opacity: 1;
    z-index: 2;
    line-height: 32px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .s2-popup .pop-js .item .txt {
    margin-top: 0;
  }
  .s2-popup .pop-js .item.item1 .content {
    top: 50%;
    left: 32px;
    width: 285px;
    transform: translateY(-50%);
    margin-top: 24px;
    color: #fff;
  }
  .s2-popup .pop-js .item.item1 .txt {
    border-top: 3px solid;
    border-bottom: 3px solid;
    position: relative;
    padding: 24px 12px;
  }
  .s2-popup .pop-js .item.item1 .txt:before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    border-top: 1px solid;
    border-bottom: 1px solid;
    bottom: 6px;
  }
  .s2-popup .pop-js .item.item2 .bg {
    position: relative;
  }
  .s2-popup .pop-js .item.item2 .bg:before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    bottom: 6px;
    right: 6px;
    border: 1px solid #fff;
    z-index: 1;
  }
  .s2-popup .pop-js .item.item2 .content {
    padding: 127px 64px;
  }
  .s2-popup .pop-js .item.item2 .content h3 {
    font-size: 28px;
    line-height: 37px;
    color: #000;
    letter-spacing: 0.1em;
  }
  .s2-popup .pop-js .item.item2 .content h3 span {
    display: table;
    background: #fff7e7;
    border: 1px solid;
    padding: 0 30px 6px;
    margin-bottom: 10px;
  }
  .s2-popup .pop-js .item.item2 .content h4 {
    font-size: 24px;
    text-align: center;
    line-height: 36px;
    letter-spacing: 0.1em;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    background: url('../img/about/s2_ttl_deco.png') no-repeat center;
    width: 252px;
    height: 136px;
    top: 134px;
    right: 37px;
    box-sizing: border-box;
    padding-top: 22px;
    padding-left: 13px;
  }
  .s2-popup .pop-js .item.item2 .content h4.ttl2 {
    background: url('../img/about/s2_ttl_deco2.png') no-repeat center;
    width: 243px;
    height: 115px;
    top: 233px;
    right: 133px;
    padding: 10px 0 0 0px;
  }
  .s2-popup .pop-js .item.item2 .content h5 {
    font-size: 48px;
    color: #fff;
    position: absolute;
    right: 37px;
    top: 347px;
    text-shadow:
      1px 0 0 #000,
      -1px 0 0 #000,
      0 1px 0 #000,
      0 -1px 0 #000,
      1px 1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      -1px -1px 0 #000;
  }
  .s2-popup .pop-js .item.item2 .content .txt {
    color: #fff;
    margin-top: 180px;
    margin: 228px 0 0 24px;
  }
  .s2-popup .pop-js .item.item3 .content {
    padding: 85px 89px;
  }
  .s2-popup .pop-js .item.item3 h3 {
    font-size: 28px;
    line-height: 40px;
    color: #000;
    letter-spacing: 0.1em;
    width: 292px;
  }
  .s2-popup .pop-js .item.item3 h3 span {
    display: block;
    background: #fff7e7;
    border: 1px solid;
    padding: 0 19px 3px;
    margin-bottom: 10px;
  }
  .s2-popup .pop-js .item.item3 h4 {
    white-space: nowrap;
    color: #fff;
    font-size: 38px;
    line-height: 56px;
    margin: 18px -56px 0 auto;
    letter-spacing: 0.06em;
    text-align: right;
  }
  .s2-popup .pop-js .item.item3 h4 span {
    display: table;
    border-right: 1px dashed;
  }
  .s2-popup .pop-js .item.item3 h4 span:nth-child(2) {
    margin-top: auto;
  }
  .s2-popup .pop-js .item.item3 .txt {
    color: #fff;
    margin: 53px -30px 0 -2px;
  }
  .s2-popup .pop-js .item.item4 .content {
    padding: 26px 0 0 20px;
  }
  .s2-popup .pop-js .item.item4 h3 {
    color: #283454;
    font-size: 32px;
    line-height: 36px;
    background: url('../img/about/s2_ttl_deco3.png') no-repeat center;
    background-size: contain;
    width: 341px;
    height: 235px;
    box-sizing: border-box;
    padding: 72px 0 0 47px;
    letter-spacing: 0.04em;
  }
  .s2-popup .pop-js .item.item4 h3 span {
    transform: scaleX(0.9);
    display: inline-block;
    transform-origin: left;
    margin-right: -20px;
  }
  .s2-popup .pop-js .item.item4 h3.ttl2 {
    position: absolute;
    top: 22px;
    right: 19px;
    z-index: 2;
    padding: 67px 0 0 39px;
    background: url('../img/about/s2_ttl_deco4.png') no-repeat center;
    background-size: contain;
    font-size: 30px;
  }
  .s2-popup .pop-js .item.item4 h3.ttl2 small {
    font-size: 19px;
  }
  .s2-popup .pop-js .item.item4 .txt {
    color: #fff;
    margin: 278px 108px 0 69px;
  }
}

/*--------------------------------------
    sec4
--------------------------------------*/
#sec3 {
  position: relative;
}
#sec3:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 25.8%;
  background: url('../img/about/bird.png') no-repeat center;
  background-size: contain;
  width: 44px;
  height: 62px;
  z-index: 2;
}
#sec3 .top {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 24vw 0 20vw;
}
#sec3 .top:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 62vw;
  background: url('../img/about/s3_bg.png') no-repeat center top;
  background-size: cover;
  z-index: -1;
  -webkit-mask-image: url('../img/about/s3_mask.png');
  -webkit-mask-size: 210% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../img/about/s3_mask.png');
  mask-size: 210% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}
#sec3 h2 {
  font-size: 7vw;
  margin: 0 -5vw 28vw;
  text-align: center;
}
#sec3 .txt {
  color: #000;
}
#sec3 .s3-js {
  z-index: 2;
  margin-top: -10vw;
}
#sec3 .s3-js p {
  width: 170px !important;
  margin: 0 10px;
}
#sec3 .s3-js p.even {
  width: 246px !important;
  margin-top: 85px;
}
#sec3 .s3-js p.mt {
  margin-top: 25px;
}
#sec3 .s3-js p.mt2 {
  margin-top: 120px;
}
@media screen and (min-width: 768px) {
  #sec3 .top {
    padding: 211px 0 315px;
  }
  #sec3 .top::before {
    background-position-y: bottom;
    background-size: cover;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    height: 100%;
  }
  #sec3 h2 {
    font-size: 42px;
    letter-spacing: 0.1em;
    margin: 0 0 55px 9px;
  }
  #sec3 .txt {
    text-align: center;
    margin-left: 4px;
    position: relative;
    color: inherit;
  }
  #sec3 .txt:before {
    content: '';
    position: absolute;
    bottom: -8px;
    right: calc(50% - 339px);
    background: url('../img/about/bird.png') no-repeat center;
    width: 44px;
    height: 62px;
    background-size: contain;
    transform: scaleX(-1);
  }
  #sec3 .s3-js {
    margin-top: -240px;
    line-height: 1;
  }
  #sec3 .s3-js p {
    width: auto !important;
    margin: 0 25px;
  }
  #sec3 .s3-js p.even {
    margin-top: 135px;
    width: auto !important;
  }
  #sec3 .s3-js p.mt {
    margin-top: 30px;
  }
  #sec3 .s3-js p.mt2 {
    margin-top: 193px;
  }
}
@media screen and (min-width: 1501px) {
  #sec3 .top::before {
    background-position-y: top;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }
}

/*--------------------------------------
    sec4
--------------------------------------*/
#sec4 {
  padding: 16vw 0;
  position: relative;
  z-index: 1;
}
#sec4:before {
  content: '';
  position: absolute;
  bottom: -21vw;
  left: 0;
  width: 100%;
  height: 89vw;
  background: url('../img/about/s4_deco2.png') no-repeat center;
  background-size: contain;
  z-index: -1;
}
#sec4 h2 {
  font-size: 5.8vw;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
#sec4 .ttl {
  width: 40%;
  margin: 1.1vw -4% 10.4vw auto;
  position: relative;
}
#sec4 .ttl::before {
  content: '';
  position: absolute;
  top: 65%;
  right: calc(100% + 5vw);
  width: 100vw;
  height: 1px;
  background: #484848;
}
#sec4 .s4-infi {
  margin-bottom: -6vw;
}
#sec4 .s4-infi img {
  width: auto;
  max-width: unset;
  height: 70px;
}
#sec4 .content {
  background: #d7d7d7;
  border: 1px solid;
  border-radius: 10px;
  padding: 5vw;
  position: relative;
  z-index: 2;
}
#sec4 .infiniteslide_wrap {
  overflow: visible !important;
}
#sec4 .set1 .content {
  margin: 0 5%;
}
#sec4 .set1 .photo {
  margin-left: 3%;
  height: 60vw;
  margin-bottom: -5vw;
  position: relative;
}
#sec4 .set1 .photo:before {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 929px;
  height: 409px;
  background: url('../img/about/s4_deco1.png') no-repeat right;
  background-size: contain;
}
#sec4 .set1 .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#sec4 .set2 {
  margin-top: 12vw;
}
#sec4 .set2 .row .sl-fade {
  line-height: 1;
  margin: 0 -3vw 6vw;
}
#sec4 .set2 .row .sl-fade .slick-dots li button {
  background: #242424;
  border: 1px solid #fff;
}
#sec4 .set2 .row .sl-fade .slick-dots li.slick-active button {
  background: #fff;
}
@media screen and (min-width: 768px) {
  #sec4 {
    padding: 53px 0 187px;
  }
  #sec4::before {
    width: 733px;
    height: 639px;
    bottom: -103px;
  }
  #sec4 .text {
    position: relative;
    display: table;
  }
  #sec4 .text h2 {
    font-size: 42px;
    line-height: 59px;
    margin-left: -2px;
  }
  #sec4 .text .ttl {
    width: 165px;
    margin: 5px 30px 68px auto;
  }
  #sec4 .text .ttl::before {
    top: 21px;
    right: calc(100% + 34px);
  }
  #sec4 .s4-infi {
    margin-bottom: -53px;
  }
  #sec4 .s4-infi img {
    height: 137px;
  }
  #sec4 .set1 .row {
    display: block;
  }
  #sec4 .set1 .row .content {
    margin: -189px 0 0 50px;
    width: 700px;
    padding: 46px 20px 48px 51px;
    box-sizing: border-box;
  }
  #sec4 .set1 .row .photo {
    margin: 0;
    width: auto;
    margin-left: 401px;
    height: 499px;
  }
  #sec4 .set2 {
    margin-top: 152px;
  }
  #sec4 .set2 .wrap {
    max-width: 1102px;
  }
  #sec4 .set2 .s4-infi {
    margin-bottom: 77px;
  }
  #sec4 .set2 .row {
    gap: 0;
    align-items: start;
  }
  #sec4 .set2 .row .sl-fade {
    width: 726px;
    margin: -273px 0 0 -50px;
  }
  #sec4 .set2 .row .sl-fade .slick-dots {
    right: 106px;
    bottom: 20px;
    text-align: right;
  }
  #sec4 .set2 .row .sl-fade .slick-dots li {
    width: 22px;
    height: 22px;
  }
  #sec4 .set2 .row .content {
    width: 513px;
    box-sizing: border-box;
    padding: 50px 44px 54px;
    margin-left: -87px;
  }
}

/*--------------------------------------
    bnr
--------------------------------------*/
#banner {
  padding-bottom: 58vw;
}
#banner h2 {
  font-size: 6.77vw;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: -2vw;
  position: relative;
  z-index: 2;
  color: #252525;
}
@media screen and (min-width: 768px) {
  #banner {
    padding-bottom: 296px;
    display: block;
  }
  #banner h2 {
    font-size: 80px;
    letter-spacing: -0.12em;
    transform: scaleX(0.7);
    margin: 0 -200px -25px;
    position: relative;
  }
  #banner .row .bnr {
    width: 50%;
  }
  #banner .row .bnr a {
    display: block;
    width: 100%;
  }
  #banner .row .bnr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/*--------------------------------------
  footer
--------------------------------------*/
@media screen and (min-width: 768px) {
  footer {
    padding-top: 4px;
  }
  footer::before {
    background: url('../img/about/footer_deco.png') no-repeat center;
    height: 225px;
    background-size: auto 100%;
  }
}
@media screen and (min-width: 1501px) {
  footer::before {
    background-size: 100% 100%;
  }
}
/*# sourceMappingURL=about.css.map */