@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ トップページ ◇◆◇
  
  
========================================================================================================================*/

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

  hero
  
----------------------------------------------------------------------------------------------------*/

.hero {
  width:100%;
  position:relative;
}

.hero-item {
  float:left;
  height:450px;
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:auto 100%;
  text-align:center;
  position:relative;
  overflow:hidden;
}

@media print {
  .hero {
    width:100%;
    height:450px;
    overflow:hidden;
  }
  
  .hero-item {
    width:100% !important;
    background-size:auto 450px;
  }
  
  .hero .slick-track {
    width:100% !important;
  }
  
  .hero .slick-slider,
  .hero .slick-list,
  .hero .slick-track,
  .hero .slick-slide,
  .hero .slick-slide img {
    opacity:1 !important;
  }
}

@media (max-width:1620px) {
  .hero-item {
    background-size:cover;
  }
}

@media (max-width:767px) {
  .hero-item {
    height:inherit;
    line-height:0;
  }
}

.hero_1 { background-image:url(../image/top/hero/1-full.jpg); }
.hero_2 { background-image:url(../image/top/hero/2-full.jpg); }
.hero_3 { background-image:url(../image/top/hero/3-full.jpg); }
.hero_4 { background-image:url(../image/top/hero/4-full.jpg); }
.hero_5 { background-image:url(../image/top/hero/5-full.jpg?d=0918); }
.hero_6 { background-image:url(../image/top/hero/6-full.jpg); }
.hero_7 { background-image:url(../image/top/hero/7-full.jpg); }
.hero_8 { background-image:url(../image/top/hero/8-full.jpg); }
.hero_9 { background-image:url(../image/top/hero/9-full.jpg); }

.cssanimations .hero-item p {
  max-width:767px;
  top:48%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  filter:alpha(opacity=0);
  opacity:0;
  -moz-opacity:0;
  position:relative;
}

.cssanimations .hero li.slick-active p {
  animation:slick-animation 1s forwards;
  -webkit-animation:slick-animation 1s forwards;
  animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}

.no-cssanimations .hero-item p {
  max-width:767px;
  position:absolute;
  top:48%;
  left:50%;
  margin-left:-383.5px;
  margin-top:-102.5px;
}

.no-cssanimations .hero-item p img {
  width:100%;
}

.hero li .btn {
  position:absolute;
  bottom:40px;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  min-width:300px;
}

.lte-ie8 .hero-item .btn {
  margin-left:-150px;
}

@media print {
  .hero-item p img {
    width:767px;
  }
    
  .cssanimations .hero-item p {
    filter:alpha(opacity=1);
    opacity:1;
    -moz-opacity:1;
  }
  
  .cssanimations .hero li.slick-active p {
    animation:none;
    -webkit-animation:none;
  }
}

@media (max-width:767px) {
  .cssanimations .hero li.slick-active p {
    animation:none;
    -webkit-animation:none;
  }

  .hero_1 { background-image:url(../image/top/hero/1.jpg); }
  .hero_2 { background-image:url(../image/top/hero/2.jpg); }
  .hero_3 { background-image:url(../image/top/hero/3.jpg); }
  .hero_4 { background-image:url(../image/top/hero/4.jpg); }
  .hero_5 { background-image:url(../image/top/hero/5.jpg?d=0918); }
  .hero_6 { background-image:url(../image/top/hero/6.jpg); }
  .hero_7 { background-image:url(../image/top/hero/7.jpg); }
  .hero_8 { background-image:url(../image/top/hero/8.jpg); }
  .hero_9 { background-image:url(../image/top/hero/9.jpg); }
  
  .hero li p {
    width:100%;
    height:0;
    padding-top:48.67014%;
  }
    
  .hero li p img {
    display:none;
  }
  
  .hero li .btn {
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    background:none;
    border:none;
    -webkit-transform:none;
    transform:none;
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
  }
  
  .hero li .btn span {
    display:none;
  }
}

@-webkit-keyframes slick-animation {
  0% {
    margin-top:-5%;
    filter:alpha(opacity=0);
    opacity:0;
    -moz-opacity:0;
  }
  
  100% {
    margin-top:0;
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;
  }
}

