@charset "utf-8";

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


  ◇◆◇ レンタルサーバー ◇◆◇
  
  
========================================================================================================================*/

.block .headline + p,
.block p:first-child {
  padding-top:0;
}


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

  ホームページ運用に必要なもの
  
----------------------------------------------------------------------------------------------------*/

.need .headline br {
  display:none;
}

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

.need .ani1 {
  display:inline-block;
  float:right;
  margin-left:40px;
  margin-top:-7em;
  position:relative;
}

@media (max-width:767px) {
  .need .ani1 {
    float:none;
    display:block;
    text-align:center;
    margin-left:0;
    margin-top:1.5em;
    padding-bottom:0.5em;
  }
  
  .need .ani1 img {
    max-width:60%;
  }
}

@media (max-width:400px) {
  .need .headline br {
    display:inherit;
  }
  
  .need .headline {
    line-height:1.5;
  }
}


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

  独自ドメインについて
  
----------------------------------------------------------------------------------------------------*/

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

.domain--block h5 {
  font-weight:normal;
}

.domain--block p {
  padding-top:1em;
}


/*-----------------------------------------------------------------------------------
  独自ドメインの価値
-----------------------------------------------------------------------------------*/

.domain--blockA {
  padding-bottom:1em;
}

.domain--blockA h5,
.domain--blockA p {
  padding-left:523px;
}

.domain--blockA .ani2 {
  display:inline-block;
  float:left;
  margin-right:50px;
  margin-top:-1.65em;
  line-height:0;
}

.domain--blockA .ani2-img {
  position:relative;
  display:inline-block;
  max-width:100%;
}

.ani2_low,
.ani2_high {
  max-width:7.10382%;
  position:absolute;
  top:0;
  max-width:5.49682%;
}

.cssanimations .ani2_low,
.cssanimations .ani2_high {
  top:-4.16666px;
}

.ani2_low  { left:17.12473%; }
.ani2_high { right:0; }

@media only screen {
  .cssanimations .ani2_low.animated,
  .cssanimations .ani2_high.animated  { -webkit-animation:ani2_low-high-animation 1.2s forwards; animation:ani2_low-high-animation 1.2s forwards; }
}

@-webkit-keyframes ani2_low-high-animation  { 0% { top:-4.16666px; } 20% { top:4.16666px; } 40% { top:-4.16666px; } 60% { top:0; } 80% { top:-2.08333px; } 100% { top:0; } }
@keyframes ani2_low-high-animation          { 0% { top:-4.16666px; } 20% { top:4.16666px; } 40% { top:-4.16666px; } 60% { top:0; } 80% { top:-2.08333px; } 100% { top:0; } }

.ani2_bar1,
.ani2_bar5,
.ani2_bar10 {
  width:0;
  height:16.666666%;
  position:absolute;
  left:19.87315%;
  z-index:-1;
}

.ani2_bar1  { top:25%; }
.ani2_bar5  { top:50%; }
.ani2_bar10 { top:75%; }

.no-cssanimations .ani2_bar1  { width:27.3224%; }
.no-cssanimations .ani2_bar5  { width:44.39746%; }
.no-cssanimations .ani2_bar10 { width:77.37843%; }

@media print {
  .ani2_bar1  { width:27.3224%; }
  .ani2_bar5  { width:44.39746%; }
  .ani2_bar10 { width:77.37843%; }
}

@media only screen {
  .cssanimations .ani2_bar1.animated  { -webkit-animation:ani2_bar1-animation 1s forwards; animation:ani2_bar1-animation 1s forwards; }
  .cssanimations .ani2_bar5.animated  { -webkit-animation:ani2_bar5-animation 1s forwards; animation:ani2_bar5-animation 1s forwards; }
  .cssanimations .ani2_bar10.animated { -webkit-animation:ani2_bar10-animation 1s forwards; animation:ani2_bar10-animation 1s forwards; }
}

