/*  **************************************************************************************************************************************************/
/*  contents  */
/*  **************************************************************************************************************************************************/
.nopc {
  display: none;
}

@media screen and (max-width: 767px) {
  .nopc {
    display: block;
  }
}

.nosp {
  display: block;
}

@media screen and (max-width: 767px) {
  .nosp {
    display: none;
  }
}

.main-head .main-head-ttl span {
  display    : inline-block;
  font-size  : inherit;
  font-weight: inherit;
}

.wrap .main-area .main-area-contents .main-head .main-head-icon {
  padding-left : 64px;
  padding-right: 32px;
}

@media screen and (max-width: 767px) {
  .wrap .main-area .main-area-contents .main-head .main-head-icon {
    padding-left : 20px;
    padding-right: 15px;
  }
}

.app_info .main-head-icon img {
  width: 38px;
}

.app_info .inner {
  background-color: #FFF;
}

.app_info .inner section {
  max-width: 100%;
  margin   : 0 auto;
}

.app_info img {
  max-width     : 100%;
  width         : auto;
  height        : auto;
  vertical-align: middle;
  pointer-events: none;
}

.app_info .sec01 .line {
  position: relative;
}

@media screen and (max-width: 767px) {
  .app_info .sec01 .line {
    margin-top: 32px;
    padding   : 0 20px;
  }
}

.app_info .sec01 .line a {
  display: block;
}

.app_info .sec01 .line a:hover {
  opacity: 0.7;
}

.app_info .sec01 .line-btn-area {
  position      : absolute;
  left          : 0;
  top           : 0;
  width         : 100%;
  height        : 100%;
  pointer-events: none;
}

.app_info .sec01 .line-btn-area .btn {
  pointer-events: all;
  display       : block;
  width         : 100%;
  height        : 100%;
  cursor        : pointer;
}

.app_info .sec01 .line-btn-area .btn>*:not(rect) {
  pointer-events: none;
}

.app_info .sec01 .line-btn-lg,
.app_info .sec01 .line-btn-sm {
  position      : absolute;
  clip          : rect(1px, 1px, 1px, 1px);
  pointer-events: none;
}

.app_info .sec01 .text {
  background-color: #231815;
  text-align      : center;
  padding         : 16px;
}

@media screen and (max-width: 767px) {
  .app_info .sec01 .text {
    padding: 32px 16px;
  }
}

.app_info .sec01 .text p {
  color         : #FFF;
  font-weight   : 500;
  font-size     : 24px;
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  .app_info .sec01 .text p {
    font-size: 18px;
  }
}

.app_info .sec01 .text p span {
  font-size     : 1em;
  font-weight   : bold;
  letter-spacing: 0;
}

#hq_main section.sec02 {
  overflow: inherit;
}

.app_info .sec02 {
  padding-top: 2em;
}

.app_info .sec02 .sec-block.ttl {
    position: relative;
    z-index: 2;
}

.app_info .sec02 .block-ttl {
    width: 100%;
    position: relative;
}

@media screen and (max-width: 767px) {
    .app_info .sec02 .block-ttl {
        margin-bottom: 8vw;
    }
}

.app_info .sec02 .img-add {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -10px;
}

.app_info .sec02 .flex-box {
  display  : flex;
  flex-wrap: wrap;
  gap      : 16px;
}

@media screen and (max-width: 767px) {
  .app_info .sec02 .grid-box {
    padding              : 16px 20px 0;
  }
    
    .app_info .sec02 .flex-box {
      gap      : 13vw;
    }
}

.app_info .sec02 .flex-box .box {
  width: calc(50% - 8px);
  position: relative;
}

@media screen and (max-width: 767px) {
  .app_info .sec02 .flex-box .box {
    width: 100%;
  }
}

.app_info .sec02 .flex-box .box .add {
  width: 107.8%;
  max-width: 107.8%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.app_info .sec02 .text {
  font-size: 18px;
  padding   : 1em 0;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .app_info .sec02 .text {
    font-size: 1em;
    text-align: left;
    max-width: 90%;
    margin: 0 auto;
    padding: 2em 0 1em;
  }
}

.app_info .sec02 .contact {
  width           : fit-content;
  margin          : 3em auto;
  padding         : 2em 3em 1.5em;
  position        : relative;
  background-color: #FFF;
  border          : 2px solid #231815;
  display         : flex;
  flex-direction  : column;
}

.app_info .sec02 .contact p {
  padding    : 0;
  margin     : 0;
  font-weight: 700;
}

.app_info .sec02 .contact p a {
  font-weight: 700;
}

.app_info .sec02 .contact .ttl {
  font-size       : 1.5em;
  width           : 90%;
  text-align      : center;
  position        : absolute;
  left            : 0;
  top             : 0;
  right           : 0;
  margin          : 0 auto;
  z-index         : 1;
  background-color: #FFF;
  transform       : translateY(-50%);
}

.app_info .sec02 .contact .tel {
  font-size : 1.7em;
  display   : block;
  text-align: center;
}

.app_info .sec02 .contact .tel span {
  font-size  : 1.2em;
  font-weight: 900;
}

.app_info .sec02 .contact .cap {
  font-size: 1.2em;
}

.app_info .sec02 .contact .cap span {
  font-size: 0.8em;
}

.app_info .sec02 .contact .mail {
  font-size: 1.2em;
}

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

  .app_info .sec02 .contact {
    width      : calc(100% - 40px);
    padding    : 2.5em 1em 1.5em;
    border     : 1px solid #231815;
    align-items: center;
  }

  .app_info .sec02 .contact .ttl {
    font-size: 1em;
    width    : 90%;
  }

  .app_info .sec02 .contact .tel {
    font-size: 1.2em;
  }

  .app_info .sec02 .contact .tel span {
    font-size: 1em;
  }

  .app_info .sec02 .contact .cap {
    font-size : 1em;
    text-align: center;
    padding   : 0.5em 0;
  }

  .app_info .sec02 .contact .cap span {
    display: block;
  }

  .app_info .sec02 .contact .mail {
    font-size: 1em;
  }
}

.screen-reader-text {
  position: absolute;
  clip    : rect(1px, 1px, 1px, 1px);
}