#preview{
    height:250px;
    margin-left: 10px;
}
#canvas-preview {
    top:48px;
}
#preview-textfield{
 color:#505050;
}
#preview-textfield-left{
    position: absolute;
    top: 65px;
    left: 0;
    right: 220;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: black;
    font-family: 'Amaranth', sans-serif;
    color:#505050;
}
#preview-textfield-right{
    position: absolute;
    top: 65px;
    left: 230;
    right: 0;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: black;
    font-family: 'Amaranth', sans-serif;
    color:#505050;
}

.circle-side {
  font-size: 1.0em;
  font-weight: bold;
}
.circle-table tr td {
  padding: 0 !important;
  margin: 0 !important;
}
.card-subtitle {
  font-size: 1.0em;
  font-weight: bold;
}
.card-subtitle-text {
  color: #00559E;
}

.card-detail > div{
  /*padding-left:  0px;*/
  padding-right: 0px;
}
.card-info {
  background: #E5EDF5;
}

.nav-tabs a {
    background-color: #BFD4E7;
    color: #7FA9CE;
}

.nav-tabs .nav-link.active, .nav-tabs .show > .nav-link {
    color: #fff;
    background-color: #00559E;
}


.sidebar_fixed {
  position: sticky;
  /*top: 60px;*/
}
.sidebar_content {
  margin-bottom: 100px;
}
.co-color_m {
   width:100%;
   height:100%;
}

