@charset "utf-8";

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


  ◇◆◇ SEO検索対策 ◇◆◇
  
  
========================================================================================================================*/

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

  問い合わせ
  
----------------------------------------------------------------------------------------------------*/

.seo-cc {
  background-color:#0a457f;
  color:#fff;
  padding:70px 30px 30px 30px;
  position:relative;
}

.seo-cc:before {
  width:0;
  height:0;
  content:"";
  display:inline-block;
  border-top:50px solid #fff;
  border-left:60px solid transparent;
  border-right:60px solid transparent;
  border-bottom:60px solid transparent;
  position:absolute;
  left:50%;
  top:0;
  margin-left:-60px;
}

.seo-cc--gray:before {
  border-top-color:#f2f2f2;
}

.seo-cc span br {
  display:none;
}

@media (max-width:767px) {
  .seo-cc {
    padding-top:3.25em;
    padding-bottom:2em;
    padding-left:3%;
    padding-right:3%;
  }

  .seo-cc:before {
    border-width:40px;
    border-top-width:35px;
    margin-left:-40px;
  }
}

@media (max-width:700px) {
  .seo-cc {
    font-size:95%;
  }
}

@media (max-width:640px) {
  .seo-cc {
    padding-top:2.5em;
    padding-bottom:1.5em;
    font-size:92%;
  }
  
  .seo-cc span {
    display:inline-block;
    margin-bottom:0.25em;
  }
  
  .seo-cc span br {
    display:inherit;
  }
  
  .seo-cc:before {
    border-width:30px;
    border-top-width:25px;
    margin-left:-30px;
  }
}

@media only screen {
  .cssanimations .seo-cc p {
    visibility:hidden;
  }
  
  .cssanimations .seo-cc p.animated {
    visibility:visible;
  }
  
  .cssanimations .seo-cc p.animated {
    -webkit-animation:zoomIn 0.6s forwards;
    animation:zoomIn 0.6s forwards;
  }
}


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

  SEO
  
----------------------------------------------------------------------------------------------------*/

.mess {
  text-align:center;
}

.mess li {
  box-sizing:border-box;
  background-color:#f2f2f2;
  color:#093b6c;
  padding:0.75em 4em 0.75em 4em;
  margin-top:2em;
  position:relative;
}

@media only screen {
  .cssanimations .mess li {
    filter:alpha(opacity=0);
    opacity:0;
    -moz-opacity:0;
  }
  
  .cssanimations .mess li.animated {
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;
    -webkit-animation:fadeInDown 0.6s forwards;
    animation:fadeInDown 0.6s forwards;
  }
}

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

.mess li small {
  box-sizing:border-box;
  background-color:#678aad;
  color:#fff;
  display:inline-block;
  vertical-align:middle;
  position:absolute;
  left:0;
  top:0;
  height:100%;
  padding-left:1.15em;
  padding-right:1.15em;
  padding-top:0.75em;
  text-align:center;
}

.mess li:after {
  width:0;
  height:0;
  content:"";
  display:inline-block;
  border-top:20px solid #f4d03f;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:20px solid transparent;
  position:absolute;
  left:50%;
  bottom:-40px;
  margin-left:-20px;
}

.mess li:last-child {
  padding:0.75em 0.75em;
  text-align:center;
  background-color:#093b6c;
  color:#fff;
}

.mess ul + p {
  padding-top:2em;
  text-align:center;
}

@media only screen {
  .cssanimations .mess ul + p {
    filter:alpha(opacity=0);
    opacity:0;
    -moz-opacity:0;
  }
  
  .cssanimations .mess ul + p.animated {
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;
    -webkit-animation:zoomIn 0.6s forwards;
    animation:zoomIn 0.6s forwards;
  }
}

@media (max-width:767px) {
  .mess {
    text-align:left;
  }

  .mess li {
    padding:0.75em 0.75em 0.75em 3.75em;
  }
}


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

  作業料金について
  
----------------------------------------------------------------------------------------------------*/

.price-block {
  border-top:1px solid #dcdcdc;
}

.price-block .block:first-child {
  text-align:center;
}

