.cb{
  /* floatを解除 */
  clear: both;
}

 .bold-brown{
     color:#53382e;
 }
  .bold-brown02{
color:#8d5548
}

.img-m{
margin:20px 0;
}
.box01 {position: relative;
    margin: 3em 0;
    padding: 1em 2em;
    border: solid 3px #83cec1;
    max-width:550px;}
.box01 .box-title {
    position: absolute;
    display: inline-block;
    top: -30px;
    left: -3px;
    padding: 0 9px;
    height: 30px;
    line-height: 30px;
    font-size:1.5em;
    background: #83cec1;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;}  
.toc{
font-size:1.2em;
}    

.congenital{
font-size:1.1em;
}
.congenital li{
padding-top:5px;
}


.box02{position: relative;
    margin: 1em 0;
    padding: 1.5em 3em;
    border: solid 1px #83cec1;
    max-width:500px;}

  /*table  discount*/
.discount table {
 width: 100%;
  max-width:300px;
  margin:3em 0;
  text-align:center;
  padding:10px;
  /*  background: #cccccc;  */
}

.discount th{
padding:1em;
  font-weight: bold;
    font-size: 1.3em;
    margin: 0 ;
    color: #633e35;
    min-width:250px;
    background: #edfca4; 
}
.discount td:first-child{
 width:50%;
 font-size: 1em;
}
.discount td:last-child{
 font-size: 1.2em;
  font-weight: bold;
  color: #53382e;
}

.discount td , .discount tr{
padding:1em;
   border-bottom:solid 1px #f9dc8d;
  
}

  /*table  covenant */
.covenant table {
 width: 100%;
  max-width:600px;
  margin:1em 0;
  padding:10px;
  font-size:1.02em;
}

.covenant  td{
padding:10px 8px;
 border:solid 1px #f9dc8d;
}

.covenant td:first-child{
 width:30%;
  text-align:center;
vertical-align: middle;
    color: #633e35;
    background: #edfca4; 
      font-weight: bold;
    font-size: 1.1em;

}

.p_howto01
{max-width:700px; ;margin:0 auto; padding:1em;
}
.p_howto02
{
max-width:700px; margin:0 auto; padding:1em 2em; border:solid 1px #f9dc8d;
}
.p_howto_title
{
font-size:1.2em;
color: #633e35;
}

.phone{
fill:#835e5e;
}
.web{
fill:#835e5e;
}
.post{
fill:#e02e2e;
}

  /*triangle */

.triangle01{ 
     width: 0;
     height: 0;
     border-top: solid 40px #e8f295;
     border-right: solid 90px transparent;
     border-bottom: solid 40px transparent;
     border-left: solid 90px transparent;
       margin:0 auto;
}
.triangle02{ 
     width: 0;
     height: 0;
     border-top: solid 25px #f9dc8d;
     border-right: solid 30px transparent;
     border-bottom: solid 25px transparent;
     border-left: solid 30px transparent;
       margin:0 auto;
}

/* circle  */
.circle {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #795548;
font-weight: bold;
font-size:1.4em;
background-color: #e6f2a4;
text-align: center;
line-height: 30px;
vertical-align: middle;
margin-right:5px;
margin-bottom:5px;
}

.circle02 {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
     color: #795548;
font-weight: bold;
font-size:13px;
background-color:#f9dc8d;
text-align: center;
line-height: 18px;
vertical-align: middle;
margin-right:5px;
margin-bottom:5px;
}

/* plan  */
.title{
color: #53382e;
font-size: 1.4em; font-weight:700;
border-bottom:1px solid #cccccc;

}
.ins p{
color: #654f4f;
}
.price{
position: relative;
font-size: 1.2em;

}
.price::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 100%;
  height: 5px;
  background-color:#e2fbc0;
}

.p-plan .price::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 100%;
  height: 5px;
  background-color:#ffd3cb;
}

.o-plan .price::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 100%;
  height: 5px;
  background-color:#ffdf91;
}



.ins::after{content: "";
    clear: both;
    display: block;}

.item{
float: left; width:40%; font-size:100%;
padding-left:15px;
padding-bottom:15px;
}
.item02{
padding-left:15px;
width:97%; font-size:105%;
}

.point{
background-color: #e8f295;border-radius: 20px; padding:5px;margin:3px;color: #5c493e;font-weight: 700;

}
.point-u{
background: linear-gradient(transparent 75%, #e8f295 75%);
}
.gr-u{
background: linear-gradient(transparent 73%, #e6f2a2 73%);
}
.po-u{
background: linear-gradient(transparent 73%, #ffd3cb 73%);
}
.or-u{
background: linear-gradient(transparent 73%, #ffdf91 73%);
}

.plan {
border-bottom: solid 1px #dddddd;
padding:0 10px;

}

.plan section{padding:10px 0;}



.gr01{
 background: #bdd77a; /*背景色*/
  padding: 0.8em 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em ;/*角の丸み*/
  margin:0;
  background-size:auto;
  font-size:1.5em;
  font-weight:700;
  }

.gr02{
 background: #a2d62a; /*背景色*/
  padding: 0.8em 0.5em;/*文字周りの余白*/
  color: #ffffff;
  border-radius: 0.5em ;/*角の丸み*/
  margin:0;
    font-size:1.5em;
  font-weight:700;
  }


.po01{
 background: #ffa0b0; /*背景色*/
  padding: 0.8em 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em ;/*角の丸み*/
  margin:0;
  background-size:auto;
  font-size:1.5em;
  font-weight:700;
  }

.po02{
 background: #ff8298; /*背景色*/
  padding: 0.8em 0.5em;/*文字周りの余白*/
  color: #ffffff;/*文字を白に*/
  border-radius: 0.5em ;/*角の丸み*/
  margin:0;
    font-size:1.5em;
  font-weight:700;
  }
  
  .or01{
 background: #ffc14e; /*背景色*/
  padding: 0.8em 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em ;/*角の丸み*/
  margin:0;
  background-size:auto;
  font-size:1.5em;
  font-weight:700;
  }

.or02{
 background: #ffb05b; /*背景色*/
  padding: 0.8em 0.5em;/*文字周りの余白*/
  color: #ffffff;/*文字を白に*/
  border-radius: 0.5em ;/*角の丸み*/
  margin:0;
    font-size:1.5em;
  font-weight:700;
  }

 /* tab  */

.tab-wrap {
  display: flex;
  flex-wrap: wrap;
margin: 0 auto;
  width:95%;
  max-width:600px;
  padding:30px 0;
  
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #e6f2a2;
  display: block;
  order: -1;
}
.tab-label {
  color: #ffffff;
  background: LightGray;
  font-weight: bold;
  font-size:1.2em;
  text-shadow: 0 -1px 0 rgba(96,34,0,0.33);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: DeepSkyBlue;
}
 .tab-switch:checked+.tab-gr{
  background: #bdd77a;
  color: #ffffff;
}
 .tab-switch:checked+.tab-po{
  background: #ffc7cd;
  color: #ffffff;
}
 .tab-switch:checked+.tab-or{
  background:#ffbd6b;
  color: #ffffff;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

/* chart */
.chart01{margin-top:10px;}
.chart01 em{vertical-align: super;}
.chart02{text-align:center;}