/* common */
:root{
  --color-blue: #0250A3;
  --color-subBlue: #14B3EB;
  --color-blueBg: #DCECF2;
  --color-yellow: #FFEE00;
  --color-orange: #E6A82E;
  --color-white: #FFFFFF;
  --color-black: #333333;
}
*{
  font-family: "Noto Sans JP", sans-serif, "Yu Gothic", "Arial", "Meiryo", sans-serif;
  color: var(--color-black);
  line-height: 1.5;
  font-weight: bold;
  font-optical-sizing: auto;
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
}
h2{
  font-size: 50px;
}
h3{
  font-size: 30px;
  color: var(--color-blueBg);
  text-align: center;
  background: var(--color-blue);
  width: 100%;
  padding: 10px;
  border-radius: 10px;
}
h3:first-child{
  margin-top: 30px;
}
a{
  text-decoration: none;
}
img{
  width: 100%;
}
.pc, header .contents-flex.sp{
  display: block;
}
.sp, .contact-btn.sp{display: none;}
#main{
  background: #C2EFFF;
  overflow: hidden;
}
.inner{
  margin: 0 100px;
  padding-bottom: 50px;
}
section:not(section.top){
  background: var(--color-white);
  padding: 50px;
  margin-bottom: 50px;
  box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
  border-radius: 10px;
}
section:last-child{margin-bottom: 0;}
.contents-flex{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
h3:not(:first-child), .contents-flex:not(header .contents-flex):not(footer .contents-flex):not(.section4>.contents-flex):not(.introduction_effect .contents-flex>.contents-flex):not(.introduction_effect .contents-flex:first-child):not(.section6 .contents-flex){
  margin-top: 50px;
}
.bg_yellow{
  background: var(--color-yellow);
  padding: 0 10px;
}
/* header */
header{
  background: var(--color-blue);
  color: var(--color-white);
  position: fixed;
  bottom: 0;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: -3px -3px 6px rgba(51, 51, 51, 0.16);
  z-index: 99;
  height: 212px;
}
header .contact{padding: 30px;}
header .contents-flex{
  justify-content: center;
  gap: 10px;
  border-radius: 30px;
  margin: 5px 0 10px;
}
header .contents-flex p{
  background: var(--color-blueBg);
  color: var(--color-blue);
  font-weight: bold;
  font-size: 30px;
  max-width: 157px;
  width: 100%;
  text-align: center;
}
.contact-btn {
  background: var(--color-orange);
  color: var(--color-black);
  font-size: 20px;
  border-radius: 30px;
  height: 50px;
  width: 300px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  text-indent: -1em;
  box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
  opacity: 1;
  transition: opacity 0.3s ease;
}
header .contact-btn::after{
  content: "";
  background-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/btn_arrow_black.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 20px;
  width: 13px;
  height: 23px;
}
.contact-btn:hover{
  opacity: 0.7;
}
span.line1, span.line2 {
  background: var(--color-blueBg);
  width: 1px;
  height: 15px;
  position: absolute;
  top: 5px;
  margin-top: 5px;
}
span.line1{
  transform: rotate(-45deg);
  left: 5px;
}
span.line2{
  transform: rotate(45deg);
  right: 10px;
}
.contact span:not(.line1):not(.line2){
  color: var(--color-blueBg);
  font-size: 20px;
  display: flex;
  justify-content: center;
}
/* section top */
section.top{
  background: inherit;
  box-shadow: none;
  height: 100vh;
}
section.top::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  background-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/top_img.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
}
section.top div{
  position: absolute;
  top: 50%;
  left: 100px;
  transform: translateY(-50%);
  padding-right: 100px;
}
section.top h1{
  font-size: 30px;
}
section.top .bg_yellow{
  font-size: 100px;
  margin: 15px 0;
  display: inline-block;
}
section .top_text{
  font-size: 50px;
}
section.top p.heading{
  font-size: 70px;
  text-align: center;
}