@keyframes slick-animation {
  0% {
    margin-top:-5%;
    filter:alpha(opacity=0);
    opacity:0;
    -moz-opacity:0;
  }
  
  100% {
    margin-top:0;
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;
  }
}

@-webkit-keyframes slick-animation--sp {
  0% {
    margin-top:-15%;
    filter:alpha(opacity=0);
    opacity:0;
    -moz-opacity:0;
  }
  
  100% {
    margin-top:0;
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;
  }
}

@keyframes slick-animation--sp {
  0% {
    margin-top:-15%;
    filter:alpha(opacity=0);
    opacity:0;
    -moz-opacity:0;
  }
  
  100% {
    margin-top:0;
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;
  }
}


/*-----------------------------------------------------------------------------------
  矢印
-----------------------------------------------------------------------------------*/

.hero-arrow .slick-prev:before,
.hero-arrow .slick-next:before {
  content:"";
}

.hero-arrow .slick-prev,
.hero-arrow .slick-next {
  font-size:0;
  color:#fff;
  display:inline-block;
	width:60px;
	height:60px;
	position:absolute;
	top:50%;
	z-index:1;
  margin-top:-30px;
  background-color:rgba(0,0,0,0.2);
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -webkit-transition:background-color ease 0.3s;
  -moz-transition:background-color ease 0.3s;
  -ms-transition:background-color ease 0.3s;
  -o-transition:background-color ease 0.3s;
  transition:background-color ease 0.3s;
  background-size:26px;
  background-position:center center;
  background-repeat:no-repeat;
}

.hero-arrow .slick-prev { left:20px; }
.hero-arrow .slick-next { right:20px; }

.svg .hero-arrow .slick-prev    { background-image:url(../image/icon/white/prev.svg); }
.no-svg .hero-arrow .slick-prev { background-image:url(../image/icon/white/prev-s.png); }
.no-rgba .hero-arrow .slick-prev { background-image:url(../image/icon/gray/prev-s.png); }
.no-rgba .hero-arrow .slick-prev:hover { background-image:url(../image/icon/white/prev-s.png); }

.svg .hero-arrow .slick-next    { background-image:url(../image/icon/white/next.svg); }
.no-svg .hero-arrow .slick-next { background-image:url(../image/icon/white/next-s.png); }
.no-rgba .hero-arrow .slick-next { background-image:url(../image/icon/gray/next-s.png); }
.no-rgba .hero-arrow .slick-next:hover { background-image:url(../image/icon/white/next-s.png); }

.hero-arrow .slick-prev:hover,
.hero-arrow .slick-next:hover,
.no-rgba .hero-arrow .slick-prev:hover,
.no-rgba .hero-arrow .slick-next:hover {
  background-color:#00a08c;
}

.no-rgba .hero-arrow .slick-prev,
.no-rgba .hero-arrow .slick-next {
  background-color:#fff;
}

@media (max-width:767px) {
  .hero-arrow {
    display:none;
  }
}


/*-----------------------------------------------------------------------------------
  ドット
-----------------------------------------------------------------------------------*/

.hero-dot {
  display:none;
}

@media (max-width:767px) {
  .hero-dot {
    padding-bottom:1em;
    display:block;
    line-height:0;
  }
}


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

  制作実績
  
----------------------------------------------------------------------------------------------------*/

.portfolio {
  text-align:left;
  margin-bottom:40px;
  padding-top:0.25em;
}

.portfolio .btn {
  width:450px;
}

@media (max-width:500px) {
  .portfolio .btn {
    width:100%;
    padding-left:1.5em;
    padding-right:1.5em;
  }
}


.portfolio li figure {
  width:100%;
  position:relative;
  overflow:hidden;
  color:#fff;
  text-align:center;
}

.portfolio li figure img {
  vertical-align:bottom;
  position:absolute;
  left:0;
  top:0;
}

.portfolio li figure a {
  display:table;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
}

