@charset "UTF-8";
/*日本語*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap");
html {
  overflow-y: scroll; }

body {
  -webkit-text-size-adjust: none;
  color: #1a1a1a;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Noto Sans JP","メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", Osaka,sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.075em;
  word-break: normal;
  word-wrap: break-word;
  /*	overflow:hidden;*/ }

* {
  margin: 0;
  padding: 0;
  line-height: 1.1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

ul, li, dl, dt {
  list-style-type: none; }

img {
  vertical-align: middle;
  border: none; }

p, dt, dd, li {
  text-align: left;
  text-justify: inter-ideograph; }

.alignCenter {
  text-align: center; }

.backToTop {
  text-align: right;
  margin: 25px 20px 15px 0; }

img.fitImg {
  max-width: 100%;
  height: auto; }

br {
  line-height: 0; }

a, a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  outline: none; }

input[type="text"],
input[type="email"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.mb10{
	margin-bottom: 10px;
}
.mb20{
	margin-bottom: 20px;
}

/*
table{
	margin:0 auto;
	padding:0;
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
	color:#000;
}
*/
.inner1400 {
  width: 1400px;
  margin: 0 auto;
  position: relative; }
  @media screen and (max-width: 1400px) {
    .inner1400 {
      /*		overflow:hidden;*/
      width: 100%; } }

.inner1200 {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  /*	overflow:hidden;*/ }
  @media screen and (max-width: 1200px) {
    .inner1200 {
      width: 100%; } }

.inner {
  width: 940px;
  margin: 0 auto;
  position: relative;
  /*	overflow:hidden;*/ }
  @media screen and (max-width: 940px) {
    .inner {
      width: 100%; } }

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

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

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

.sp-br {
  display: none; }
  @media screen and (max-width: 767px) {
    .sp-br {
      display: block;
      line-height: 0; } }

/*
//	flex-wrap:wrap;
//	justify-content:space-between;
//	justify-content:space-around;
//	align-items: center;
//	align-content: center;
//	align-items: flex-start;
*/
/*日本語*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/NotoSansCJKjp-Regular-sub-j1.woff") format("woff"); }

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/NotoSansCJKjp-Medium-sub-j1.woff") format("woff"); }

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/NotoSansCJKjp-Bold-sub-j1.woff") format("woff"); }

/*-----------------------------------------------

共通

-------------------------------------------------*/
.contents-outer {
  width: 1200px;
  margin: 0 auto; }
  @media screen and (max-width: 1220px) {
    .contents-outer {
      width: 100%; } }
  @media screen and (max-width: 1200px) {
    .contents-outer {
      width: 96%; } }
  @media screen and (max-width: 767px) {
    .contents-outer {
      width: 89.33%;
      margin: 0 auto; } }

.contents-inner {
  width: 1000px;
  margin: 0 auto; }
  @media screen and (max-width: 1020px) {
    .contents-inner {
      width: 100%; } }
  @media screen and (max-width: 1000px) {
    .contents-inner {
      width: 96%; } }
  @media screen and (max-width: 767px) {
    .contents-inner {
      width: 89.33%;
      margin: 0 auto; } }

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

.sp-br {
  display: none; }
  @media screen and (max-width: 767px) {
    .sp-br {
      display: block;
      line-height: 0; } }

/*-----------------------------------------------

コンバージョンボタン

-------------------------------------------------*/
.btn-conversion {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 80px;
  border-radius: 4px;
  -webkit-box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  -webkit-transition: background ease .4s;
  -o-transition: background ease .4s;
  transition: background ease .4s; }
  @media screen and (max-width: 767px) {
    .btn-conversion {
      height: 16vw;
      font-size: 4.3vw; } }

.btn-conversion:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  right: 20px;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  -webkit-transition: background ease .4s;
  -o-transition: background ease .4s;
  transition: background ease .4s; }
  @media screen and (max-width: 767px) {
    .btn-conversion:before {
      right: 3.8vw;
      top: calc(50% - 2vw);
      width: 4vw;
      height: 4vw;
      -webkit-transition: none;
      -o-transition: none;
      transition: none; } }

.btn-conversion:after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 29px;
  width: 5px;
  height: 5px;
  -webkit-transform: rotate(45deg) translateY(-2px);
  -ms-transform: rotate(45deg) translateY(-2px);
  transform: rotate(45deg) translateY(-2px);
  -webkit-transform-origin: right 50% 0;
  -ms-transform-origin: right 50% 0;
  transform-origin: right 50% 0;
  -webkit-transition: border ease .4s;
  -o-transition: border ease .4s;
  transition: border ease .4s; }
  @media screen and (max-width: 767px) {
    .btn-conversion:after {
      right: 5.7vw;
      width: 1vw;
      height: 1vw; } }

