.end {
  font-family: 'Press Start 2P', cursive; }



/* ==========================================================================
	animations
========================================================================== */
/* ==========================================================================
	h_mv
========================================================================== */
body{
  background: #f0f0f0;
}
#h_mv.v2 {
  position: relative;
  margin-bottom: 85px; }
  #h_mv.v2 .tit_area {
    /*
    padding-left: 5.28vw;
    padding-right: 5.714vw;
    */
    padding-left: 5vw;
    padding-right: 3.714vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    #h_mv.v2 .tit_area .inr {
      position: relative;
      z-index: 30;
      padding: 2vw 0; }
    #h_mv.v2 .tit_area .tit {
      width: auto;
      font-size: 54px;
      font-size: clamp(54px, 3.8571428571vw, 69.12px);
      line-height: 1.042;
      margin-bottom: 60px;
      text-align: center; }
    #h_mv.v2 .tit_area .pan {
      text-align: center; }
  #h_mv.v2 .mv_illust {
    position: absolute;
    width: 236px;
    left: 8.964vw;
    bottom: 12px;
    z-index: 100; }
    #h_mv.v2 .mv_illust .hv_txt {
      width: 77px;
      height: 77px;
      top: -85px;
      right: 126px; }
      #h_mv.v2 .mv_illust .hv_txt.txt02 {
        right: 39px;
        top: -48px;
        -webkit-transition-delay: .9s;
                transition-delay: .9s; }
      #h_mv.v2 .mv_illust .hv_txt.txt03 {
        right: -50px;
        -webkit-transition-delay: 1.1s;
                transition-delay: 1.1s; }
      #h_mv.v2 .mv_illust .hv_txt:before {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        left: 29px; }
  #h_mv.v2 .image_area {
    right: 0;
    width: 71.5%; }

@media screen and (max-width: 1100px) {
  #h_mv .mv_illust {
    left: calc(50% - 400px); } }
@media screen and (max-width: 800px) {
  #h_mv.v2 {
    height: auto;
    padding-bottom: 0;
    margin-bottom: 137px; }
    #h_mv.v2:before {
      height: calc(100% - 311px); }
    #h_mv.v2 .tit_area {
      padding: 50px 9.3vw 75px 8.8vw; }
      #h_mv.v2 .tit_area .tit {
        width: auto;
        font-size: 28px;
        font-size: clamp(28px, 7.4666666667vw, 35.84px);
        margin-bottom: 30px;
        text-align: left; }
      #h_mv.v2 .tit_area .pan {
        text-align: left; }
    #h_mv.v2 .image_area {
      right: 0;
      width: 93.33%; }
    #h_mv.v2 .mv_illust {
      width: 163px;
      left: 0;
      bottom: -24px;
      z-index: 100;
      right: 0;
      margin: auto;
      -webkit-transform: translateX(-36px);
              transform: translateX(-36px); }
      #h_mv.v2 .mv_illust .hv_txt {
        width: 55px;
        height: 55px;
        top: -60px;
        right: 87px; }
        #h_mv.v2 .mv_illust .hv_txt.txt02 {
          right: 26px;
          top: -33px; }
        #h_mv.v2 .mv_illust .hv_txt.txt03 {
          right: -34px; }
        #h_mv.v2 .mv_illust .hv_txt:before {
          left: 19px; } }
/* ==========================================================================
	intro_txt
========================================================================== */
.intro_txt {
  width: 73.5%;
  width: clamp(735.7142857143px, 73.5714285714vw, 1412.5714285714px);
  margin: 0 auto 92px;
  font-size: 16px;
  font-size: clamp(16px, 1.1428571429vw, 20.48px);
  line-height: 2.5;
  font-weight: 600; }

@media screen and (max-width: 800px) {
  .intro_txt {
    width: 80%;
    margin: 0 auto 185px;
    font-size: 12px;
    font-size: clamp(12px, 1600vw, 15.36px);
    line-height: 2.33; } }
/* ==========================================================================
	qa_area
========================================================================== */
.qa_area {
  padding-bottom: 130px; }