.portfolio li figure a,
.portfolio li figure a:hover,
.portfolio li figure a:visited {
  text-decoration:none;
  color:#fff;
}

.portfolio li figure a span {
  display:table-cell;
  vertical-align:middle;
  position:relative;
  background-color:rgba(0,0,0,0.6);
  filter:alpha(opacity=0);
  opacity:0;
  -moz-opacity:0;
  -webkit-transition:opacity ease 0.3s;
  -moz-transition:opacity ease 0.3s;
  -ms-transition:opacity ease 0.3s;
  -o-transition:opacity ease 0.3s;
  transition:opacity ease 0.3s;
}

.preload .portfolio li figure a span {
  filter:alpha(opacity=0) !important;
  opacity:0 !important;
  -moz-opacity:0 !important;
  -webkit-transition:none !important;
  -moz-transition:none !important;
  -ms-transition:none !important;
  -o-transition:none !important;
  transition:none !important;
}

.pc .portfolio li figure:hover a span {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;
  z-index:2;
}

.portfolio li figure a span small.site-url--pc {
  display:inline-block;
  position:relative;
}

.pc .portfolio li figure a span small.site-url--pc:after {
  content:"";
  position:absolute;
  bottom:-0.25em;
  left:0;
  width:100%;
  height:2px;
  -webkit-transform:scaleX(0);
  -ms-transform:scaleX(0);
  transform:scaleX(0);
  background-color:#fff;
  -webkit-transition:all .4s ease;
  transition:all .4s ease;
}
  
.pc .portfolio li figure:hover a span small.site-url--pc:after {
  -webkit-transform:scaleX(1);
  -ms-transform:scaleX(1);
  transform:scaleX(1);
}

.pc .portfolio li figure img {
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  -webkit-transition:all .4s ease;
  transition:all .4s ease;
}

.csstransforms.pc .portfolio li figure a:hover img {
  -webkit-transform:scale(1.1);
  -ms-transform:scale(1.1);
  transform:scale(1.1);
}

.lte-ie8 .portfolio li figure a span {
  display:none;
}

@media (max-width:767px) {
  .portfolio {
    margin-bottom:2.5em;
    padding-top:0;
  }
  
  .portfolio li figure .site-url--pc { display:none !important; }
  
  .portfolio li figure a span {
    -webkit-transition:none;
    -moz-transition:none;
    -ms-transition:none;
    -o-transition:none;
    transition:none;
    text-align:left;
    width:100%;
    padding-left:0.75em;
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    background-color:#fff;
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;    
    font-size:75%;
    box-sizing:border-box;
  }
}


/* タイトル・URL ----------------------------------------*/

.portfolio li figcaption {
  text-align:left;
  padding-top:1em;
}

.portfolio li figcaption .sitename {
  display:block;
  font-size:115%;
}

.portfolio li figcaption .sitename small {
  font-size:75%;
  margin-left:0.25em;
}

.portfolio li figcaption .txtlink-url {
  text-decoration:none;
  color:#969696;
  word-wrap:break-word;
}

.portfolio li figcaption .txtlink-url[target="_blank"]:after {
  background-image:url(../image/icon/gray/blank.png);
}

@media (min-width:768px) {
  .portfolio li figcaption .txtlink-url:hover {
    color:#0f64b9;
    text-decoration:underline;
  }
  
  .portfolio li figcaption .txtlink-url:hover[target="_blank"]:after {
    background-image:url(../image/icon/blue/blank.png);
  }
}

@media (max-width:500px) {
  .portfolio li figcaption {
    padding-top:0.75em;
  }
}


/* 3列 ----------------------------------------*/

.portfolio.cols-3 li figure {
  height:300px;
}

@media (max-width:767px) {
  .portfolio.cols-3 li figure {
    height:260px;
  }
}

@media (max-width:640px) {
  .portfolio.cols-3 li figure {
    height:240px;
  }
}

@media (max-width:500px) {
  .portfolio.cols-3 li figure {
    height:160px;
  }
}

@media (max-width:400px) {
  .portfolio.cols-3 li figure {
    height:140px;
  }
}


