/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl {
  margin: 0;
  color: #231815;
}

a {
  text-decoration: none;
}

ul,
ol {
  padding-left: 0;
  list-style-type: none;
}

dd {
  margin-left: 0;
}

p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.865;
  letter-spacing: 0.07em;
}
@media screen and (min-width: 768px) {
  p {
    font-size: 17px;
    line-height: 2;
    letter-spacing: 0.06em;
  }
} 

button {
  border: 0;
}

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

@media screen and (min-width: 768px) {
  .pc-none {
    display: none !important;
  }
}

.hidden {
  display: none !important;
}

.relative {
  position: relative;
}

.serif {
  font-family: "Noto Serif JP", serif;
}

.image {
  display: block;
  width: 100%;
}

.wrapper {
  position: relative;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 976px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 465px;
  padding: 0 20px;
  background: url(../img/mv-bg-sp.jpg) center no-repeat;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .header {
    background-image: url(../img/mv-bg.jpg);
  }
}

.header-logo {
  position: absolute;
  top: 12px;
  left: 14px;
  display: block;
  width: 229px;
  transition: opacity 0.3s;
}
@media screen and (min-width: 768px) {
  .header-logo {
    top: 23px;
    left: 38px;
    width: 277px;
  }

  .header-logo:hover {
    opacity: 0.8;
  }
}

.page-title__main {
  display: block;
  width: 212px;
}
@media screen and (min-width: 768px) {
  .page-title__main {
    width: 274px;
    margin-left: auto;
    margin-right: auto;
  }
}

.page-title__sub {
  margin-top: 0.4em;
  color: #fff;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.93;
  letter-spacing: 0.11em;
}
@media screen and (min-width: 768px) {
  .page-title__sub {
    margin-top: 0.1em;
    font-size: 35px;
    text-align: center;
  }
}

.main {
  position: relative;
  margin-top: -58px;
}
@media screen and (min-width: 768px) {
  .main {
    margin-top: -123px;
  }
}

.main-image-container {
  max-width: 1020px;
  padding-left: 10px;
  padding-right: 10px;
}

.main-image {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
}
@media screen and (min-width: 768px) {
  .main-image {
    margin-bottom: 48px;
  }
}

.main-image-item {
  width: 32.6667%;
}


.navi-container {
  max-width: 1040px;
  padding-left: 20px;
  padding-right: 20px;
}

.navi-list {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .navi-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 74px;
  }
}

.navi-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  border: 1px solid #f08300;
  background-color: #fff;
  color: #f08300;
  font-size: 16px;
  letter-spacing: 0.11em;
  text-align: center;
  transition: background-color, color 0.3s;
}
@media screen and (min-width: 768px) {
  .navi-item {
    width: 19%;
    height: 96px;
    padding-bottom: 10px;
    font-size: 17px;
  }

  .navi-item:hover {
    background-color: #f08300;
    color: #fff;
  }
}

@media screen and (max-width: 767px) {
  .navi-item:not(:first-child) {
    margin-top: 9px;
  }
}

.navi-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(45deg);
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1px solid #231815;
  border-bottom: 1px solid #231815;
  transition: border-color 0.3s;
}
@media screen and (min-width: 768px) {
  .navi-item::after {
    top: auto;
    right: auto;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 9px;
    height: 9px;
  }

  .navi-item:hover::after {
    border-color: #fff;
  }
}

.lead-container {
  max-width: 550px;
  margin-bottom: 60px;
}
@media screen and (min-width: 768px) {
  .lead-container {
    margin-bottom: 86px;
  }
}

.lead-main {
  margin-bottom: 6px;
  color: #f08300;
  font-size: 19px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 768px) {
  .lead-main {
    margin-bottom: 10px;
    font-size: 29px;
  }
}

.headline {
  margin-left: auto;
  margin-right: auto;
  font-size: 24px;
  font-weight: 400;
  line-height: 2.125;
  letter-spacing: 0.11em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .headline {
    font-size: 29px;
  }
}

.headline span {
  border-bottom: 1px solid #231815;
}

.about {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .about {
    margin-bottom: 120px;
  }
}

.about-description {
  margin-top: 28px;
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
  .about-description {
    margin-top: 30px;
    margin-bottom: 16px;
  }
}