.tits {
  position: relative;
  width: 73.57%;
  max-width: 1412px;
  margin: 106px auto 29px;
  z-index: 20; }
  .tits:first-child {
    margin-top: 0; }
  .tits .en {
    display: inline-block;
    font-size: 54px;
    font-weight: 700;
    vertical-align: middle;
    margin-right: 12px; }
  .tits .bg_txt {
    display: inline-block;
    padding: 10px 22px;
    background: var(--base-link-color);
    color: var(--base-text-color);
    font-size: 14px;
    font-weight: 700;
    border-radius: 18px; }
  .tits .illust {
    position: absolute;
    right: 7.14%;
    top: -5px;
    width: 110px; }
    .tits .illust .hv_txt {
      width: 90px;
      height: 90px;
      right: 55px;
      top: -83px; }
      .tits .illust .hv_txt:before {
        -webkit-transform: scale(-1, 1);
        transform: scale(-1, 1);
        left: 45px; }
  .tits .illust02 {
    right: 10.36%;
    width: 208px;
    top: -15px; }
    .tits .illust02 .hv_txt {
      right: 205px;
      top: -61px; }
  .tits .illust03 {
    right: 16.57%;
    top: -25px;
    width: 140px; }
    .tits .illust03 .hv_txt {
      right: -75px;
      top: -50px; }
      .tits .illust03 .hv_txt:before {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        left: 32px; }

.click_con {
  position: relative;
  width: 78.5%;
  max-width: 1507px;
  margin: 0 auto 5px;
  background: #fff;
  border-radius: 33px;
  -webkit-transition: background .4s ease;
  transition: background .4s ease; }
  .click_con .tit_area {
    position: relative;
    padding: 20px 65px 20px 90px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: padding .4s ease;
    transition: padding .4s ease;
    z-index: 20; }
    .click_con .tit_area .en {
      display: block;
      position: absolute;
      left: 35px;
      top: 18px;
      font-size: 30px;
      color: var(--base-link-color);
      font-weight: 700;
      -webkit-transition: all .4s ease;
      transition: all .4s ease; }
  .click_con h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--base-text-color); }
  .click_con .icon {
    display: block;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    -webkit-transition: background 0.4s cubic-bezier(0.61, 1, 0.88, 1), -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: background 0.4s cubic-bezier(0.61, 1, 0.88, 1), -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: transform 0.4s cubic-bezier(0.61, 1, 0.88, 1), background 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: transform 0.4s cubic-bezier(0.61, 1, 0.88, 1), background 0.4s cubic-bezier(0.61, 1, 0.88, 1), -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
    .click_con .icon:before {
      content: "";
      display: block;
      width: 8px;
      height: 1px;
      background: var(--base-text-color);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto; }
    .click_con .icon:after {
      content: "";
      display: block;
      width: 8px;
      height: 1px;
      background: var(--base-text-color);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
      -webkit-transition: all .4s ease;
      transition: all .4s ease; }
  .click_con .text_area {
    position: relative;
    padding: 0 65px 0 90px;
    opacity: 0;
    height: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease; }
    .click_con .text_area .en {
      display: block;
      position: absolute;
      left: 35px;
      top: 10px;
      font-size: 30px;
      color: var(--base-link-color);
      font-weight: 700; }
    .click_con .text_area p {
      color: #fff;
      font-size: 14px;
      line-height: 1.92;
      font-weight: 700; }
  .click_con:hover {
    background: var(--base-link-color); }
    .click_con:hover .tit_area .en {
      color: #fff; }
    .click_con:hover .icon {
      -webkit-transform: scale(1.16);
              transform: scale(1.16);
      -webkit-transition: background 0.4s cubic-bezier(0.61, 1, 0.88, 1), -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1);
      transition: background 0.4s cubic-bezier(0.61, 1, 0.88, 1), -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1);
      transition: transform 0.4s cubic-bezier(0.61, 1, 0.88, 1), background 0.4s cubic-bezier(0.61, 1, 0.88, 1);
      transition: transform 0.4s cubic-bezier(0.61, 1, 0.88, 1), background 0.4s cubic-bezier(0.61, 1, 0.88, 1), -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
  .click_con.active {
    background: var(--base-text-color);
    -webkit-transition: background .4s ease;
    transition: background .4s ease; }
    .click_con.active .icon:after {
      -webkit-transform: rotate(0);
              transform: rotate(0);
      -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1);
      transition: -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1);
      transition: transform 0.4s cubic-bezier(0.61, 1, 0.88, 1);
      transition: transform 0.4s cubic-bezier(0.61, 1, 0.88, 1), -webkit-transform 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
    .click_con.active .tit_area {
      padding-top: 40px;
      -webkit-transition: all .4s ease;
      transition: all .4s ease; }
      .click_con.active .tit_area .en {
        color: var(--base-link-color);
        top: 38px;
        -webkit-transition: all .4s ease;
        transition: all .4s ease; }
    .click_con.active h3 {
      color: #fff;
      -webkit-transition: all .4s ease;
      transition: all .4s ease; }
    .click_con.active .text_area {
      height: auto;
      opacity: 100;
      padding: 12px 65px 40px 90px;
      -webkit-transition: all .4s ease;
      transition: all .4s ease; }