/* section1 導入効果 */
.section1{
  text-align: center;
  margin-bottom: 20% !important;
  padding-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.section1 h2{
  font-size: clamp(20px, 5vw, 50px);
}
.section1 h2>span.bg_yellow{
  font-size: clamp(35px, 7vw, 70px);
}
.yellow_arrow_bg{
  z-index: 0;
  position: absolute;
  width: calc(100% - 100px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1200px;
}
.yellow_arrow_bg>div:not(.yellow4){
  mask-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/top_arrow_bg.webp);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 100.16%;
  height: auto;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  aspect-ratio: 1633 / 406;
}
.yellow1{
  background: #FFF;
  z-index: 1;
  top: 19%;
}
.yellow2{
  background: #FFFBE6;
  z-index: 0;
  top: 27%;
}
.yellow3{
  background: #FFF4B5;
  z-index: -1;
  top: 35%;
}
.yellow4{
  background: #FFEC80;
  width: 100%;
  height: 700px;
  position: absolute;
  top: 37.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
}
.bg_orange {
  background: #FFEC80;
  padding: 0 50px;
}
.introduction_effect{
  background: var(--color-orange);
  border-radius: 10px;
  padding: 50px;
  max-width: 870px;
  margin: 0 auto;
}
.introduction_effect::before{
  content: "";
  position: absolute;
  top: -105px;
  left: -110px;
  width: 100%;
  height: 149px;
  background-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/line3_yellow.webp);
  background-size: contain;
  background-repeat: no-repeat;
}
.introduction_effect .contents-flex>.contents-flex{
  background: var(--color-white);
  border-radius: 10px;
  padding: 30px;
  max-width: 780px;
  width: 100%;
  max-height: 180px;
  white-space: nowrap;
  height: auto;
  justify-content: normal;
}
.introduction_effect img {
  max-width: 120px;
  width: 25%;
  margin-right: 20px;
}
.introduction_effect p{
  font-size: clamp(16px , 3vw, 50px);
}
span.checkmark{
  background: white;
  min-width: 50px;
  min-height: 50px;
  border-radius: 5px;
  margin-right: 20px;
}
span.checkmark::before{
  content: "";
  width: 100%;
  height: 33px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/check_orange.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
p.top_big_text{
  font-size: clamp(30px, 4vw, 50px);
  margin: 100px 0 400px;
}
p.top_big_text>.bg_yellow{
  font-size: clamp(30px, 4vw, 80px);
}
.contents-flex.hukidashi{
  gap: 50px;
}
.section1 .hukidashi p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  font-size: clamp(20px, 2vw, 30px);
  white-space: nowrap;
}
.section1 p.heading{
  font-size: 70px;
  margin-bottom: 50px;
}
.top_arrow_white{
  background-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/top_arrow_end2.webp);
  width: 100%;
  aspect-ratio: 500 / 91;

}
.top_arrow_yellow{
  background-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/top_arrow_end1.webp);
  width: calc(100% - 100px);
  aspect-ratio: 1200 / 109;
  background-size: cover;
}
.top_arrow_white,
.top_arrow_yellow{
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
}