.about-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
@media screen and (min-width: 768px) {
  .about-list {
    margin-bottom: 12px;
  }
}

.about-item {
  width: 49.13%;
}

.about-item-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  background-color: #231815;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .about-item-caption {
    height: 35px;
    font-size: 17px;
  }
}

.about-note {
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .about-note {
    font-size: 13px;
  }
}

.development {
  margin-bottom: 70px;
}
@media screen and (min-width: 768px) {
  .development {
    margin-bottom: 140px;
  }
}

.development-flex {
  margin-top: 26px;
}
@media screen and (min-width: 768px) {
  .development-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 48px;
  }
}

.development-flex__left {
  margin-bottom: 14px;
}
@media screen and (min-width: 768px) {
  .development-flex__left {
    width: 60%;
    margin-bottom: 0;
  }
}

.development-flex__right {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .development-flex__right {
    width: 33.73%;
    margin-left: 0;
    margin-right: 0;
  }
}

.development-image {
  display: block;
  width: 100%;
  image-rendering: -webkit-optimize-contrast;
}

.development-caption {
  margin-top: 14px;
  font-size: 11px;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .development-caption {
    margin-top: 10px;
    font-size: 13px;
  }
}

.feature {
  margin-bottom: 64px;
}
@media screen and (min-width: 768px) {
  .feature {
    margin-bottom: 100px;
  }
}

.feature-list {
  margin-top: 50px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .feature-list {
    margin-top: 86px;
  }
}

.featrure-item {
  margin-top: 46px;
  margin-left: 30px;
}
@media screen and (min-width: 768px) {
  .featrure-item {
    display: flex;
    max-width: 1160px;
    margin-top: 100px;
  }
}
@media screen and (min-width: 1205px) {
  .featrure-item {
    margin-left: auto;
  }
}

.featrure-item:nth-child(even) {
  margin-left: 0;
  margin-right: 30px;
}
@media screen and (min-width: 768px) {
  .featrure-item:nth-child(even) {
    flex-direction: row-reverse;
    max-width: 1160px;
    margin-top: 52px;
  }
}
@media screen and (min-width: 1205px) {
  .featrure-item:nth-child(even) {
    align-items: flex-end;
    margin-right: auto;
  }
}

@media screen and (min-width: 1205px) {
  .featrure-item.shorten-xl {
    margin-top: -38px;
  }
}

@media screen and (min-width: 768px) {
  .featrure-item-information {
    width: 50.2%;
  }

  .featrure-item-information--pc-pb {
    padding-bottom: 12px;
  }
}

@media screen and (min-width: 768px) {
  .featrure-item-image-wrapper {
    width: 49.8%;
  }
}

.featrure-item-title {
  padding-bottom: 12px;
  padding-right: 30px;
  border-bottom: 1px solid #231815;
  margin-bottom: 0.6em;
  color: #f08300;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.11em;
}
@media screen and (min-width: 768px) {
  .featrure-item-title {
    padding-bottom: 18px;
    padding-right: 10.3%;
    font-size: 24px;
  }
}

.featrure-item:nth-child(even) .featrure-item-title {
  padding-left: 30px;
  padding-right: 0;
}
@media screen and (min-width: 768px) {
  .featrure-item:nth-child(even) .featrure-item-title {
    padding-left: 10.3%;
  }
}

.featrure-item-description {
  margin-bottom: 10px;
  margin-right: 30px;
}
@media screen and (min-width: 768px) {
  .featrure-item-description {
    margin-bottom: 0;
    margin-right: 10.3%;
  }
}

.featrure-item:nth-child(even) .featrure-item-description {
  margin-left: 30px;
  margin-right: 0;
}
@media screen and (min-width: 768px) {
  .featrure-item:nth-child(even) .featrure-item-description {
    margin-left: 10.3%;
  }
}

.co {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .co {
    margin-bottom: 90px;
  }
}

.co-box {
  position: relative;
  margin-top: 28px;
  border: 1px solid #cbccc9;
  background-color: #fff;
  padding: 20px 20px 52px;
}
@media screen and (min-width: 768px) {
  .co-box {
    margin-top: 48px;
    padding: 46px 7.2% 60px;
  }
}