@media screen and (max-width: 1100px) {
  .tits .en {
    display: block;
    margin: 0 0 10px; }

  .tits .illust02 {
    right: 0; } }
@media screen and (max-width: 800px) {
  .qa_area {
    padding-bottom: 60px; }

  .tits {
    position: relative;
    width: 100%;
    margin: 175px auto 30px;
    text-align: center; }
    .tits.spmt {
      margin-top: 200px; }
    .tits:first-child {
      margin-top: 0; }
    .tits .en {
      font-size: 36px;
      font-size: clamp(36px, 9.6vw, 46.08px);
      margin-right: 0; }
    .tits .bg_txt {
      display: inline-block;
      padding: 5px 15px;
      font-size: 12px;
      font-size: clamp(12px, 3.2vw, 15.36px); }
    .tits .illust {
      position: absolute;
      right: 0;
      left: 0;
      top: -87px;
      margin: auto;
      width: 74px;
      -webkit-transform: translateX(23px);
              transform: translateX(23px); }
      .tits .illust .hv_txt {
        width: 70px;
        height: 70px;
        right: 37px;
        top: -62px; }
        .tits .illust .hv_txt:before {
          left: 35px; }
    .tits .illust02 {
      right: 0;
      width: 140px;
      top: -90px;
      -webkit-transform: translateX(50px);
              transform: translateX(50px); }
      .tits .illust02 .hv_txt {
        right: 139px;
        top: -53px; }
    .tits .illust03 {
      right: 0;
      top: -109px;
      width: 95px;
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px); }
      .tits .illust03 .hv_txt {
        right: -55px;
        top: -40px; }
        .tits .illust03 .hv_txt:before {
          left: 25px; }

  .click_con {
    width: 89.34%;
    margin: 0 auto 4px;
    border-radius: 25px; }
    .click_con .tit_area {
      position: relative;
      padding: 20px 55px 20px 50px; }
      .click_con .tit_area .en {
        left: 19px;
        top: 18px;
        font-size: 23px; }
    .click_con h3 {
      font-size: 13px;
      font-size: clamp(13px, 3.4666666667vw, 16.64px); }
    .click_con .icon {
      right: 12px;
      width: 20px;
      height: 20px; }
      .click_con .icon:before {
        width: 7px; }
      .click_con .icon:after {
        width: 7px; }
    .click_con .text_area {
      padding: 0 55px 0 50px; }
      .click_con .text_area .en {
        left: 19px;
        top: -2px;
        font-size: 23px; }
      .click_con .text_area p {
        font-size: 10px;
        font-size: clamp(10px, 2.6666666667vw, 12.8px); }
    .click_con.active .tit_area {
      padding-top: 25px; }
      .click_con.active .tit_area .en {
        top: 25px; }
    .click_con.active .text_area {
      padding: 0 55px 20px 50px; } }
/* ==========================================================================
	foot_contact
========================================================================== */
.foot_contact:before {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#f0f0f0));
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #f0f0f0 100%); }

/*# sourceMappingURL=qa.css.map */