.price {
  background-color:#3fafdf;
  padding:30px;
  box-sizing:border-box;
  margin-top:-0.5em;
}

.price ul {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  line-height:0;
}

.price li {
  float:left;
}

.price li span {
  display:inline-block;
  width:50px;
  height:110px;
}

.price li span.plus {
  background:url(../image/seo/price-plus.png) no-repeat center center;
  background-size:cover;
}
.price li span.equal {
  background:url(../image/seo/price-equal.png) no-repeat center center;
  background-size:cover;
}

.price p {
  width:100%;
  color:#fff;
  padding-top:1em;
}

@media only screen {
  .cssanimations .price li {
    filter:alpha(opacity=0);
    opacity:0;
    -moz-opacity:0;
  }
  
  .cssanimations .price li.animated,
  .cssanimations .price li.animated {
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;
    -webkit-animation:flipInY 0.9s forwards;
    animation:flipInY 0.9s forwards;
  }
}

@media (max-width:767px) {
  .price-block .block:first-child {
    text-align:left;
  }
  
  .price-block .block:first-child p br:first-child {
    display:none;
  }
  
  .price {
    padding:1.5em 3%;
  }
  
  .price li {
    width:35.5%;
  }
  
  .price li img {
    max-width:82.14285%;
  }
  
  .price li:last-child {
    width:29%;
  }
  
  .price li:last-child img {
    max-width:100%;
  }
  
  .price li span {
    width:17.85714%;
    height:0;
    padding-top:39.28571%;
  }
  
  .price p {
    text-align:left;
    padding-top:0.5em;
  }
}

@media (max-width:500px) {
  .price {
    padding:1.25em 3%;
  }
}


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

  SEOとは
  
----------------------------------------------------------------------------------------------------*/

.about p {
  padding-top:1em;
}

.about .headline + p {
  padding-top:0;
}

.about .headline + p,
.about .headline + p + p {
  margin-right:406px;
}

.about .ani1 {
  display:inline-block;
  float:right;
  margin-left:40px;
  margin-top:-16em;
  position:relative;
  background-color:#fff;
}

@media (max-width:767px) {
  .about .headline + p,
  .about .headline + p + p {
    margin-right:0;
  }
  
  .about p br.sp-none {
    display:none;
  }
  
  .about .ani1 {
    float:none;
    display:block;
    text-align:center;
    margin-left:0;
    margin-top:2em;
    padding-bottom:0.5em;
  }
  
  .about .ani1 img {
    max-width:60%;
  }
}


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

  SEO対策のメリット
  
----------------------------------------------------------------------------------------------------*/

.merit {
  background-color:#f2f2f2;
}

.merit dl {
  width:360px;
  background-color:#fff;
  float:left;
  margin-left:10px;
  position:relative;
  box-sizing:border-box;
  padding:1.5em;
}

.merit .headline + dl {
  margin-left:0;
}

.merit dt {
  text-align:center;
  color:#00a08c;
}

.merit dt small {
  display:inline-block;
  color:#fff;
  position:absolute;
  left:0;
  top:0;
  padding:0.25em 0.75em;
  z-index:1;
}

.merit dt:after {
  width:0;
  height:0;
  content:"";
  display:inline-block;
  border-top:1.5em solid #33b3a3;
  border-left:1.5em solid #33b3a3;
  border-right:1.5em solid transparent;
  border-bottom:1.5em solid transparent;
  position:absolute;
  left:0;
  top:0;
}

.merit dd {
  margin-top:1.25em;
  padding-top:1.5em;
  border-top:1px solid #e8e8e8;
}

@media (max-width:767px) {
  .merit dl {
    width:100%;
    float:none;
    margin-left:0;
    margin-top:1.5em;
    padding:1.5em;
  }
  
  .merit dt br {
    display:none;
  }
}

@media (max-width:500px) {
  .merit dl {
    margin-top:1em;
    padding:1.25em;
  }
  
  .merit dt {
    text-align:left;
    padding-left:2em;
  }
}


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

  オラネットのSEO対策の特徴
  
----------------------------------------------------------------------------------------------------*/

.point {
  text-align:center;
}

.point p:last-child {
  padding-top:1em;
}