.co-box:first-of-type {
  margin-top: 44px;
}
@media screen and (min-width: 768px) {
  .co-box:first-of-type {
    margin-top: 42px;
  }
}

.co-grid {
  display: grid;
  grid-template-columns: 122px auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "image title"
    "description description";
  gap: 14px;
  padding-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .co-grid {
    grid-template-columns: 192px auto;
    grid-template-areas:
      "image title"
      "image description";
    gap: 24px 42px;
    padding-bottom: 40px;
  }
}

.co-image {
  grid-area: image;
}

.co-profile {
  grid-area: title;
  align-self: center;
}
@media screen and (min-width: 768px) {
  .co-profile {
    align-self: auto;
  }
}

.co-profile__position {
  margin-bottom: 0.6em;
  font-size: 12px;
  line-height: 1.61;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
  .co-profile__position {
    font-size: 18px;
  }
}

.co-profile__name {
  font-size: 18px;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .co-profile__name {
    font-size: 26px;
  }
}

.co-career {
  grid-area: description;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.65;
}
@media screen and (min-width: 768px) {
  .co-career {
    font-size: 13px;
  }
}

.co-career--list {
  display: flex;
  flex-wrap: wrap;
}

.co-career__term {
  width: 48px;
}
@media screen and (min-width: 768px) {
  .co-career__term {
    width: 60px;
  }
}

.co-career__data {
  width: calc(100% - 48px);
}
@media screen and (min-width: 768px) {
  .co-career__data {
    width: calc(100% - 60px);
  }
}

.co-more {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 52px;
  background-color: #f39b33;
  border-radius: 5px;
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .co-more {
    display: none;
  }
}

.co-more::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 21px;
  display: block;
  width: 9px;
  height: 9px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg) skew(-4deg, -4deg);
}

.co-comment {
  display: none;
  border-top: 1px solid #cbccc9;
  padding-top: 24px;
}
@media screen and (min-width: 768px) {
  .co-comment {
    display: block;
    border-color: #231815;
    padding-top: 32px;
  }
}

.co-comment__headline {
  margin-bottom: 0.4em;
  color: #f08300;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.72;
}
@media screen and (min-width: 768px) {
  .co-comment__headline {
    font-size: 25px;
  }
}

.co-comment__body {
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .co-comment__body {
    margin-bottom: 36px;
  }
}

.comment__bordered {
  border-top: 1px solid #cbccc9;
  padding-top: 24px;
}
@media screen and (min-width: 768px) {
  .comment__bordered {
    padding-top: 32px;
    border-color: #231815;
  }
}

.co-close {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 66px;
  padding: 0 0 6px;
  background-color: #f39b33;
  border-radius: 100px;
  color: #fff;
  font-size: 15px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .co-close {
    display: none;
  }
}

.co-close::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  display: block;
  width: 9px;
  height: 9px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translate(-50%, -50%) rotate(225deg) skew(-4deg, -4deg);
}

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

  .is-open .co-more {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .co-more {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .co-box.is-open {
    margin-bottom: 50px;
  }
}

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

  .is-open .co-comment {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .co-comment {
    display: block;
  }
}

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

  .is-open .co-close {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .co-close {
    display: none;
  }
}

.case {
  padding-top: 40px;
  padding-bottom: 30px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .case {
    padding-top: 70px;
    padding-bottom: 54px;
  }
}

.case::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f8b858;
  mix-blend-mode: multiply;
  transform: translate3d(0,0,0); /* Safariでmix-blend-modeが効かないバグ対策 */
}

.case-box {
  margin-top: 29px;
  border: 1px solid #cbccc9;
  padding: 19px 20px;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .case-box {
    margin-top: 37px;
    padding: 45px 4.94%;
  }
}

.case-box:first-of-type {
  margin-top: 41px;
}
@media screen and (min-width: 768px) {
  .case-box:first-of-type {
    margin-top: 70px;
  }
}