/* 4列 ----------------------------------------*/

.portfolio.cols-4 li figure {
  height:220px;
}

@media (max-width:767px) {
  .portfolio.cols-4 li figure {
    height:180px;
  }
}

@media (max-width:640px) {
  .portfolio.cols-4 li figure {
    height:240px;
  }
}

@media (max-width:500px) {
  .portfolio.cols-4 li figure {
    height:160px;
  }
}

@media (max-width:400px) {
  .portfolio.cols-4 li figure {
    height:140px;
  }
}


/* 5列 ----------------------------------------*/

.portfolio.cols-5 li figure {
  height:180px;
}

@media (max-width:767px) {
  .portfolio.cols-5 li figure {
    height:140px;
  }
}

@media (max-width:500px) {
  .portfolio.cols-5 li figure {
    height:160px;
  }
}

@media (max-width:400px) {
  .portfolio.cols-5 li figure {
    height:140px;
  }
}


/*-----------------------------------------------------------------------------------
  代表的な制作実績
-----------------------------------------------------------------------------------*/

.masterpiece {
  text-align:center;
}

/*
.masterpiece .portfolio li .figure-warp {
  padding:8px;
  border:1px solid #e8e8e8;
  box-sizing:border-box;
}
*/


/*-----------------------------------------------------------------------------------
  最近の制作実績
-----------------------------------------------------------------------------------*/

.works {
  background-color:#f2f2f2;
}

.works .block {
  text-align:center;
}

.works .portfolio li .figure-warp {
  padding:5px;
  box-sizing:border-box;
  background-color:#fff;
}


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

  お知らせ
  
----------------------------------------------------------------------------------------------------*/

.info {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
}

.info dl {
  display:inline-block;
  text-align:left;
}

.info dt {
  width:6em;
  float:left;
  clear:both;
  color:#969696;
  margin-right:-6em;
  padding-top:1em;
}

.info dd {
  padding-left:7em;
  padding-top:1em;
}

.info dt:first-child,
.info dt:first-child + dd {
  padding-top:0;
}

@media (max-width:400px) {
  .info {
    display:block;
  }
  
  .info dt {
    display:block;
    width:inherit;
    float:none;
    margin-right:0;
    padding-top:1em;
  }
  
  .info dd {
    display:block;
    padding-left:0;
    padding-top:0;
  }
}


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

  企業ロゴ
  
----------------------------------------------------------------------------------------------------*/

.wc-logo {
  text-align:center;
  padding-top:50px;
  padding-bottom:50px;
  box-sizing:border-box;
  border-top:1px solid #dcdcdc;
}

.wc-logo p { padding-bottom:40px; font-size:150%; line-height:1.75; }
.wc-logo p br { display:none; }

@media (max-width:767px) {
  .wc-logo {
    padding:2.25em 1em;
  }
  
  .wc-logo p { padding-bottom:1.5em; font-size:118.8%; line-height:1.65; }
}

@media (max-width:640px) {
  .wc-logo p br { display:inherit; }
}

@media (max-width:500px) {
  .wc-logo p { font-size:100%; }
}


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

  目的別一覧
  
----------------------------------------------------------------------------------------------------*/

.preload .byPurpose li,
.preload .byPurpose li * {
  -webkit-transition:none !important;
  -moz-transition:none !important;
  -ms-transition:none !important;
  -o-transition:none !important;
  transition:none !important;
  animation:none !important;
}

.byPurpose {
  clear:both;
  background:url(../image/top/byPurpose-bg.jpg) no-repeat center top;
  background-size:cover;
}