@media (max-width:767px) {
  .point {
    text-align:left;
  }
  
  .point p br.sp-none {
    display:none;
  }
}


/*-----------------------------------------------------------------------------------
  4つの特徴
-----------------------------------------------------------------------------------*/

.point-list-warp {
  background-color:#f2f2f2;
}

.point-list-warp p:first-child {
  text-align:center;
  padding-bottom:0.75em;
}

.point-list-warp p:first-child br {
  display:none;
}

.point-list dl {
  width:545px;
  background-color:#fff;
  float:left;
  margin-top:10px;
  margin-left:10px;
  position:relative;
  box-sizing:border-box;
  padding:1.5em;
}

.point-list dl:first-child,
.point-list dl:nth-child(3) {
  margin-left:0;
}

.point-list dt {
  padding-left:3.5em;
  color:#0f64b9;
  position:relative;
}

.point-list dt small {
  display:inline-block;
  background-color:#2c77c2;
  color:#fff;
  position:absolute;
  left:0;
  top:-1.4em;
  padding:0.8em 0.75em 1.4em 0.75em;
  line-height:1;
  z-index:1;
  text-align:center;
}

.point-list dt small span {
  display:block;
}

.point-list dt: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.75em;
  top:-0.4em;
  z-index:1;
}

.point-list dd {
  margin-top:1.25em;
  padding-top:1.5em;
  border-top:1px solid #e8e8e8;
}

.point-list .point-list-ic {
  display:inline-block;
  width:100%;
  text-align:center;
  line-height:0;
  margin-bottom:1.5em;
}

@media (max-width:767px) {
  .point-list-warp p:first-child {
    padding-bottom:0.25em;
    margin-top:-0.25em;
  }
  
  .point-list dl {
    width:100%;
    float:none;
    margin-left:0;
    margin-top:1.5em;
  }
  
  .point-list dt {
    text-align:center;
    padding-left:0;
  }
  
  .point-list dt br {
    display:none;
  }
}

@media (max-width:640px) {  
  .point-list dt {
    text-align:left;
    padding-left:3.5em;
  }
  
  .point-list .point-list-ic img {
    max-width:90%;
  }
}

@media (max-width:500px) {
  .point-list-warp p:first-child {
    padding-bottom:0.35em;
    margin-top:-0.45em;
  }
  
  .point-list-warp p:first-child br {
    display:inherit;
  }

  .point-list dl {
    margin-top:1em;
    padding:1.25em;
  }

  .point-list dt small {
    top:-1.25em;
  }
}


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

  良くないSEO対策
  
----------------------------------------------------------------------------------------------------*/

.bad-warp {
  background-color:#323232;
  color:#fff;
}

.bad-warp .headline {
  color:#fff;
}

.bad-about p {
  width:530px;
  float:left;
}

.bad-about p:last-child {
  float:right;
}

@media (max-width:767px) {
  .bad-about p {
    width:auto;
    float:none;
  }
  
  .bad-about p:last-child {
    padding-top:1em;
  }
}


/*-----------------------------------------------------------------------------------
  事例
-----------------------------------------------------------------------------------*/

.bad-ex {
  /*border-top:1px solid #464646;*/
  background-color:#464646;
}

.bad-ex p {
  padding-top:1em;
}

.bad-ex .headline-cst {
  margin-bottom:0.75em;
}

.bad-ex .headline-cst + p {
  text-align:center;
  margin-bottom:0.5em;
  padding-top:0;
}

.bad-ex .headline-cst + p img {
  margin-top:1.5em;
}

@media (max-width:767px) {
  .bad-ex .headline-cst + p {
    text-align:left;
  }
}


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

  これからのSEO検索対策
  
----------------------------------------------------------------------------------------------------*/

.future-l {
  width:530px;
  float:left;
}

.future-r {
  width:530px;
  float:right;
}
  
.future p {
  padding-top:1em;
}

.future-l p:first-child,
.future-r p:first-child {
  padding-top:0;
}

@media (max-width:767px) {
  .future-l,
  .future-r {
    width:auto;
    float:none;
  }
  
  .future-r {
    padding-top:1em;
  }
}