@media screen and (min-width: 768px) {
  .case-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.case-image {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}
@media screen and (min-width: 768px) {
  .case-image {
    width: 39.25%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .case-content {
    width: 55.7%;
  }
}

.case-subname {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .case-subname {
    font-size: 17px;
  }
}

.case-name {
  margin-bottom: 0.4em;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.45;
}
@media screen and (min-width: 768px) {
  .case-name {
    margin-bottom: 0.6em;
    font-size: 29px;
  }
}

.case-mid-headline {
  margin-top: 48px;
  margin-bottom: 38px;
}
@media screen and (min-width: 768px) {
  .case-mid-headline {
    margin-top: 70px;
    margin-bottom: 60px;
  }
}

.case-commerce {
  margin-top: 30px;
  border-top: 1px solid #999;
  padding-top: 24px;
}
@media screen and (min-width: 768px) {
  .case-commerce {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    padding-top: 30px;
  }
}

.case-commerce__text {
  margin-bottom: 16px;
  line-height: 1.3;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .case-commerce__text {
    margin-bottom: 0;
    margin-right: 25px;
  }
}

@media screen and (min-width: 900px) {
  .case-commerce__text br {
    display: none;
  }
}

.case-commerce__link {
  display: block;
  width: 100%;
  max-width: 292px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.2s;
}
@media screen and (min-width: 768px) {
  .case-commerce__link {
    margin-left: 0;
    margin-right: 0;
  }

  .case-commerce__link:hover {
    opacity: 0.8;
  }
}

.case-note {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.11em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .case-note {
    margin-top: 50px;
    font-size: 23px;
    line-height: 2.06;
    letter-spacing: 0.13em;
  }
}

.contact {
  padding-top: 36px;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .contact {
    padding-top: 60px;
    padding-bottom: 10px;
  }
}

.contact-container {
  max-width: 984px;
}

.contact-headline {
  position: relative;
  margin-bottom: 10px;
  color: #595757;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contact-headline {
    margin-bottom: 32px;
    font-size: 28px;
  }
}

.contact-headline::before,
.contact-headline::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  width: calc(50% - 70px);
  height: 1px;
  background-color: #595757;
}
@media screen and (min-width: 768px) {
  .contact-headline::before,
  .contact-headline::after {
    width: calc(50% - 126px);
  }
}

.contact-headline::before {
  left: 0;
}

.contact-headline::after {
  right: 0;
}

.contact-description {
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.11em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contact-description {
    margin-bottom: 40px;
    font-size: 20px;
  }
}

.contact-button-wrapper {
  width: 256px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .contact-button-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}

.contact-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  background-color: #6fba2c;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 50px;
}
@media screen and (min-width: 768px) {
  .contact-button {
    width: 48.6%;
    height: 80px;
    font-size: 22px;
  }
}

@media screen and (max-width: 767px) {
  .contact-button:not(:first-child) {
    margin-top: 11px;
  }
}

.contact-button__tel {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-button__tel-img {
  width: 30px;
}
@media screen and (min-width: 768px) {
  .contact-button__tel-img {
    width: 50px;
  }
}

.contact-button__tel-text {
  font-family: "futura-pt", "Noto Sans JP", sans-serif;
  color: #fff;
  font-size: 22px;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .contact-button__tel-text {
    font-size: 38px;
  }
}

.contact-button__tel-sub {
  color: #fff;
  font-size: 11px;
  vertical-align: 0.2em;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .contact-button__tel-sub {
    font-size: 20px;
    vertical-align: baseline;
  }
}

.contact-button--mail {
  padding-right: 3%;
  background-color: #0075c2;
  transition: opacity 0.3s;
}
@media screen and (min-width: 768px) {
  .contact-button--mail {
    font-size: 2.24vw;
  }
}
@media screen and (min-width: 984px) {
  .contact-button--mail {
    font-size: 22px;
  }
}

@media screen and (min-width: 768px) {
  .contact-button--mail:hover {
    opacity: 0.8;
  }
}

.contact-button--mail::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  display: block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #fff;
}
@media screen and (min-width: 768px) {
  .contact-button--mail::after {
    right: 31px;
    border-width: 7px 0 7px 12px;
  }
}

.contact-button__mail {
  width: 22px;
  margin-right: 5.9%;
}
@media screen and (min-width: 768px) {
  .contact-button__mail {
    width: 9%;
  }
}

.fadein {
  opacity: 0;
  transition: 1s ease;
  transform: translate(0, 30px);
}

.fadein.show {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein--left {
  transform: translate(30px, 0);
}

.fadein--right {
  transform: translate(-30px, 0);
}