.byPurpose ul {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.byPurpose li {
  width:19.27272%;
  margin-left:0.90909%;
  margin-top:0.90909%;
  float:left;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-sizing:border-box;
}

.byPurpose li .button {
  line-height:1.5;
}


@media (min-width:768px) {
  .byPurpose li {
    line-height:0;
  }
  
  .byPurpose li .button {
    display:inline-block;
    width:100%;
    height:190px;
    text-align:center;
    text-decoration:none;
    outline:none;
    position:relative;
  }

  .csstransitions .byPurpose li .button:before,
  .csstransitions .byPurpose li .button:after {
    position:absolute;
    z-index:-1;
    display:block;
    content:"";
  }
  
  .csstransitions .byPurpose li .button,
  .csstransitions .byPurpose li .button:before,
  .csstransitions .byPurpose li .button:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-transition:all .4s;
    transition:all .4s;
  }
  
  .byPurpose li .button div {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
    box-sizing:border-box;
    padding:1.5em 1em 0 1em;
    -webkit-transition:all .4s;
    transition:all .4s;
    pointer-events:none;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
  }
  
  .csstransitions .byPurpose li .button div:nth-child(1) {
    background-color:#2c77c2;
    color:#fff;
    -webkit-transform:rotateX(90deg);
    -moz-transform:rotateX(90deg);
    transform:rotateX(90deg);
    -webkit-transform-origin:50% 50% -95px;
    -moz-transform-origin:50% 50% -95px;
    transform-origin:50% 50% -95px;
  }
  
  .csstransitions .byPurpose li .button div:nth-child(2) {
    color:inherit;
    -webkit-transform:rotateX(0deg);
    -moz-transform:rotateX(0deg);
    transform:rotateX(0deg);
    -webkit-transform-origin:50% 50% -95px;
    -moz-transform-origin:50% 50% -95px;
    transform-origin:50% 50% -95px;
  }
  
  .rgba.csstransitions .byPurpose li .button div:nth-child(2)    { background-color:rgba(255,255,255,0.65); }
  .no-rgba.csstransitions .byPurpose li .button div:nth-child(2) { background-color:#fff; }
  
  .csstransitions .byPurpose li .button:hover div:nth-child(1) {
    -webkit-transform:rotateX(0deg);
    -moz-transform:rotateX(0deg);
    transform:rotateX(0deg);
  }
  
  .csstransitions .byPurpose li .button:hover div:nth-child(2) {
    background-color:#2c77c2;
    -webkit-transform:rotateX(-90deg);
    -moz-transform:rotateX(-90deg);
    transform:rotateX(-90deg);
  }
  
  .byPurpose li:hover,
  .byPurpose li:hover span { color:#fff; }
  .byPurpose li:hover { background-color:#2c77c2; }
}

.lte-ie8 .byPurpose li:hover,
.lte-ie8 .byPurpose li:hover span { color:#fff; }
.lte-ie8 .byPurpose li:hover .button div,
.lte-ie8 .byPurpose li:hover { background-color:#2c77c2; }

.lte-ie8 .byPurpose li .button div {
  display:block;
  width:100%;
  height:100%;
  text-align:center;
  box-sizing:border-box;
  padding:1.5em 1em;
  -webkit-transition:all .4s;
  transition:all .4s;
  pointer-events:none;
}

@media (max-width:767px) {
  .byPurpose li a  {
    display:block;
    padding:1.5em 1em;
  }
  
  .csstransitions .byPurpose li         { background-color:rgba(255,255,255,0.65); }
  
  .csstransitions .byPurpose li .button div:nth-child(1) {
    display:none;
  }
}

.rgba.no-csstransitions .byPurpose li    { background-color:rgba(255,255,255,0.65); }
.no-rgba.no-csstransitions .byPurpose li { background-color:#fff; }
  
.byPurpose li:nth-child(5n+1) {
  margin-left:0;
  clear:both;
}

.byPurpose li a {
  color:inherit;
  text-decoration:none;
}

.button div {
  text-align:center;
}

.byPurpose li div span {
  display:inline-block;
}

.byPurpose li div span.line1 {
  margin-top:0.75em;
}

.byPurpose li img {
  margin-top:0.25em;
  margin-bottom:0.5em;
  width:90px;
}


@media (max-width:767px) {
  .byPurpose {
    background-size:contain;
    background-color:#e6e6e6
  }
  
  .byPurpose ul {
    margin-top:-2%;
  }

  .byPurpose li,
  .byPurpose li:nth-child(5n+1) {
    width:32%;
    margin-left:2%;
    margin-top:2%;
    clear:none;
  }
  
  .byPurpose li:nth-child(3n+1) {
    margin-left:0;
    clear:both;
  }
}


@media (max-width:640px) {
  .byPurpose ul {
    margin-top:-2.5%;
  }
  
  .byPurpose li,
  .byPurpose li:nth-child(5n+1),
  .byPurpose li:nth-child(3n+1) {
    width:48.75%;
    margin-left:2.5%;
    margin-top:2.5%;
    clear:none;
  }
  
  .byPurpose li:nth-child(2n+1) {
    margin-left:0;
    clear:both;
  }
}

@media (max-width:500px) {
  .byPurpose li div span br {
    display:none;
  }
  
  .byPurpose li div span.line1 {
    margin-top:0;
  }
}

@media (max-width:400px) {
  .byPurpose li img {
    width:80px;
  }
}


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

  選ばれる理由
  
----------------------------------------------------------------------------------------------------*/

.reasons ul {
  text-align:left;
  margin-top:1.5em;
  margin-bottom:2.5em;
  position:relative;
}

.reasons li {
  background-color:#fff;
  padding:1.15em 0.25em 1.25em 4.5em;
  position:relative;
  border-top:1px solid #dcdcdc;
  border-bottom:1px solid #dcdcdc;
  margin-top:-1.5px;
}

.reasons .font-blue   { color:#2c77c2; }

.reasons li:first-child {
  margin-top:0;
}

.reasons li small {
  display:inline-block;
  /*background-color:#2c77c2;*/
  background-color:#f0af0a;
  color:#fff;
  position:absolute;
  left:0;
  top:-1px;
  padding:0.8em 0.75em 1.2em 0.75em;
  line-height:1.2;
  z-index:1;
  text-align:center;
}

.reasons li small span {
  display:block;
}

.reasons li b {
  color:#fa9105;
}

.reasons li:after {
  width:0;
  height:0;
  content:"";
  display:inline-block;
  border-top:2em solid transparent;
  border-left:2em solid transparent;
  border-right:2em solid transparent;
  border-bottom:0.5em solid #fff;
  position:absolute;
  left:-0.45em;
  top:2.1em;
  z-index:2;
}

@media (max-width:767px) {
  .forte-warp li {
    padding:1em 0.25em 1em 4.5em;
  }
}

@media (max-width:500px) {
  .reasons li {
    padding-left:4.25em;
  }
  .reasons li:after {
    top:2em;
  }
}


.reasons .check-em {
  position:relative;
  text-align:center;
}

.reasons .ani1 {
  padding-bottom:0.5em;
}

.reasons .ani1 div {
  display:inline-block;
}

.reasons .ani1 br {
  display:none;
}

.reasons .check-arrow {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:50px;
  background:url(../image/top/check-arrow.png) no-repeat center top;
  background-size:contain;
  font-size:0;
  line-height:0;
}

.reasons .check-arrow.ani2 {
  display:inline-block;
  position:relative;
}

.reasons .btn {
  width:100%;
  margin-top:-12px;
}


@media only screen {
  .cssanimations .reasons .ani1 {
    visibility:hidden;
  }
  
  .cssanimations .reasons .ani1.animated {
    visibility:visible;
  }
  
  .cssanimations .reasons .ani1.animated {
    -webkit-animation:zoomIn 0.6s forwards;
    animation:zoomIn 0.6s forwards;
  }
  
  .cssanimations .reasons .check-arrow.ani2 {
    visibility:hidden;
  }
  
  .cssanimations .reasons .check-arrow.ani2.animated {
    visibility:visible;
    -webkit-animation:fadeInDown 0.9s infinite;
    animation:fadeInDown 0.9s infinite;
  }
}

@media (max-width:767px) {
  .reasons .check-arrow {
    height:40px;
  }
  
  .reasons .ani1 br {
    display:inherit;
  }
  
  .reasons .ani1 .fspace--l:first-child {
    margin-left:0;
  }
}

@media (max-width:500px) {
  .reasons .check-arrow {
    height:30px;
  }
}