.btn-conversion.orange {
  background: #ef684f; }

.btn-conversion.orange:hover {
  background: #ea2f0b; }
  @media screen and (max-width: 767px) {
    .btn-conversion.orange:hover {
      background: #ef684f; } }

@media screen and (max-width: 767px) {
  .btn-conversion.orange:hover:before {
    background: #fff; } }

.btn-conversion.orange:after {
  border-right: 3px solid #ef684f;
  border-top: 3px solid #ef684f; }
  @media screen and (max-width: 767px) {
    .btn-conversion.orange:after {
      border-right: 0.5vw solid #ef684f;
      border-top: 0.5vw solid #ef684f; } }

.btn-conversion.orange:hover:after {
  border-right: 3px solid #ea2f0b;
  border-top: 3px solid #ea2f0b; }
  @media screen and (max-width: 767px) {
    .btn-conversion.orange:hover:after {
      border-right: 0.5vw solid #ef684f;
      border-top: 0.5vw solid #ef684f; } }

.btn-conversion.blue {
  background: #4dadd0; }

.btn-conversion.blue:hover {
  background: #004b8b; }
  @media screen and (max-width: 767px) {
    .btn-conversion.blue:hover {
      background: #4dadd0; } }

.btn-conversion.blue:after {
  border-right: 3px solid #4dadd0;
  border-top: 3px solid #4dadd0; }
  @media screen and (max-width: 767px) {
    .btn-conversion.blue:after {
      border-right: 0.5vw solid #4dadd0;
      border-top: 0.5vw solid #4dadd0; } }

.btn-conversion.blue:hover:after {
  border-right: 3px solid #004b8b;
  border-top: 3px solid #004b8b; }
  @media screen and (max-width: 767px) {
    .btn-conversion.blue:hover:after {
      border-right: 0.5vw solid #4dadd0;
      border-top: 0.5vw solid #4dadd0; } }

.btn-conversion.extra {
  background: #3f9b82; }

.btn-conversion.extra:hover {
  background: #006f51; }
  @media screen and (max-width: 767px) {
    .btn-conversion.extra:hover {
      background: #3f9b82; } }

@media screen and (max-width: 767px) {
  .btn-conversion.extra:hover:before {
    background: #fff; } }

.btn-conversion.extra:after {
  border-right: 3px solid #3f9b82;
  border-top: 3px solid #3f9b82; }
  @media screen and (max-width: 767px) {
    .btn-conversion.extra:after {
      border-right: 0.5vw solid #3f9b82;
      border-top: 0.5vw solid #3f9b82; } }

.btn-conversion.extra:hover:after {
  border-right: 3px solid #indigo_hover;
  border-top: 3px solid #indigo_hover; }
  @media screen and (max-width: 767px) {
    .btn-conversion.extra:hover:after {
      border-right: 0.5vw solid #3f9b82;
      border-top: 0.5vw solid #3f9b82; } }

.btn-conversion small {
  display: block;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 500; }
  @media screen and (max-width: 767px) {
    .btn-conversion small {
      padding-top: 2vw;
      font-size: 2.5vw; } }

.single-conversion {
  width: 455px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .single-conversion {
      width: 100%; } }

.conversion-list {
  width: 930px;
  margin: 0 auto;
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media screen and (max-width: 767px) {
    .conversion-list {
      width: 90%;
      display: block;
      padding-top: 6vw; } }

.conversion-list-item {
  width: 455px; }
  @media screen and (max-width: 767px) {
    .conversion-list-item {
      width: 100%; } }

@media screen and (max-width: 767px) {
  .conversion-list-item + .conversion-list-item {
    padding-top: 5vw; } }

/*-----------------------------------------------

共通見出し

-------------------------------------------------*/
.page-headline {
  font-size: 30px;
  font-weight: 700;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .page-headline {
      font-size: 6vw;
      line-height: 1.5; } }

.page-headline span {
  display: block;
  padding-bottom: 15px;
  color: #6ea250;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 18px; }
  @media screen and (max-width: 767px) {
    .page-headline span {
      padding-bottom: 2vw;
      font-size: 3.6vw; } }

/*-----------------------------------------------

ヘッダ

-------------------------------------------------*/
.header {
  width: 100%;
  min-width: 1000px;
  height: 90px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .header {
      min-width: 0;
      height: 13.33vw; } }

.header-logo {
  width: 288px;
  text-align: right; }
  @media screen and (max-width: 767px) {
    .header-logo {
      text-align: left;
      width: 50%; } }

.header-logo img {
  width: 268px; }
  @media screen and (max-width: 767px) {
    .header-logo img {
      display: inline-block;
      margin-left: 3vw;
      width: 36vw; } }

.header-phone {
  width: 230px;
  height: 90px;
  background: #ecffca;
  padding-top: 10px; }
  @media screen and (max-width: 767px) {
    .header-phone {
      width: 34%;
      height: 13.33vw;
      padding-top: 1vw; } }

.header-phone-number {
  padding: 5px 0 5px 40px;
  background: url(../img/icon_freecall.png) no-repeat 20px center;
  background-size: 33px auto;
  font-size: 22px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0; }
  @media screen and (max-width: 767px) {
    .header-phone-number {
      padding: 1vw 0 1vw 6vw;
      background: url(../img/icon_freecall.png) no-repeat 2vw center;
      background-size: 4.5vw auto;
      font-size: 3.5vw; } }

.header-phone-number a {
  font-size: 22px;
  font-weight: 700; }
  @media screen and (max-width: 767px) {
    .header-phone-number a {
      font-size: 3.5vw;
      color: #1a1a1a; } }

.header-phone-annotation {
  letter-spacing: 0.075em;
  line-height: 1.3;
  text-align: center;
  font-size: 10px;
  font-weight: 500; }
  @media screen and (max-width: 767px) {
    .header-phone-annotation {
      font-size: 1.7vw; } }

/*-----------------------------------------------

MV

-------------------------------------------------*/
.mv {
  width: 100%;
  min-width: 1000px;
  height: 570px;
  padding-top: 105px;
  background: url(../img/mv_pc.jpg) no-repeat center top; }
  @media screen and (max-width: 767px) {
    .mv {
      min-width: 0;
      width: 100%;
      height: auto;
      padding-top: 50vw;
      padding-bottom: 2vw;
      background: url(../img/mv_sp.jpg) no-repeat center top;
      background-size: 100% auto; } }

.mv-info-box {
  margin-left: -100px; }
  @media screen and (max-width: 1220px) {
    .mv-info-box {
      margin-left: 0; } }
  @media screen and (max-width: 767px) {
    .mv-info-box {
      width: 100%; } }

.mv-headline {
  margin-left: 20px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4; }
  @media screen and (max-width: 767px) {
    .mv-headline {
      margin-left: 0;
      font-size: 7.3vw; } }

.mv-headline b {
  font-weight: 700;
  color: #6ea250; }

.mv-headline span {
  display: inline-block;
  position: relative; }

.mv-headline span:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 6px;
  background: #6ea250; }
  @media screen and (max-width: 767px) {
    .mv-headline span:after {
      bottom: -3vw;
      height: 4px; } }

.mv-lead {
  padding-top: 40px;
  margin-left: 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7; }
  @media screen and (max-width: 767px) {
    .mv-lead {
      padding-top: 5vw;
      margin-left: 0;
      font-size: 3.8vw; } }

.mv-conversion {
  padding-top: 30px;
  margin-left: 20px;
  width: 455px; }
  @media screen and (max-width: 767px) {
    .mv-conversion {
      padding-top: 8vw;
      margin-left: 0;
      width: 100%; } }

/*-----------------------------------------------

MV下リード

-------------------------------------------------*/
.main-lead {
  width: 100%;
  min-width: 1000px;
  padding: 50px 0; }
  @media screen and (max-width: 767px) {
    .main-lead {
      min-width: 0;
      padding: 8vw 0 10vw; } }

.main-lead-box {
  width: 800px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .main-lead-box {
      width: 100%; } }

.main-lead-text {
  line-height: 1.7; }
  @media screen and (max-width: 767px) {
    .main-lead-text {
      font-size: 3.5vw; } }

/*-----------------------------------------------

problems

-------------------------------------------------*/
.problems {
  width: 100%;
  min-width: 1000px;
  background: #f3f3f3;
  padding: 40px 0; }
  @media screen and (max-width: 767px) {
    .problems {
      min-width: 0;
      padding: 8vw 0; } }

.problems-list {
  width: 1000px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 40px; }
  @media screen and (max-width: 1000px) {
    .problems-list {
      width: 970px; } }
  @media screen and (max-width: 767px) {
    .problems-list {
      width: 90%;
      display: block;
      padding-top: 6vw; } }

.problems-item {
  width: 310px;
  background: #fff;
  padding: 26px 0;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1); }
  @media screen and (max-width: 767px) {
    .problems-item {
      width: 100%;
      padding: 5vw 0; } }

@media screen and (max-width: 767px) {
  .problems-item + .problems-item {
    margin-top: 5vw; } }

.problems-item-headline {
  font-size: 20px;
  font-weight: 700;
  color: #6ea250;
  text-align: center;
  line-height: 1.4; }
  @media screen and (max-width: 767px) {
    .problems-item-headline {
      font-size: 4.6vw; } }

.problems-image {
  padding-top: 15px;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .problems-image {
      padding-top: 3vw; } }

.problems-image img {
  height: 100px;
  width: auto; }
  @media screen and (max-width: 767px) {
    .problems-image img {
      height: 28vw; } }

.problems-text {
  padding: 15px 25px 0;
  font-size: 14px;
  line-height: 1.7; }
  @media screen and (max-width: 767px) {
    .problems-text {
      padding: 3vw 6vw 0;
      font-size: 3.6vw; } }

/*-----------------------------------------------

solutions

-------------------------------------------------*/
.solutions {
  width: 100%;
  min-width: 1000px;
  padding: 65px 0 20px;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 767px) {
    .solutions {
      min-width: 0;
      padding: 12vw 0 8vw; } }

.solutions:after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 30px);
  top: 0;
  border: 30px solid transparent;
  border-top: 35px solid #f3f3f3;
  width: 0;
  height: 0; }
  @media screen and (max-width: 767px) {
    .solutions:after {
      left: calc(50% - 7vw);
      border: 7vw solid transparent;
      border-top: 9vw solid #f3f3f3; } }

.solutions-info {
  width: 80%;
  margin: 0 auto;
  padding-top: 160px;
  background: url(../img/solutions-infoBG.png) no-repeat center 25px;
  background-size: 120px auto; }
  @media screen and (max-width: 767px) {
    .solutions-info {
      width: 100%;
      padding-top: 36vw;
      background: url(../img/solutions-infoBG.png) no-repeat center 5vw;
      background-size: 26vw auto; } }

.solutions-info-text {
  line-height: 1.7; }
  @media screen and (max-width: 767px) {
    .solutions-info-text {
      font-size: 3.5vw; } }

.solutions-info + .single-conversion {
  padding-top: 40px; }
  @media screen and (max-width: 767px) {
    .solutions-info + .single-conversion {
      padding-top: 6vw; } }

.about-box {
  width: 100%;
  min-width: 1000px;
  background: #e4f3db;
  padding: 70px 0;
  position: relatvie;
  z-index: 1;
  margin-top: 40px; }
  @media screen and (max-width: 767px) {
    .about-box {
      min-width: 0;
      width: 94%;
      margin: 0 auto;
      margin-top: 8vw;
      padding: 10vw 0; } }

.about-box:before,
.about-box:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  width: 20px;
  height: 100%;
  background: #fff; }
  @media screen and (max-width: 767px) {
    .about-box:before,
    .about-box:after {
      display: none; } }

.about-box:before {
  left: 0; }

.about-box:after {
  right: 0; }

.about-list {
  width: 1000px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media screen and (max-width: 767px) {
    .about-list {
      width: 90%;
      margin: 0 auto;
      display: block; } }

.about-item {
  width: 49%;
  padding: 35px;
  background: #fff; }
  @media screen and (max-width: 767px) {
    .about-item {
      width: 100%;
      padding: 6vw; } }

.about-item-headline {
  padding-bottom: 15px;
  border-bottom: 2px solid #6ea250;
  font-size: 22px;
  font-weight: 700; }
  @media screen and (max-width: 767px) {
    .about-item-headline {
      padding-bottom: 3vw;
      font-size: 4.1vw; } }

.about-item-text {
  padding-top: 15px;
  line-height: 1.7; }
  @media screen and (max-width: 767px) {
    .about-item-text {
      padding-top: 3vw;
      font-size: 3.6vw; } }

.about-item-subhead {
  padding-top: 15px;
  font-size: 18px;
  font-weight: 700; }
  @media screen and (max-width: 767px) {
    .about-item-subhead {
      padding-top: 3vw;
      font-size: 3.4vw; } }

.about-item-image {
  padding-top: 20px;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .about-item-image {
      padding-top: 4vw; } }

.about-item-image img {
  max-width: 100%; }

.about-item-annotation {
  padding-top: 10px;
  text-align: right;
  font-size: 12px; }
  @media screen and (max-width: 767px) {
    .about-item-annotation {
      padding-top: 2vw;
      font-size: 2.7vw; } }

/*-----------------------------------------------

service

-------------------------------------------------*/
.service {
  width: 100%;
  min-width: 1000px;
  padding: 40px 0 50px;
  background: #6ea250;
  /*
	@include media1200{
        min-width:0;
    }
*/ }
  @media screen and (max-width: 767px) {
    .service {
      min-width: 0;
      padding: 8vw 0 10vw; } }

.service .page-headline {
  color: #fff; }

.service .page-headline span {
  color: rgba(255, 255, 255, 0.5); }

.service .page-headline b {
  color: #fcff1d; }

.service-anchor-list {
  width: 1000px;
  padding-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media screen and (max-width: 1000px) {
    .service-anchor-list {
      width: 980px; } }
  @media screen and (max-width: 767px) {
    .service-anchor-list {
      width: 100%;
      padding-top: 6vw;
      display: block; } }

.service-anchor-item {
  width: 320px; }
  @media screen and (max-width: 767px) {
    .service-anchor-item {
      width: 100%; } }

@media screen and (max-width: 767px) {
  .service-anchor-item + .service-anchor-item {
    padding-top: 4vw; } }

.service-anchor-item a {
  background: #fff;
  display: block;
  width: 100%;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  padding: 25px 0 50px;
  -webkit-transition: background ease .4s;
  -o-transition: background ease .4s;
  transition: background ease .4s; }
  @media screen and (max-width: 767px) {
    .service-anchor-item a {
      padding: 4vw 0 12vw; } }

@media screen and (max-width: 767px) {
  .service-anchor-item:nth-of-type(2) a {
    padding-top: 7vw; } }

.service-anchor-item a:hover {
  background: rgba(255, 255, 255, 0.85); }

.service-anchor-item a:before {
  content: "01";
  display: block;
  position: absolute;
  z-index: 1;
  right: 15px;
  bottom: 0px;
  font-size: 80px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.1); }
  @media screen and (max-width: 767px) {
    .service-anchor-item a:before {
      right: 3vw;
      font-size: 20vw; } }

.service-anchor-item:nth-of-type(2) a:before {
  content: "02"; }

.service-anchor-item:nth-of-type(3) a:before {
  content: "03"; }

.service-anchor-headline {
  position: relative;
  color: #6ea250;
  font-size: 18px;
  font-weight: 700;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .service-anchor-headline {
      font-size: 4.8vw; } }

.service-anchor-headline small {
  font-size: 12px; }
  @media screen and (max-width: 767px) {
    .service-anchor-headline small {
      font-size: 3.4vw; } }

@media screen and (max-width: 767px) {
  .service-anchor-item:nth-of-type(2) .service-anchor-headline {
    font-size: 5.6vw; } }

.service-anchor-item:nth-of-type(2) .service-anchor-headline:after {
  content: "セキュアードモンスター";
  display: block;
  position: absolute;
  left: 0;
  bottom: 102%;
  width: 100%;
  text-align: center;
  font-size: 10px; }
  @media screen and (max-width: 767px) {
    .service-anchor-item:nth-of-type(2) .service-anchor-headline:after {
      font-size: 3vw; } }

.service-anchor-text {
  padding-top: 10px;
  position: relative;
  color: #1a1a1a;
  text-align: center;
  line-height: 1.4; }
  @media screen and (max-width: 767px) {
    .service-anchor-text {
      padding-top: 2vw;
      font-size: 3.6vw; } }

.service-anchor-text:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: calc(50% - 10px);
  bottom: -30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef684f;
  -webkit-transition: background ease .4s;
  -o-transition: background ease .4s;
  transition: background ease .4s; }
  @media screen and (max-width: 767px) {
    .service-anchor-text:before {
      left: calc(50% - 3vw);
      bottom: -9vw;
      width: 6vw;
      height: 6vw; } }

.service-anchor-text:after {
  content: "";
  position: absolute;
  z-index: 3;
  left: calc(50% - 6px);
  bottom: -27px;
  width: 5px;
  height: 5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(45deg) translateY(-2px);
  -ms-transform: rotate(45deg) translateY(-2px);
  transform: rotate(45deg) translateY(-2px);
  -webkit-transform-origin: right 50% 0;
  -ms-transform-origin: right 50% 0;
  transform-origin: right 50% 0;
  -webkit-transition: border ease .4s;
  -o-transition: border ease .4s;
  transition: border ease .4s; }
  @media screen and (max-width: 767px) {
    .service-anchor-text:after {
      left: calc(50% - 2.2vw);
      bottom: -8.5vw;
      width: 2vw;
      height: 2vw;
      border-right: 1vw solid #fff;
      border-bottom: 1vw solid #fff; } }

.service-anchor-lead {
  width: 80%;
  margin: 0 auto;
  padding-top: 40px;
  color: #fff;
  line-height: 1.7;
  letter-spacing: 0.06em; }
  @media screen and (max-width: 767px) {
    .service-anchor-lead {
      width: 100%;
      padding-top: 5vw;
      font-size: 3.6vw; } }

/*-----------------------------------------------

service01

-------------------------------------------------*/
.service01 {
  width: 100%;
  min-width: 1000px;
  padding: 60px 0; }
  @media screen and (max-width: 767px) {
    .service01 {
      min-width: 0;
      padding: 10vw 0; } }

.service-headline {
  padding-top: 25px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700; }
  @media screen and (max-width: 767px) {
    .service-headline {
      padding-top: 4vw;
      font-size: 3.6vw; } }

.service-headline span {
  display: inline-block;
  padding: 10px 20px;
  background: #6ea250;
  border-radius: 20px / 50%; }
  @media screen and (max-width: 767px) {
    .service-headline span {
      padding: 2vw 1.2em;
      border-radius: 3.8vw / 50%; } }

.service-lead,
.service-pickup {
  width: 66.66%;
  margin: 0 auto;
  line-height: 1.7; }
  @media screen and (max-width: 767px) {
    .service-lead,
    .service-pickup {
      width: 100%;
      font-size: 3.5vw; } }

.service-lead {
  padding-top: 40px; }
  @media screen and (max-width: 767px) {
    .service-lead {
      padding-top: 5vw; } }

.service-pickup {
  text-indent: -1em;
  padding-left: 1em; }

.service-illust-box {
  width: 100%;
  margin-top: 20px;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 767px) {
    .service-illust-box {
      width: 94%;
      margin: 0 auto;
      margin-top: 4vw; } }

.service01 .service-illust-box {
  padding: 30px 0; }
  @media screen and (max-width: 767px) {
    .service01 .service-illust-box {
      padding: 6vw 0;
      background: #f3f3f3; } }

.service01 .service-illust-box:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  left: calc(50% - 600px);
  top: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 1200px;
  height: 100%;
  background: #f3f3f3; }
  @media screen and (max-width: 1220px) {
    .service01 .service-illust-box:after {
      left: 0;
      width: 100%; } }
  @media screen and (max-width: 1020px) {
    .service01 .service-illust-box:after {
      width: 1000px; } }
  @media screen and (max-width: 767px) {
    .service01 .service-illust-box:after {
      display: none; } }

.service-illust-headline {
  text-align: center;
  font-size: 22px; }
  @media screen and (max-width: 767px) {
    .service-illust-headline {
      font-size: 4vw; } }

.service-illust-headline span {
  display: inline-block;
  position: relative;
  z-index: 1; }

.service-illust-headline span:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #1a1a1a; }
  @media screen and (max-width: 767px) {
    .service-illust-headline span:after {
      bottom: -2vw; } }

.service-illust-image {
  padding-top: 30px;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .service-illust-image {
      padding-top: 5vw; } }

.service01 .service-illust-image {
  width: 1000px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media screen and (max-width: 767px) {
    .service01 .service-illust-image {
      width: 94%;
      display: block; } }

.service-illust-left {
  width: 334px; }
  @media screen and (max-width: 767px) {
    .service-illust-left {
      width: 100%;
      padding-top: 4vw; } }

.service-illust-right {
  width: 648px; }
  @media screen and (max-width: 767px) {
    .service-illust-right {
      width: 100%;
      padding-top: 4vw; } }

@media screen and (max-width: 767px) {
  .service-illust-inner img {
    max-width: 100%; } }

.service-illust-subhead {
  padding-bottom: 10px;
  text-align: left; }
  @media screen and (max-width: 767px) {
    .service-illust-subhead {
      padding-bottom: 2vw;
      font-size: 3.4vw;
      letter-spacing: 0; } }

@media screen and (max-width: 767px) {
  .service-illust-right .service-illust-subhead {
    padding-top: 4vw; } }

@media screen and (max-width: 767px) {
  .service01 .conversion-list {
    width: 100%; } }

/*-----------------------------------------------

service02

-------------------------------------------------*/
.service02 {
  width: 100%;
  min-width: 1000px;
  padding: 60px 0;
  background: #e4f3db; }
  @media screen and (max-width: 767px) {
    .service02 {
      min-width: 0;
      padding: 8vw 0; } }

@media screen and (max-width: 767px) {
  .service02 .service-headline span {
    padding: 2vw 1.4em;
    border-radius: 5.2vw / 50%; } }

.service02 .service-illust-box {
  padding: 30px 0; }
  @media screen and (max-width: 767px) {
    .service02 .service-illust-box {
      padding: 6vw 0;
      background: #fff; } }

.service02 .service-illust-box:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  left: calc(50% - 600px);
  top: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 1200px;
  height: 100%;
  background: #fff; }
  @media screen and (max-width: 1220px) {
    .service02 .service-illust-box:after {
      left: 0;
      width: 100%; } }
  @media screen and (max-width: 1020px) {
    .service02 .service-illust-box:after {
      width: 1000px; } }
  @media screen and (max-width: 767px) {
    .service02 .service-illust-box:after {
      display: none; } }

@media screen and (max-width: 767px) {
  .service02 .service-illust-image img {
    padding-top: 2vw;
    max-width: 90%; } }

.service02 .single-conversion {
  padding-top: 50px; }
  @media screen and (max-width: 767px) {
    .service02 .single-conversion {
      padding-top: 6vw; } }

/*-----------------------------------------------

service03

-------------------------------------------------*/
.service03 {
  width: 100%;
  min-width: 1000px;
  padding: 60px 0; }
  @media screen and (max-width: 767px) {
    .service03 {
      min-width: 0;
      padding: 8vw 0; } }

@media screen and (max-width: 767px) {
  .service03 .service-headline span {
    padding: 2vw 1.4em;
    border-radius: 6vw / 50%;
    line-height: 1.3; } }

.service03 .service-illust-box {
  padding: 30px 0;
  margin-top: 30px; }
  @media screen and (max-width: 767px) {
    .service03 .service-illust-box {
      padding: 6vw 0;
      margin-top: 5vw;
      border: 5px solid #f3f3f3; } }

.service03 .service-illust-box:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  left: calc(50% - 600px);
  top: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 1200px;
  height: 100%;
  border: 8px solid #f3f3f3; }
  @media screen and (max-width: 1220px) {
    .service03 .service-illust-box:after {
      left: 0;
      width: 100%; } }
  @media screen and (max-width: 1020px) {
    .service03 .service-illust-box:after {
      width: 1000px; } }
  @media screen and (max-width: 767px) {
    .service03 .service-illust-box:after {
      display: none; } }

@media screen and (max-width: 767px) {
  .service03 .service-illust-image img {
    padding-top: 2vw;
    max-width: 90%; } }

@media screen and (max-width: 767px) {
  .service03 .conversion-list {
    width: 100%; } }

/*-----------------------------------------------

steps

-------------------------------------------------*/
.steps {
  width: 100%;
  min-width: 1000px;
  padding: 60px 0;
  background: #e4f3db; }
  @media screen and (max-width: 767px) {
    .steps {
      min-width: 0;
      padding: 10vw 0; } }

.step-list {
  width: 100%;
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media screen and (max-width: 1000px) {
    .step-list {
      width: 970px; } }
  @media screen and (max-width: 767px) {
    .step-list {
      width: 100%;
      padding-top: 8vw;
      display: block; } }

.step-item {
  width: 220px;
  margin-left: 40px;
  padding-bottom: 40px; }
  @media screen and (max-width: 1000px) {
    .step-item {
      margin-left: 30px; } }
  @media screen and (max-width: 767px) {
    .step-item {
      width: 90%;
      margin: 0 auto;
      padding-bottom: 12vw; } }

@media screen and (max-width: 767px) {
  .step-item:last-child {
    padding-bottom: 0; } }

.step-item:nth-of-type(4n+1) {
  margin-left: 0; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(4n+1) {
      width: 90%;
      margin: 0 auto; } }

.step-info-box {
  background: #fff;
  width: 100%;
  height: 155px;
  position: relative;
  z-index: 1;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1); }
  @media screen and (max-width: 767px) {
    .step-info-box {
      height: auto; } }

.step-info-box:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: -27px;
  top: calc(50% - 15px);
  border: 15px solid transparent;
  border-left: 17px solid #6ea250;
  width: 0;
  height: 0; }
  @media screen and (max-width: 767px) {
    .step-info-box:after {
      left: calc(50% - 6vw);
      top: -10vw;
      border: 6vw solid transparent;
      border-top: 5vw solid #6ea250; } }

.step-item:nth-of-type(4n+1) .step-info-box:after {
  display: none; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(4n+1) .step-info-box:after {
      display: block; } }

@media screen and (max-width: 767px) {
  .step-item:nth-of-type(1) .step-info-box:after {
    display: none; } }

.step-number {
  position: absolute;
  width: 100%;
  left: 0;
  top: -12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: #fff;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .step-number {
      top: -2.5vw;
      font-size: 3.3vw; } }

.step-number span {
  display: inline-block;
  background: #6ea250;
  padding: 4px 2em;
  border-radius: 15px / 50%; }
  @media screen and (max-width: 767px) {
    .step-number span {
      padding: 1vw 1em;
      border-radius: 3vw / 50%; } }

.step-text {
  padding-top: 110px;
  font-weight: 500;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .step-text {
      padding: 8vw 0 8vw 20vw;
      text-align: left;
      font-size: 3.6vw; } }

.step-item:nth-of-type(1) .step-text {
  background: url(../img/icon_step01.png) no-repeat center 22px;
  background-size: 81px auto; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(1) .step-text {
      background: url(../img/icon_step01.png) no-repeat 3vw center;
      background-size: 14vw auto; } }

.step-item:nth-of-type(2) .step-text {
  background: url(../img/icon_step02.png) no-repeat center 22px;
  background-size: 81px auto; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(2) .step-text {
      background: url(../img/icon_step02.png) no-repeat 3vw center;
      background-size: 14vw auto; } }

.step-item:nth-of-type(3) .step-text {
  background: url(../img/icon_step03.png) no-repeat center 22px;
  background-size: 81px auto; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(3) .step-text {
      background: url(../img/icon_step03.png) no-repeat 3vw center;
      background-size: 14vw auto; } }

.step-item:nth-of-type(4) .step-text {
  background: url(../img/icon_step04.png) no-repeat center 22px;
  background-size: 81px auto; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(4) .step-text {
      background: url(../img/icon_step04.png) no-repeat 3vw center;
      background-size: 14vw auto; } }

.step-item:nth-of-type(5) .step-text {
  background: url(../img/icon_step05.png) no-repeat center 22px;
  background-size: 81px auto; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(5) .step-text {
      background: url(../img/icon_step05.png) no-repeat 3vw center;
      background-size: 14vw auto; } }

.step-item:nth-of-type(6) .step-text {
  background: url(../img/icon_step06.png) no-repeat center 22px;
  background-size: 81px auto; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(6) .step-text {
      background: url(../img/icon_step06.png) no-repeat 3vw center;
      background-size: 14vw auto; } }

.step-item:nth-of-type(7) .step-text {
  background: url(../img/icon_step07.png) no-repeat center 22px;
  background-size: 81px auto; }
  @media screen and (max-width: 767px) {
    .step-item:nth-of-type(7) .step-text {
      background: url(../img/icon_step07.png) no-repeat 3vw center;
      background-size: 14vw auto; } }

.step-info-annotation {
  padding-top: 5px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .step-info-annotation {
      padding-top: 2vw;
      font-size: 2.8vw;
      text-align: left; } }

.step-annotation {
  text-align: center; }
  @media screen and (max-width: 767px) {
    .step-annotation {
      padding-top: 4vw;
      font-size: 3.4vw;
      line-height: 1.5; } }

.steps .single-conversion {
  padding-top: 40px; }
  @media screen and (max-width: 767px) {
    .steps .single-conversion {
      padding-top: 8vw; } }

/*-----------------------------------------------

voice

-------------------------------------------------*/
.voice {
  width: 100%;
  min-width: 1000px;
  padding: 60px 0; }
  @media screen and (max-width: 767px) {
    .voice {
      padding: 8vw 0;
      min-width: 0; } }

.voice-introduce {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 30px; }
  @media screen and (max-width: 767px) {
    .voice-introduce {
      padding-top: 6vw;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }

.voice-introduce-info {
  width: 50%;
  background: #f3f3f3;
  padding: 55px 40px 0; }
  @media screen and (max-width: 767px) {
    .voice-introduce-info {
      width: 100%;
      padding: 6vw 4vw;
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2; } }

.voice-introduce-headline {
  border-bottom: 2px solid #6ea250;
  padding-bottom: 25px;
  margin-bottom: 25px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5; }
  @media screen and (max-width: 767px) {
    .voice-introduce-headline {
      padding-bottom: 3vw;
      margin-bottom: 5vw;
      font-size: 3.6vw; } }

.voice-introduce-text {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.5; }
  @media screen and (max-width: 767px) {
    .voice-introduce-text {
      padding-left: 5em;
      text-indent: -2.5em;
      font-size: 3vw; } }

.voice-introduce-text + .voice-introduce-text {
  padding-top: 15px; }
  @media screen and (max-width: 767px) {
    .voice-introduce-text + .voice-introduce-text {
      padding-top: 1vw; } }

@media screen and (max-width: 767px) {
  .voice-introduce-text span {
    display: inline-block; } }

.voice-introduce-text a {
  color: #4394a8;
  text-decoration: underline; }
  @media screen and (max-width: 767px) {
    .voice-introduce-text a {
      font-size: 3.3vw; } }

.voice-introduce-image {
  width: 50%; }
  @media screen and (max-width: 767px) {
    .voice-introduce-image {
      width: 100%;
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1; } }

.voice-introduce-image img {
  max-width: 100%; }

.voice-comment-box {
  width: 80%;
  margin: 0 auto;
  padding-top: 25px; }
  @media screen and (max-width: 767px) {
    .voice-comment-box {
      width: 100%;
      padding-top: 4vw; } }

.voice-comment-text {
  line-height: 1.7; }
  @media screen and (max-width: 767px) {
    .voice-comment-text {
      font-size: 3.5vw; } }

.voice-detail-link {
  padding-top: 30px;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .voice-detail-link {
      padding-top: 5vw;
      font-size: 3.5vw; } }

.voice-detail-link a {
  display: inline-block;
  padding: 8px 4em;
  border-radius: 4px;
  border: 2px solid #1a1a1a;
  -webkit-transition: background ease .4s,color ease .4s;
  -o-transition: background ease .4s,color ease .4s;
  transition: background ease .4s,color ease .4s;
  color: #1a1a1a; }
  @media screen and (max-width: 767px) {
    .voice-detail-link a {
      width: 90%;
      padding: 3vw 0; } }

.voice-detail-link a:hover {
  background: #1a1a1a;
  color: #fff; }

/*-----------------------------------------------

detail

-------------------------------------------------*/
.detail {
  width: 100%;
  min-width: 1000px;
  padding: 10px 0 60px; }
  @media screen and (max-width: 767px) {
    .detail {
      min-width: 0;
      padding: 8vw 0 15vw; } }

.detail .contents-inner {
  padding-top: 35px; }
  @media screen and (max-width: 767px) {
    .detail .contents-inner {
      padding-top: 0;
      width: 100%; } }

@media screen and (max-width: 767px) {
  .overflow-box {
    overflow: auto;
    padding: 5.5vw; } }

.tbl-detail {
  width: 100%;
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  border-top: 1px solid #6ea250;
  border-left: 1px solid #6ea250;
  font-size: 13px; }
  @media screen and (max-width: 767px) {
    .tbl-detail {
      margin-right: 5vw;
      font-size: 3.2vw; } }

.tbl-detail th,
.tbl-detail td {
  border-right: 1px solid #6ea250;
  border-bottom: 1px solid #6ea250;
  white-space: nowrap; }

.tbl-detail thead th {
  padding: 8px 0;
  background: #6ea250;
  border-right: 1px solid #85be65;
  color: #fff;
  font-weight: 700;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .tbl-detail thead th {
      padding: 2vw 0; } }

.tbl-detail thead td {
  background: #e4f3db;
  color: #6ea250;
  font-weight: 700;
  text-align: center;
  padding: 8px 0; }
  @media screen and (max-width: 767px) {
    .tbl-detail thead td {
      padding: 2vw 0; } }

.tbl-detail tbody tr:nth-of-type(2n) td {
  background: #f6f6f6; }

.tbl-detail tbody th {
  background: #e4f3db;
  color: #6ea250;
  font-weight: 700;
  text-align: left;
  padding: 5px 10px; }
  @media screen and (max-width: 767px) {
    .tbl-detail tbody th {
      padding: 1vw 2vw; } }

.tbl-detail tbody th.vline {
  width: 2em; }

.tbl-detail tbody td {
  text-align: center;
  padding: 5px 10px; }
  @media screen and (max-width: 767px) {
    .tbl-detail tbody td {
      padding: 1vw 2vw; } }

.tbl-detail tbody .yen td {
  text-align: right; }

/*-----------------------------------------------

footer

-------------------------------------------------*/
.footer {
  width: 100%;
  min-width: 1000px;
  padding-top: 25px;
  border-top: 4px solid #6ea250; }
  @media screen and (max-width: 767px) {
    .footer {
      min-width: 0;
      padding-top: 6vw;
      border-top: 3px solid #6ea250; } }

.footer-logo {
  text-align: center; }

.footer-logo img {
  width: 268px; }
  @media screen and (max-width: 767px) {
    .footer-logo img {
      width: 44vw; } }

.footer-addr {
  padding: 25px 0 20px;
  text-align: center;
  line-height: 2; }
  @media screen and (max-width: 767px) {
    .footer-addr {
      padding: 5vw 0;
      font-size: 3.3vw; } }

.footer-cp {
  width: 100%;
  background: #6ea250;
  padding: 15px 0;
  color: #fff;
  text-align: center;
  font-size: 14px; }
  @media screen and (max-width: 767px) {
    .footer-cp {
      padding: 3vw 0;
      font-size: 2.5vw; } }

/*-----------------------------------------------

戻る

-------------------------------------------------*/
.pagetop {
  position: fixed;
  z-index: 10;
  right: 30px;
  bottom: 100px; }
  @media screen and (max-width: 767px) {
    .pagetop {
      right: 2vw;
      bottom: 10vw; } }

.pagetop a {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  background: rgba(110, 162, 80, 0.3);
  color: #fff;
  text-indent: -9999px;
  overflow: hidden;
  -webkit-transition: background ease .4s;
  -o-transition: background ease .4s;
  transition: background ease .4s; }
  @media screen and (max-width: 767px) {
    .pagetop a {
      width: 12vw;
      height: 12vw; } }

.pagetop a:hover {
  background: #6ea250; }

.pagetop a:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #6ea250;
  width: 0;
  height: 0;
  -webkit-transition: border-bottom ease .4s;
  -o-transition: border-bottom ease .4s;
  transition: border-bottom ease .4s; }
  @media screen and (max-width: 767px) {
    .pagetop a:after {
      margin-left: -3vw;
      border: 3vw solid transparent;
      border-bottom: 5vw solid #6ea250; } }

.pagetop a:hover:after {
  border-bottom: 15px solid #e4f3db; }