@-webkit-keyframes ani2_bar1-animation  { 100% { width:27.3224%; } }
@keyframes ani2_bar1-animation          { 100% { width:27.3224%; } }

@-webkit-keyframes ani2_bar5-animation  { 100% { width:44.39746%; } }
@keyframes ani2_bar5-animation          { 100% { width:44.39746%; } }

@-webkit-keyframes ani2_bar10-animation { 100% { width:77.37843%; } }
@keyframes ani2_bar10-animation         { 100% { width:77.37843%; } }

@media (max-width:767px) {
  .domain--blockA {
    padding-bottom:0;
  }

  .domain--blockA .ani2 {
    display:block;
    float:none;
    margin-right:auto;
    margin-right:auto;
    margin-top:1.5em;
    margin-bottom:0.5em;
    text-align:center;
  }
  
  .domain--blockA h5,
  .domain--blockA p {
    padding-left:0;
  }
  
  .domain--blockA h5 {
    text-align:center;
  }
}

@media (max-width:600px) {
  .domain--blockA h5 {
    text-align:left;
  }
}


/*-----------------------------------------------------------------------------------
  ドメイン提案
-----------------------------------------------------------------------------------*/

.domain--blockB {
  border:1px dotted #969696;
  padding:1em 1.25em;
  margin-top:2em;
  margin-bottom:3em;
}

@media (max-width:767px) {
  .domain--blockB {
    padding:1em;
  }
}

@media (max-width:640px) {
  .domain--blockB {
    margin-top:2em;
    margin-bottom:2em;
  }
}


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

  レンタルサーバーについて
  
----------------------------------------------------------------------------------------------------*/

.rental-server {
  background-color:#f2f2f2;
}

.rental-server .block {
  text-align:center;
}

.rental-server .block p {
  text-align:left;
  padding-top:1em;
}

.rental-server h5 {
  font-weight:normal;
  margin-top:1em;
}

.rental-server dl {
  margin-top:3em;
  margin-bottom:2em;
  text-align:center;
}

.rental-server dt {
  background-color:#2c77c2;
  color:#fff;
  padding:0.5em;
  margin-bottom:5px;
}

.rental-server dt br {
  display:none;
}

.rental-server dd {
  width:363.333333px;
  float:left;
  margin-left:5px;
  box-sizing:border-box;
  padding:1.65em 1em;
  background-color:#fff;
}

.rental-server dt + dd {
  margin-left:0;
}

.rental-server dd img {
  margin-bottom:0.5em;
  max-width:50%;
}

.rental-server dd span {
  display:block;
}

@media (max-width:767px) {
  .rental-server h5 {
    text-align:left;
  }
  
  .rental-server dt {
    padding:0.8em 0.75em;
    margin-bottom:4px;
  }
  
  .rental-server dd {
    width:33.333333%;
    margin-left:0;
    border-left:2px solid #f2f2f2;
    border-right:2px solid #f2f2f2;
    padding-left:2.5%;
    padding-right:2.5%;
  }
  
  .rental-server dt+dd {
    border-left:0;
  }
  
  .rental-server dt+dd+dd+dd {
    border-right:0;
  }
  
  .rental-server dd img {
    max-width:80%;
  }
  
  .rental-server dd br {
    display:none;
  }
  
  .rental-server dd span {
    font-size:87.5%;
    line-height:1.7;
  }

  .rental-server dt br {
    display:inherit;
  }
}

@media (max-width:640px) {
  .rental-server dl {
    margin-top:2em;
    margin-bottom:1em;
  }
}

@media (max-width:500px) {
  .rental-server dd span {
    line-height:1.5;
  }
  
  .rental-server dt {
    font-size:120.0%;
  }
  
  .rental-server dd {
    font-size:90.0%;
  }
}

@media (max-width:400px) {
  .rental-server dt {
    font-size:100.0%;
  }
}