/*左右余白の指定*/
.m10 {
  margin: 0 10px;
}

.m5 {
  margin: 0 2%;
}

.p5 {
  padding: 5%;
}


/*ゆがんだ円*/

.circle-1 {
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
.circle-2 {
  
  border-radius: 80% 30% 50% 50%/50%;
}
.circle-3 {
  
  border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
}

/*チェックポイント*/


.cp-heading{
  background:rgb(184, 242, 252);
  border-radius: 1em;
  padding:2em auto;
  max-width:150px;
  
}

.rate{
  text-align: center;
  margin-top: 20px;
  color: #333;

}

.rate p{
  font-size: 0.8em;

}

.rate p em{
  font-size: 2.2em;
  font-weight:600 ;
  margin:0 1.1em;
}

/*利用例*/

.seminer_guide{
  width:90%;
  padding:30px auto;
  margin:0 auto;
}

.lone_exsample{
  width:90%;
  padding:30px auto;
  margin:0 auto;
  
}


.sector{
  width:100%;
  padding:25px 36px;
  margin:30px auto;
}

.sector .heading{
  background-color: teal;
  padding:10px 17px;
  margin-bottom: 30px;
  border-radius:8px;
}

.sector .heading h3{
  color:white;
  font-size:28px;

}

/*利用例アイコン*/

.lone_exsample .factor .sector .heading h3::before{
  content: 'Seen';
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   display: inline-block;
  font-size:0.9em;
  font-weight: bold;
  background:white;
  border-radius: 0.2em 0.2em 0 0.2em;
  padding: .05em .31em;
  color:teal;
  margin-right: 20px;
}

/*月額*/

.loan-outline ul{
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content:space-between;
}

.loan-outline ul li {
	padding:1.1em;
}

.loan-outline ul li img{
	width:  100%;
}



.loan-outline ul li .price{
  text-align: center;
  padding-top: 1.5em;
}



.loan-outline ul li .price em{
  padding: 18px 15px 5px 15px;
  font-size:2.2rem;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.loan-outline ul li .price p::before{
  content: '例えば';
  font-family:'Courier New', Courier, monospace;
   display: inline-block;
  font-size:1.1em;
  background:rgb(211, 237, 242);
  border-radius: 2em;
  padding: 1.1em .6em;
  color:teal;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-top:-30px;
  transform: rotate(-20deg) translate(20%,0);
  transform-origin: -50% 50%;
}

.loan-outline ul li .priceFactor{
 border:1px solid #333;
 padding:0.6em;
 border-radius: .2em;


}

.loan-outline ul li .priceFactor p {
    font-size: 0.7em;
}

.loan-outline ul li .paybyPrice {
  color:teal;
  border-radius: 0.2em;
  background-color: #fff;
  text-align: center;
  height:auto;
 
  
  
}

.loan-outline ul li .paybyPrice p {
  font-size: 1.1em;
  font-weight:600;
  letter-spacing: 0.1em;  
  padding:0.1em ;
  text-align: center;

}

.loan-outline ul li .paybyPrice em{
  font-size:3.5em;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  padding:0 0.3em;
 
}




.loan-outline ul li .paybyPrice-start p{
 text-align: right;
 font-size: 0.9em;

}

.loan-outline ul li .paybyPrice-item{
  text-align: right;
  height: 25%;
   
 }

 .loan-outline ul li .paybyPrice-item p{
  display: block;
  font-size:0.7em;
  background:rgb(234, 255, 255);
  border-radius: 0.2em;
  padding: .05em .31em;
  color:rgb(100, 100, 100);
  margin:.2em auto;
 }


/*背景*/

.factor{
  width: 100%;
  padding:30px;
  margin-bottom: 30px;

}

 .seen1 {

	background-image: url("../../img/gardenloan/background-forkids.jpg");
	background-repeat:no-repeat;
	background-size:cover;

}
.seen2 {

	background-image: url("../../img/gardenloan/background-lifestyle.jpg");
	background-repeat:no-repeat;
	background-size:cover;

}
.seen3 {

	background-image: url("../../img/gardenloan/background-kusa.jpg");
	background-repeat:no-repeat;
	background-size:cover;

}
.seen4 {

	background-image: url("../../img/gardenloan/background-privacy.jpg");
	background-repeat:no-repeat;
	background-size:cover;

}


.loan_format{
  width:90%;
  margin:0 auto;
  padding:20px 0;
  text-align: center;
}

.loan_format h4{
  font-weight: 600;
  font-size: 1.2em;
}

.loan_format p{
   padding:0.7em 0;
}

.loan_format div{
  padding:2.5em 0;
}


table {
  border-collapse: collapse;
  margin: 20px auto;
  padding: 30px;
  width: 100%;
  table-layout: fixed;
  color: #000;
}

thead{
  padding: 15px 15px;
  border-bottom: 1px solid #bbb;
  text-align: center;
}

.table_box th {
  padding: 12px 5px;
  border-right: 1px solid #bbb;
  text-align: center;
  vertical-align: middle;
  background-color: aliceblue;
  
  
 
}


th.tb_category {
  width:20%;
  
}



.table_box td {
  padding: 1em 10px 1em 1em;
  border-right: 1px solid #bbb;
  text-align: left;
  
}


table td em{
  padding-right:0.7em;
font-weight: 600;
font-size: 1.1em;
}


table tr {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #bbb;
  width:100%;
 
}

table tr:last-child{
   border-bottom: none
}




table th:last-child,
table td:last-child{
  border: none;
}


.table_box02 .ttitle{
  display:none;
}


.loan_sim .table_box tr td:nth-child(1)
{
  width:20%;
  font-weight: 600;
  text-align: center;
  
}

.loan_sim .table_box tr td
{
  
  text-align: right;
  
}


/*tablet*/
@media all and (max-width: 896px)  {

  .sector .heading h3{
    font-size:20px;
  }
  


  .utility-list li .price p::before{
    
    position:relative;
    top:-20px; 
    left:15px;
   
  }


  .lone_exsample .factor .sector .heading h3::before{
    font-size: 0.7em;
    padding: .04em .23em;
  }



.utility{
  width:90%;
  margin:0 auto;
}

.utility-list {	
  flex-flow:row wrap;
  justify-content: center;
}


.utility-list li{
  min-width: 50%;
}	






  .loan-outline ul li .price em{
    font-size:1.5rem;
    } 
  

    .loan-outline ul li .paybyPrice em{
      font-size:2.7em;
      
     
      
    
    }
    
  

  .loan-outline ul li .paybyPrice-item{
    height: 20%;
   
    
   }



   .loan_format{
    font-size: 0.8em;
  }

   .table_box {
    margin:20px auto;
    width: 90%;
 
  }
  
  thead{
    
    text-align: left;
  }

  table th {
    padding: 5px;

}
  
  table tr {
       padding: 5px;
  
  }
  
  table tr:last-child{
     border-bottom: none
  }
 
  

  
  table th:last-child,
  table td:last-child{
    border: none;
  }

  .loan_mustlist li{
    padding:5px;
    margin: 0px;
       
  }


  


 

}


/*smart phone*/
@media all and (max-width: 480px)  {



  .lone_exsample{
  width:100%;
  padding:10px auto;
  margin:0 auto;
  
}


.sector{
  width:100%;
  padding:25px 15px;
  margin:30px auto;
}

.sector .heading{
  background-color: teal;
  padding:10px 17px;
  margin-bottom: 30px;
  border-radius:8px;
}

.sector .heading h3{
  font-size:22px;

}

.utility{
  width:90%;
  margin:0 auto;
  padding: 0.5em;;
}


.utility-list{
  flex-direction: column;  
}


.utility-list li{
  width:100%;
}

.loan-outline ul{	
  flex-direction: column;
}

.loan-outline ul li{
  width: 100%;
}	


.loan-suport .table_box tr th{
 background-color: aliceblue;
}

.loan-suport .table_box tr th,
.loan-suport .table_box tr td{
  display: block;
  width:100%;
  border-bottom: 1px solid #bbb;
  border-right: none;
}



.loan_sim .table_box tr th,
.loan_sim .table_box tr td{
  display: block;
  width:100%;
  border-bottom: 1px solid #bbb;
  border-right: none;
}

.loan_sim .table_box tr td:nth-child(1)
{
  width:100%;  
}

.loan_sim .table_box td:before{
  content:attr(data-label);
  float: left;
  margin-right:10px;
  
}

.loan_sim .ttitle{
  display: none;
}



}