/* TopPage Area */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 10px;
    opacity:0.7;
}

#top-image-area{
  background-color:#000;
}
#top-image{
  opacity:0.6;
}

.subtitle{
  text-align:center;
  margin-top:30px;
  margin-bottom:30px;
}

ol{
 list-style-type: decimal;
}
/*画像の上に文字*/
.image_box {/*親div*/
  position: relative;/*相対配置*/
  }

.top-lead {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  font-weight: bold;
  font-size: x-large;
  width: 100%;
  left: 0; 
  top: calc(50% - 25px); 
  text-align: center;
  line-height: 1.5em;
  }
  
.image_box .top_box {
   position: absolute;/*絶対配置*/
   top: 10px;
   right: 5px;
   font-weight: bold;
   line-height: 2.17;
   color: white;
}

.image_box .text_area {
  position: absolute;/*絶対配置*/
  width: 100%;
  margin:0 10px 0 0;
  left: 0; 
  top: 15%; 
  text-align: center;
  font-size:x-large;
  color: #e8ecef;
  }

.image_box .text_note_area {
  position: absolute;/*絶対配置*/
  width: 100%;
  margin: 0 10px 0 0;
  left: 0; 
  top: 40%; 
  text-align: center;
  color: #ffe500;
  }

#div-trial-area{
  background-color:#597CE0;
  height:300px;
}

.image_box .button_area {
  position: absolute;/*絶対配置*/
  width: 100%;
  left: 0; 
  top: 75%; 
  }

.image_box .image_area {
  position: absolute;/*絶対配置*/
  width: 25%;
  left: 10px; 
  top: 170px;
  }

.note {
  z-index:1;
}

.label-freeplan{
  font-size:0.8em;
}

@media screen and (max-width:660px) { 
  #div-trial-area{
    height:400px;
  }
  .label-freeplan{
    font-size:0.6em;
  }
  .image_box .text_note_area {
    top:45%;
  }
  .image_box .image_area {
    top:270px;
  }

}

.flow-arrow{
  width:50px;
  height:50px;
  margin:auto;
  background-image: url('/img/top/arrow.png');
  background-size: contain;
}

.footer_text {
  color: #e8ecef;
  font-size: small;
  width:100%;
}

.footer_logo{
  width:100px;
}

#nav {
  list-style: none;
  overflow: hidden;
}
 
#nav li {
  width: 100px;
  text-align: center;
  float: left;
}
 
#nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

.image_box img {
  width: 100%;
  }
  
  a:link, a:visited, a:hover, a:active {
  color: white;
}

.div-gray-area{
  background-color: #dcdcdc; 
  text-align: center;
  padding : 30px;
}

.div-bule-area{
  background-color: #325DD9; 
  padding : 30px;
/*  text-align: center;*/
}

/* 回り込みを終了する定型表現。 */
/*clearfix*/	
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;	
}
/*画像と文書を並べて表示時する*/
  .inner {     
	float: left ; /*左側に配置する*/
	}
  .inner p{
	float:right;  /*右側に配置する*/
   }
   

.four-col-image{
  height:130px;
}

.list li{
  margin-bottom:15px;
  margin-right:15px;
}

.div-bule-area a{
  color: #e8ecef;
}

.div-bule-area h4{
  color: #e8ecef;
}
.div-bule-area p{
  color: #e8ecef;
  margin-top: 10px;
}

.div-bule-area .image_area{
   position: absolute;/*絶対配置*/
   top: 150px;
   left: 10px;

}
.div-area-center{
  text-align: center;
}
.div-area-center h4{
  margin-left: 5px;
  margin-right: 5px;
}
.div-area-center p{
  margin-left: 5px;
  margin-right: 5px;
}
.div-area-left{
  text-align: left;
  width: 50%;
}
.div-area-right{
  text-align: right;
}
.footer_box  {
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
}

/* Footer */

#footer{
  width:100%;
  margin-top: 30px;
  text-align: center;
  padding: 10px 0 30px;
  background-color: #FAFAFA;
  border: 1px solid #E7E7E7;
  font-size: 12px;
}

#footer .navbar-nav{
  margin: 10px auto;
  list-style: none; 
  text-align: center;
  float: none; 
}

#footer .navbar-nav>li{
  margin:0 10px;
  float: none; 
}

#footer .navbar-nav>li>a {
  color: #777;
}
#footer .navbar-nav>li>a:hover {
  color: #333;
}

.overflow{
  overflow: hidden;
}

/* 料金体系 */
.table-price td, .table-payment td{
  padding:10px;
  vertical-align:middle;
}
.table-price td:first-child{
  background-color:#0c5394;
  color:#fff;
}
.price-large{
  font-size:24px;
}