/* section2 おもな機能 */
.section2 .contents-flex div,
.section5 .contents-flex div/*システム構成も同じCSS使用*/{
  width: 350px;
  height: 450px;
  padding: 0 20px;
  background: var(--color-blueBg);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.section2 img, .section5 img{
  width: 200px;
  height: auto;
}
.section2 .heading,
.section5 .heading/*システム構成も同じCSS使用*/{
  font-size: 30px;
  color: var(--color-blue);
  font-weight: bold;
  margin: 20px 0 5px;
}
.section2 p:not(.heading), .section2 span,
.section5 .contents-flex div>p:not(.heading),
.section5 span:not(.section5>p:first-of-type>span)/*システム構成も同じCSS使用*/{
  font-weight: normal;
  text-align: center;
  font-size: 22px;
  max-width: 300px;
  letter-spacing: -0.04em;
}

/* section3 機能一覧 */
.section3 p:not(p.heading){
  font-size: 18px;
  font-weight: normal;
  padding-left: 30px;
  letter-spacing: -0.06em;
}
.section3 .contents-flex{
  display: grid;
  grid-template-columns: repeat(auto-fit, 350px);
  gap: 50px;
  justify-content: space-between;
  align-items: normal;
}
.section3 .contents-flex:nth-child(6) {
  justify-content: normal;
}
.section3 .contents-flex:nth-of-type(2) img{
  width: 150px;
  height: auto;
  margin: 0 auto;
  display: flex;
}
.section3 img:not(.modal img){
  max-width: 350px;
  height: 165px;
  box-shadow: 0 3px 6px rgba(51, 51, 51, 0.16);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.section3 img:not(.modal img):hover{
  opacity: 0.7;
}
.section3 .heading {
  margin: 20px 0 5px 1em;
  font-size: 30px;
  color: var(--color-blue);
}
.section3 .heading::before {
  content: "";
  width: 25px;
  height: 25px;
  background: var(--color-subBlue);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
}
.section3 .contents-flex:nth-child(4) div:nth-child(2) .heading::before{
  transform: translateY(-35px);
}
.section3 .modal{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 100;
}
.section3 .modal.show{
  visibility: visible;
  pointer-events: auto;
}
body.modal_open,
header.modal_open {
  overflow: hidden;
  padding-right: var(--scrollbar-width);
  pointer-events: none;
}
.section3 .modal_bg{
  background-color: rgba(51, 51, 51, 0.7);
  overflow-y: scroll;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal_close_line1, .modal_close_line2{
  width: 50px;
  height: 2px;
  background: var(--color-white);
  position: fixed;
  top: 50px;
  right: 50px;
}
.modal_close_line1{
  transform: rotate(45deg);
}
.modal_close_line2{
  transform: rotate(-45deg);
}
.section3 .modal img{
  max-width: 1920px;
  min-width: 350px;
  width: 95%;
  height: auto;
  margin: 100px auto 50px;
  display: flex;
}
.section3 .modal img.limit_width{
  max-width: 620px;
}

/* section4 オプション機能 */
.section2 .contents-flex,
.section4 .contents-flex,
.section5 .contents-flex{
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}
.section4 .contents-flex{
  gap: 0 50px;
}
.section4 .contents-flex>.contents-flex {
  background: var(--color-blueBg);
  max-width: 350px;
  width: 100%;
  height: 90px;
  border-radius: 10px;
  justify-content: center;
}
.section4 .contents-flex>.contents-flex p{
  font-size: 20px;
  color: var(--color-blue);
}
.section4 .contents-flex>.contents-flex p:has(img){width: 3%;}
.section4 .contents-flex>.contents-flex:first-child img{width: 30px;}
.section4 .contents-flex>.contents-flex:nth-child(2) img{width: 35px;}
.section4 .contents-flex>.contents-flex:nth-child(3) img{width: 40px;}
.section4 .contents-flex>.contents-flex:nth-child(4) img{width: 50px;}
.section4>p:last-of-type,
.section5>p:first-of-type,
.section5>p:first-of-type>span{
  text-align: center;
  font-weight: bold;
  margin: 50px 0;
  font-size: clamp(20px, 3vw, 30px);
}
.section4 .contact-btn{
  margin: 0 auto;
  max-width: 700px;
  width: 100%;
  height: 100px;
  font-size: clamp(25px, 5vw, 40px);
  border-radius: 50px;
}
.section4 .contact-btn::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%) rotate(-45deg);
  width: 30px;
  height: 30px;
  border-right: 4px solid var(--color-black);
  border-bottom: 4px solid var(--color-black);
  border-radius: 2px;
}
/* section5 システム構成 */
.section5 p:first-child, .section5 p:first-child span{
  font-size: 30px;
  font-weight: bold;
}

/* section6 導入までの流れ */
.section6 .contents-flex{
  margin: 80px 0 30px;
}
.section6 .contents-flex div{
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 350px;
  min-width: 280px;
  width: 100%;
  text-align: center;
}
/* .section6 .contents-flex div:first-child{
  margin-right: 19px;
} */
/* .section6 .contents-flex div:last-child{
  margin-left: 11px;
} */
.section6 .contents-flex div>*{
  margin: 0 auto;
}
.section6 .contents-flex div .heading {
  font-size: 30px;
  color: var(--color-blue);
  height: 80px;
  align-items: center;
  justify-content: center;
  display: flex;
  white-space: nowrap;
  line-height: 1.2;
  margin-top: 10px;
}
span.line {
  width: 250px;
  height: 1px;
  background: var(--color-blue);
  margin: 10px auto !important;
  display: flex;
}
.section6 .contents-flex div p{
  width: 250px;
  min-height: 75px;
  letter-spacing: -0.04em;
  font-size: 18px;
}
/* .section6 .contents-flex div:nth-child(4) p:not(.heading){
  font-size: 16px;
  letter-spacing: -0.04em;
} */
.section6 .contents-flex div p:not(.heading){
  min-height: 150px;
  min-width: 210px;
  max-width: 250px;
  width: 100%;
}
.section6 .contents-flex>div>img:first-of-type {
  max-width: 350px;
  width: 100%;
  height: 390px;
  position: absolute;
  /* top: 50%;
  left: 50%;
  transform: translate(-52%, -50%); */
  transform: translate(-2%, 0%);
}
/* .section6 .contents-flex>div:first-child>img:first-of-type{
  transform: translate(-47.5%, -50%);
} */
/* .section6 .contents-flex>div:last-child>img:first-of-type{
  transform: translate(-55%, -50%);
} */
.section6 img.step_img{
  width: 100px;
}

/** footer **************/
footer{
  background: var(--color-blue);
  z-index: 98;
  min-height: 212px;
  display: flex;
}
footer .inner.contents-flex{
  gap: 50px;
  width: calc(100% - 500px);
  margin-left: 100px;
  padding-bottom: 0;
}
footer .contents-flex{
  margin: 0;
}
footer .logo img{
  width: 200px;
  margin-right: 30px;
}
footer p{
  color: var(--color-blueBg);
}
footer p:not(.heading){
  font-weight: normal;
}
footer a{
  color: var(--color-blueBg) !important;
  text-decoration: none !important;
}

@media screen and (max-width:1740px){
  .section3 .contents-flex:nth-child(6){
    justify-content: space-between;
  }
  .section6 .contents-flex{
    flex-direction: column;
    margin: 100px 0 0 0;
    gap: 50px;
  }
  .section6 .contents-flex div:first-child,
  .section6 .contents-flex div:nth-child(2){
    margin-bottom: 17px;
  }
  .section6 .contents-flex div:nth-child(4){
    margin-bottom: 7px;
  }
  .section6 .contents-flex div:last-child{
    margin-top: 17px;
  }
  .section6 img.pc{
    display: none;
  }
  .section6 img.sp{
    display: block;
  }
  .section6 .contents-flex>div img.sp{
    position: absolute;
    transform: translate(0%, -4%);
    height: auto;
  }
  .section6 .contents-flex>div:last-child img.sp{
    transform: translateY(-10%);
  }
  .section6 .contents-flex div p{
    width: 310px;
    font-size: 16px;
  }
  .section6 .contents-flex div .heading{
    height: 100%;
    min-height: 30px;
  }
  .section6 .contents-flex div p:not(.heading){
    min-height: 80px;
  }
  .section6 br.pc{display: none;}
}
@media screen and (max-width:1388px){
  /* footer */
  footer .inner.contents-flex{
    flex-direction: column;
    padding: 30px 20px;
    margin-left: 0;
    align-items: normal;
    gap: 30px;
    width: 100%;
  }
  footer .logo.contents-flex{
    justify-content: normal;
  }
}
@media screen and (max-width:1064px){
  .section3 .contents-flex{
    justify-content: center !important;
    gap: 80px;
  }
  .section3 .heading{margin-top: 5px;}

  /* header */
  header{
    top: 0;
    width: 100%;
    height: fit-content;
    border-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
  }
  header .contact{
    padding: 10px 20px;
  }
  header .contents-flex.sp {
    display: flex;
    margin-top: 10px;
  }
  header .contents-flex.sp>.contents-flex{
    width: 210px;
    margin: 0;
  }
  span.line1, span.line2{
    top: 6px;
  }
  span.line1{
    left: 50%;
    transform: translate(-8.25em, 0) rotate(-45deg);
  }
  span.line2{
    right: 50%;
    transform: translate(8em, 0) rotate(45deg);
  }
  header .contents-flex p, .section1 .hukidashi p{
    font-size: 20px;
  }
  .contact span:not(.line1):not(.line2), .contact-btn{
    font-size: 18px;
  }
  .contact-btn{
    height: 30px;
    width: 130px;
    text-align: center;
    padding: 1px 0 2px 10px;
  }
  header .contact-btn::after{
    right: 10px;
    width: 10px;
    height: 20px;
    top: 50%;
    transform: translateY(-42%);
  }
  .inner{
    margin: 0 10px 10px;
    padding-bottom: 0;
  }
  section:not(section.top){
    padding: 30px 10px;
    margin-bottom: 30px;
  }
  section:last-child {
    margin-bottom: 0 !important;
  }
  .bg_orange{
    padding: 10px 20px 50px;
  }
  /* 矢印関連 */
  .section1{
    margin-bottom: 15% !important;
  }
  .yellow_arrow_bg{
    width: calc(100% - 20px);
    top: 55%;
  }
    .top_arrow_white{
    background-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/top_arrow_end2_sp.webp);
    width: 100%;
    aspect-ratio: 50 / 11;
    background-size: contain;
  }
  .top_arrow_yellow{
    width: calc(100% - 20px);
  }
  /* common */
  .introduction_effect .contents-flex>.contents-flex{
    justify-content: center !important;
  }
  .pc{
    display: none;
  }
  .sp, .contact-btn.sp{
    display: block;
  }
  h2{
    font-size: 30px;
    text-align: center;
  }
  h3{font-size: 20px;}
  h3:not(:first-child) {margin-top: 100px;}
  .contents-flex:not(header .contents-flex):not(footer .contents-flex):not(.section4>.contents-flex):not(.introduction_effect .contents-flex>.contents-flex):not(.introduction_effect .contents-flex:first-child):not(.section6 .contents-flex):not(.hukidashi) {
    margin-top: 20px;
  }
  .section2 .contents-flex, .section4 .contents-flex, .section5 .contents-flex{
    gap: 10px;
  }
  .bg_yellow{padding: 0 5px;}
  /* section top 画像の調整 */
  section.top::before{
    width: 150%;
  }
  /* section1 導入効果 */
  .introduction_effect{
    padding: 30px 10px;
  }
  .introduction_effect::before{
    background-image: url(https://www.mediamagic.co.jp/wp-content/themes/mediamagic-theme-child/img/hks_lp/line3_yellow_sp.webp);
    top: -30px;
    left: -32px;
    width: 52px;
    height: 33px;
    transform: rotate(-15deg);
  }
  .introduction_effect img{max-width: 50px;}
  .introduction_effect img, span.checkmark{
    margin-right: 5px;
  }
  .section:not(section.top), section.top div{
    padding: 10px;
  }
  section.top{padding-bottom: 10px;}
  section.top div{
    top: 70%;
    left: 10px;
  }
  section .top_text, p.top_big_text>.bg_yellow{
    font-size: 27px;
  }
  section.top .bg_yellow{
    font-size: 50px;
    margin: 2px 0 5px;
  }
  section.top h1{
    font-size: 14px;
  }
  .section1 h2{
    white-space: nowrap;
  }
  p.top_big_text{
    font-size: 30px;
    margin: 0 0 100px;
  }
  .section1 p.heading{
    font-size: 50px;
  }
  span.checkmark{
    min-width: 30px;
    min-height: 30px;
  }
  span.checkmark::before{
    height: 16px;
  }
  .introduction_effect .contents-flex>.contents-flex{
    padding: 15px 10px;
  }
  .section1 p.heading{
    margin-bottom: 30px;
  }
  /* section3 */
  .section3 .contents-flex div{padding: 0 10px;}
  .modal_close_line1, .modal_close_line2{
    top: 30px;
    right: 10px;
  }
  .section3 .modal img{margin: 60px auto 25px;}
  /* section4 */
  .section4 .contents-flex>.contents-flex{justify-content: left;}
  .section4 .contents-flex>.contents-flex p:has(img){
    position: absolute;
    left: -60px;
  }
  .section4 .contents-flex p{margin-left: 95px;}
  .section4>p:last-of-type {
    margin: 25px 0;
  }
  /* footer */
  footer .inner.contents-flex{
    width: 100%;
    padding-bottom: 30px;
    margin-left: 0;
    gap: 30px;
  }
  footer .logo img {
    width: 100px;
    margin-right: 20px;
  }
  footer p{
    font-size: 14px;
  }
}
@media screen and (max-width:768px) {
  /* section1 導入効果 */
  .contents-flex.hukidashi{
    flex-direction: column;
    gap: 0;
    margin: 50px 0;
  }
  .contents-flex.hukidashi>div:nth-child(2){
    margin-left: 40%;
  }
  .contents-flex.hukidashi>div:not(:nth-child(2)){
    margin-right: 40%;
  }
  .contents-flex.hukidashi>div:last-child{
    transform: translateY(-40px);
  }
  .contents-flex.hukidashi div{
    width: 170px;
  }
  .section1 .hukidashi p{
    padding-top: 30%;
  }
  /* section1の背景矢印 調整 */
  .yellow_arrow_bg{
    top: 80%;
  }
  .top_arrow_yellow{width: calc(100% - 20px);}
  .yellow1{top: 17%;}
  .yellow2{top: 20%;}
  .yellow3{top: 23%;}
  .yellow4{
    top: 27%;
    height: 400px;
  }
  .section4 .contact-btn{
    height: 80px;
    max-width: 560px;
  }
  .section4 .contact-btn:after{
    right: 30px;
    width: 20px;
    height: 20px;
  }
}