.co-color_m:before,
.co-color_m:after {
  content:"";
  display:block;
  height:2px;
  /*width:100px;*/
  background: -moz-linear-gradient(left, #f00 0%, #00f);
  background: -webkit-linear-gradient(left, #f00 0%, #5f);
  background: linear-gradient(to right, #f00 0%, #00f);
}
.co-color-nav-top {
  border-top: 3px solid;
  border-image: -moz-linear-gradient(left, #f00 0%, #00f);
  border-image: -webkit-linear-gradient(left, #f00 0%, #5f);
  border-image: linear-gradient(to right, #f00 0%, #00f);
  border-image-slice: 1;
}
.co-color-nav-top:before,
.co-color-nav-top:after {
/*
  content:"";
  display:block;
  height:2px;
  border-top-color:-moz-linear-gradient(left, #f00 0%, #00f);
  border-top-color:-webkit-linear-gradient(left, #f00 0%, #5f);
  border-top-color:linear-gradient(to right, #f00 0%, #00f);
  */
}
.co-color {
  width:100%;
  height:100%;
  padding-left: 15px;
}

.co-color:before,
.co-color:after {
  content:"";
  display:block;
  height:2px;
  width:50px;
  background: -moz-linear-gradient(left, #f00 0%, #00f);
  background: -webkit-linear-gradient(left, #f00 0%, #5f);
  background: linear-gradient(to right, #f00 0%, #00f);
}

.step{
  list-style-type: none;
  display:table;
  width:100%;
  padding:0;
  margin:0;
  overflow:hidden;
}
.step li{
  display:table-cell;
  position:relative;
  background: #60bced;
  padding: 0.8em 0.5em 0.8em 1em;
  color: #fff;
}
.step li:last-child{
  padding-right: 1em;
}
.step li:last-child:before,
.step li:last-child:after{
  display:none;
}
.step li:before,
.step li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
}
.step li:before{
  top:-15px;
  right:-1em;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 40px 0 40px 1em;
  z-index: 10;
}
.step li:after{
  top:-15px;
  right:-.8em;
  border-style: solid;
  border-color: transparent transparent transparent #60bced;
  border-width: 40px 0 40px 1em;
  z-index: 10;
}
.step li.is-current{
  background: #010d90;
  font-weight: bold;
}
.step li.is-current:after{
  border-color: transparent transparent transparent #010d90;
}
.card label.radio-text {
  color:#000;
  font-size:1em;
}
.policy {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 200px;
    margin: 10px;

}
.phone-delim {
    margin:0px 10px;

}


.cs_checkbox {
  display: none;
}
.cs_checkbox + .checkbox-icon {
  position: relative;
  vertical-align: middle;
}
.cs_checkbox + .checkbox-icon:before {
  content: "\f372";
  font-family: "Ionicons";
  color: #ccc;
  font-size: 1.25em;
  vertical-align:middle;
}
.cs_checkbox:checked + .checkbox-icon:before {
  content: "\f374";
  color: #17bcdf;
}
.cs_radio {
  width: 0px;
}
.cs_radio + .radio-icon:before {
  content: "\f3a6";
  font-family: "Ionicons";
  color: #ccc;
  font-size: 1.25em;
  vertical-align:middle;
}
.cs_radio:checked + .radio-icon:before {
  content: "\f3a7";
  color: #17bcdf;
}
.title-bg {
  background-color: #00559E; color: #fff
}
a.bt-samp15,
a.bt-samp15:hover,
a.bt-samp15:visited{
  position: relative;
  bottom: -2px;
  display: block;
  height: 22px;
  width: 95px;
  left: 32px;
  font-size: 1.0em;
  padding-left: 1px;
  text-decoration: none;
  line-height: 20px;
  text-align: center;
  border-top:1px solid #6b7688;
  color: #d4d2d2;
  text-shadow: 0px 1px 0px #222;
  color: #f2f1f1;
  border: none;
  border-bottom:1px solid #6b7688;
  background: #3f4551;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f4551), to(#333640));
  background: -moz-linear-gradient(top,  #3f4551,  #333640);
  background: -o-linear-gradient(top,  #3f4551,  #333640);
  background: -ms-linear-gradient(top,  #3f4551,  #333640);
  background: linear-gradient(top,  #3f4551,  #333640);
  -webkit-box-shadow:  0 0 3px #1d1e20 inset;
  -moz-box-shadow:  0 0 3px #1d1e20 inset;
  box-shadow:  0 0 3px #1d1e20 inset;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
a.bt-samp15:hover { /*マウスホバー時*/
  color: #f2f1f1;
  border-top:1px solid #6b7688;
  background: #586170;
  background: -webkit-gradient(linear, left top, left bottom, from(#586170), to(#424551));
  background: -moz-linear-gradient(top,  #586170,  #424551);
  background: -o-linear-gradient(top,  #586170,  #424551);
  background: -ms-linear-gradient(top,  #586170,  #424551);
  background: linear-gradient(top,  #586170,  #424551);
  -webkit-box-shadow:  0 1px 1px #1d1e20;
  -moz-box-shadow:  0 1px 1px #1d1e20;
  box-shadow:  0 1px 1px #1d1e20;
}
a.bt-samp15:active{  /* ボタンを押したとき */
  color: #f2f1f1;
  height: 22px;
  background: #3f4551;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f4551), to(#333640));
  background: -moz-linear-gradient(top,  #3f4551,  #333640);
  background: -o-linear-gradient(top,  #3f4551,  #333640);
  background: -ms-linear-gradient(top,  #3f4551,  #333640);
  background: linear-gradient(top,  #3f4551,  #333640);
}


.tooltip-inner {
  /*
  background: #7abcff;
  background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
  background:    -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
  background:   linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
  */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
  color: #333;
  font-family: 'Roboto', Arial, sans-serif;
  background-color: #FFFFFF;
  border: 1px solid #E20F09;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 6px 6px 0;
    border-top-color: #E20F09;
}
.menulist {
  font-size:0.9rem;
}
.card-header-custom {
  color: #fff;
  background-color: #00559E;
}
.contact-info {
  color:#00559E;
  font-family: 'Helvetica Neue', 'Arial Black', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}


span.btn-c {
  font-size: 1.2rem;
  position: relative;
  color: #00559E;
  width: 100%;
  text-align:left;
  padding: 0rem 0rem 0rem 3.0rem;
}

span.btn-c span {
  font-size: 1.2rem;
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5em;
  padding: 0.2rem 0.2rem;
  border-radius: 4px;
  background: #fff;
}

span.btn-c:before {
  font-family: "Font Awesome 5 Free";
  font-size: 1.8rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - 0.7rem);
  left: 0.8rem;
  margin: 0;
  padding: 0;
  content: "\f87b";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

span.btn-c:hover {
  color: #00559E;
}

span.btn-c:hover:before {
  left: 1.2rem;
}

.circle {
  /*position: relative;*/
  position: absolute;
  top: 33px;
  left: 33px;
  display: inline-block;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: #E5EDF5;
}
.circle-info {
  position: absolute;
  display: inline-block;
  left: 22px;
  /*top: 100%;*/
  font-size: 0.85em;
  -webkit-transform: translateY(-164%);
  transform: translateY(-164%);
  width :155px;
  text-align:center;
  font-family: 'Amaranth', sans-serif;
  color: #000;
  /*font-weight: bold;*/
}

.circle-sp {
  /*position: relative;*/
  position: absolute;
  -webkit-transform: translate(-50%, -129%);
  transform: translate(-50%, -129%);
  display: inline-block;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: #E5EDF5;
}
.circle-info-sp {
  position: absolute;
  display: inline-block;
  /*left: 22px;*/
  /*top: -116px;*/
  font-size: 0.85em;
  -webkit-transform: translate(-51%, -164%);
  transform: translate(-51%, -164%);
  width :155px;
  text-align:center;
  font-family: 'Amaranth', sans-serif;
  color: #000;
  /*font-weight: bold;*/
}


a.btn--termslist {
  color: #fff;
  /*background-color: #eb6100;*/
  background-color: #00559E;
}

a.btn--termslist:hover {
  color: #fff;
  /*background: #f56500;*/
  background-color: #00559E;
}

a.btn-c {
  font-size: 1rem;
  position: relative;
  padding: 1.0rem 2rem 1.0rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}


.btn-wrap-pc-sp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*テスト表示用*/
  /*max-width: 435px;*/
  margin: 0 auto 20px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

a.btn-pc-sp {
  line-height: 1.4;
  width: 49.5%;
  padding: 1.25rem 0;
  color: #ffff;
}
button.btn-pc-sp {
  line-height: 1.0;
  width: 49.5%;
  padding: 0.75rem 0;
  color: #fff;
}
a.btn-pc-sp--contact {
  color: #fff;
  background: #00559E;
}

a.btn-pc-sp--tel {
  color: #fff;
  background: #00559E;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}