@charset "utf-8";

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


  ◇◆◇ Web制作まるわかり ◇◆◇
  
  
========================================================================================================================*/

.flow-cc {
  text-align:center;
}

.flow-subHeadline {
  box-sizing:border-box;
  display:inline-block;
  padding:0.75em 1em;
  color:#0f4075;
  position:relative;
  margin-top:1.5em;
}

.flow-subHeadline:before,
.flow-subHeadline:after {
  content:"";
  display:inline-block;
  width:100%;
  height:1px;
  position:absolute;
  left:0;
}
.flow-subHeadline:before { top:0; }
.flow-subHeadline:after  { bottom:0; }

.rgba .flow-subHeadline:before,
.rgba .flow-subHeadline:after { background-color:rgba(15,64,117,0.5); }
.no-rgba .flow-subHeadline:before,
.no-rgba .flow-subHeadline:after { background-color:#0f4075; }

@media only screen {
  .cssanimations .flow-cc h3 {
    visibility:hidden;
    font-weight:normal;
  }
  
  .cssanimations .flow-cc h3.animated {
    visibility:visible;
  }
  
  .cssanimations .flow-cc h3.animated {
    -webkit-animation:zoomIn 0.6s forwards;
    animation:zoomIn 0.6s forwards;
  }
}

.flow-warp {
  background-color:#0a457f;
  color:#fff;
}

.flow-warp .block {
  position:relative;
  min-height:335px;
  text-align:center;
}

.flow-warp p {
  padding-bottom:1.5em;
  text-align:left;
}

.flow-warp .btn {
  position:absolute;
  left:0;
  bottom:60px;
}

.flow-warp img {
  position:absolute;
  right:0;
  bottom:-10px;
}

@media (max-width:767px) {
  .flow-warp br.sp-none {
    display:none;
  }

  .flow-warp .block {
    min-height:inherit;
  }

  .flow-warp p {
    padding-bottom:1em;
  }

  .flow-warp .btn,
  .flow-warp img {
    position:inherit;
    left:inherit;
    right:inherit;
    bottom:inherit;
    margin-left:auto;
    margin-right:auto;
  }
  
  .flow-warp img {
    margin-top:1em;
    margin-bottom:1.5em;
  }

  .flow-warp .btn {
    min-width:inherit;
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}


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

  料金
  
----------------------------------------------------------------------------------------------------*/

.price {
  text-align:center;
}

.price .headline br,
.price p br.pc-none {
  display:none;
}

.price ul {
  margin-top:1.5em;
}

.price li {
  margin-top:1.5em;
  line-height:0;
}

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

@media (max-width:767px) {
  .price li {
    margin-top:1em;
  }
}

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


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

  オラネットの売り
  
----------------------------------------------------------------------------------------------------*/

.forte-warp {
  background-color:#f2f2f2;
}

.forte-warp .block {
  text-align:center;
}

.forte-warp ul {
  text-align:left;
  margin-top:1.5em;
  margin-bottom:3em;
  position:relative;
}

.forte-warp li {
  background-color:#fff;
  margin-top:10px;
  padding:1em 1.25em 1em 5em;
  position:relative;
}

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

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

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

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

.forte-warp li small span {
  display:block;
}

.forte-warp 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.49em;
  top:1.9em;
  z-index:2;
}

.forte-warp ul:after {
  width:0;
  height:0;
  content:"";
  display:inline-block;
  border-top:30px solid #f4d03f;
  border-left:40px solid transparent;
  border-right:40px solid transparent;
  border-bottom:40px solid transparent;
  position:absolute;
  left:50%;
  bottom:-70px;
  margin-left:-30px;
  z-index:1;
}

@media only screen {
  .cssanimations .forte-warp ul:after {
    filter:alpha(opacity=0);
    opacity:0;
    -moz-opacity:0;
  }
  
  .cssanimations .forte-warp ul.animated:after {
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;
    -webkit-animation:fadeInDown 0.6s forwards;
    animation:fadeInDown 0.6s forwards;
  }
}
  
.forte-warp p:last-child br.pc-none {
  display:none;
}

@media only screen {
  .cssanimations .forte-warp p:last-child {
    visibility:hidden;
    font-weight:normal;
  }
  
  .cssanimations .forte-warp p:last-child.animated {
    visibility:visible;
  }
  
  .cssanimations .forte-warp p:last-child.animated {
    -webkit-animation:zoomIn 0.6s forwards;
    animation:zoomIn 0.6s forwards;
  }
}

@media (max-width:767px) {
  .forte-warp li {
    padding:0.75em 1.25em 0.75em 5em;
  }
  
  .forte-warp p:last-child br.pc-none {
    display:inherit;
  }
}

@media (max-width:500px) {
  .forte-warp li:after {
    top:1.8em;
  }
}


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

  制作実績と対象の業種
  
----------------------------------------------------------------------------------------------------*/

.hpworks-warp {
  background:url(../image/about/works-bg.jpg) no-repeat center bottom;
}

.hpworks-img--sp,
.hpworks-warp .headline br {
  display:none;
}

.hpworks-warp p {
  padding-bottom:1em;
}

.hpworks-warp .btn {
  margin-top:0.75em;
}

@media (max-width:767px) {
  .hpworks-warp {
    background:none;
  }

  .hpworks {
    background:url(../image/about/works-bg.jpg) no-repeat right bottom;
    background-size:130% auto;
  }
  
  .hpworks-warp .btn {
    min-width:inherit;
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  
  .hpworks-warp p.hpworks-p--end {
    padding-right:55%;
  }

  .hpworks-warp p br.sp-none {
    display:none;
  }
}

@media (max-width:640px) {
  .hpworks {
    background:none;
  }
  
  .hpworks-warp p.hpworks-p--end {
    padding-right:0;
  }
  
  .hpworks-img--sp {
    display:inherit;
    margin-bottom:1.5em;
  }
}

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


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

  制作エリア
  
----------------------------------------------------------------------------------------------------*/

.area-warp {
  background-image:url(../image/about/area-bg.jpg);
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:100% auto;
}

.area-warp .block {
  text-align:center;
}

.area-warp .headline + p {
  padding-bottom:1.5em;
}

.area-warp .headline + p br.pc-none {
  display:none;
}

.area dl {
  width:540px;
  float:left;
  background-color:#fff;
}

.area dl:last-child {
  float:right;
}

.area dt {
  text-align:center;
  color:#fff;
  background-color:#2c77c2;
  padding:0.5em 1em;
}

.area dd {
  padding:1.5em 1.75em;
  text-align:left;
}

.area dd p {
  padding-top:1em;
}

.area dd p:first-child {
  padding-top:0;
}

.area-warp .area-p--end {
  clear:both;
  padding-top:1.5em;
  padding-bottom:1.5em;
}
  
.area-warp .area-p--end br.pc-none {
  display:none;
}

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

@media (max-width:767px) {
  .area-warp .headline + p br.pc-none {
    display:inherit;
  }

  .area dl,
  .area dl:last-child {
    width:100%;
    float:none;
  }

  .area dl:last-child {
    margin-top:1.5em;
  }

  .area dd {
    padding:1.5em;
  }
}

@media (max-width:600px) {
  .area dd {
    padding:1.25em;
  }
  
  .area-warp .area-p--end br.pc-none {
    display:inherit;
  }
}

@media (max-width:500px) {
  .area dd {
    padding:1.25em;
  }
}


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

  検索対策と公開後のアクセスアップ
  
----------------------------------------------------------------------------------------------------*/

.ad-warp .headline br {
  display:none;
}

.ad-box {
  width:525px;
  float:left;
  text-align:center;
}

.ad-box:last-child {
  float:right;
}

.ad-box p {
  text-align:left;
}

.ad-box img {
  margin-top:1em;
  margin-bottom:1em;
}

.ad-box .btn {
  min-width:inherit;
  width:100%;
  margin-top:1.5em;
  z-index:2;
  position:relative;
}

@media (max-width:767px) {
  .ad-box {
    width:47.72727%;
  }
  
  .ad-box img {
    max-width:60%;
  }
}

@media (max-width:640px) {
  .ad-warp .headline br {
    display:inherit;
  }
  
  .ad-warp .headline {
    line-height:1.5;
  }
  
  .ad-box {
    width:100%;
    float:none;
  }
  
  .ad-box:last-child {
    margin-top:2em;
  }

  .ad-box img {
    margin-top:0.75em;
  }
}