@charset "utf-8";
@import url("/css/box-side.css");
@import url("/certificate-authority-security/css/pki-common.css");


.table-lime th {background-color: #C0CA33; color:#222; border: 1px solid #9E9D24; vertical-align: middle;}
.table-lime td {border: 1px solid #C0CA33; vertical-align: middle;}
.table-lime .light {background-color:#F0F4C3;}

.table-blue th {background-color: #1976D2; color:#fff; border: 1px solid #0D47A1; vertical-align: middle;}
.table-blue td {border: 1px solid #1976D2; vertical-align: middle;}
.table-blue .light {background-color:#BBDEFB;}

.table-green th {background-color: #689F38; color:#fff; border: 1px solid #33691E; vertical-align: middle;}
.table-green td {border: 1px solid #689F38; vertical-align: middle;}
.table-green .light {background-color:#DCEDC8;}

.table-emerald th {background-color: #0a8889; color:#fff; border:1px solid #00695C; vertical-align: middle;}
.table-emerald td {border: 1px solid #00695C; vertical-align: middle;}
.table-emerald .light {background-color:#b4e0e0;}

.table-orange th {background-color: #FFA000; color:#222; border: 1px solid #FF6F00; vertical-align: middle;}
.table-orange td {border: 1px solid #FFA000; vertical-align: middle;}
.table-orange .light {background-color:#FFECB3;}

.table-graphite th {background-color: #455A64; color:#fff; border: 1px solid #263238; vertical-align: middle;}
.table-graphite td {border: 1px solid #455A64; vertical-align: middle;}
.table-graphite .light {background-color:#ECEFF1;}


.table-titanium th, .table-titanium td {border-top:none; border-bottom:1px solid #90A4AE; vertical-align: middle;}
.table-titanium th {background-color: #CFD8DC; color:#223;}
.table-titanium tr:first-child {border-top:1px solid #90A4AE;}
.table-titanium .light {background-color:#F8FAFC;}


.table-duotone th.blue {background-color: #1976D2; color:#fff; border: 1px solid #0D47A1; vertical-align: middle;}
.table-duotone th.green {background-color: #689F38; color:#fff; border: 1px solid #33691E; vertical-align: middle;}
.table-duotone td.blue {border: 1px solid #1976D2; vertical-align: middle;}
.table-duotone td.green {border: 1px solid #689F38; vertical-align: middle;}
.table-duotone .light.blue {background-color:#BBDEFB;}
.table-duotone .light.green {background-color:#DCEDC8;}
.table-duotone .none {border: none; background-color:none; vertical-align: middle;}



.text-lime {color:#AFB42B;}
.text-blue {color:#1976D2;}
.text-green {color:#689F38;}
.text-emerald {color:#0a8889;}
.text-orange {color:#FFA000;}
.text-titanium {color:#CFD8DC;}

.bg-lime {background-color:#AFB42B !important;} .bg-limelight {background-color:#F0F4C3 !important;}
.bg-blue {background-color:#1976D2 !important;} .bg-bluelight {background-color:#BBDEFB !important;}
.bg-green {background-color:#689F38 !important;} .bg-greenlight {background-color:#DCEDC8 !important;}
.bg-emerald {background-color:#0a8889 !important;} .bg-emeraldlight {background-color:#b4e0e0 !important;}
.bg-orange {background-color:#FFA000 !important;} .bg-orangelight {background-color:#FFECB3 !important;}
.bg-titanium {background-color:#CFD8DC !important;} .bg-titaniumlight {background-color:#ECEFF1 !important;}

.btn-conversion{ border: 1px solid #b5b5b5; padding:0.5em 1em; background: linear-gradient(to bottom,#fff 0,#f3f3f3 100%);}
.btn-conversion:hover { border: 1px solid #d5d5d5; padding:0.5em 1em; background: linear-gradient(to bottom, #f8f9fa, #dde9f3);}


.col-main h2{
  position: relative;
  margin: 0 0 50px;;
  padding: 0.25em 0 0.25em .5em;
  background-color: #689f38;
  color:#fff;
}


.col-main h3{
  position: relative;
  margin: 20px 0 20px;
  padding: 0 0 0 .5em;
  border-left: 6px solid #689f38;
  color:#689f38;
}




.key-gradation{
  background: linear-gradient(135deg, rgba(25,118,210,1.0) 5%, rgba(10,151,167,1.0) 50%, rgba(124,179,66,1.0) 95%) !important;
}

.light-shadow{filter: drop-shadow(-2px -2px 1px rgba(250, 250, 250, 0.9))
drop-shadow(-1px 2px 1px rgba(250, 250, 250, 0.9))
drop-shadow(2px -1px 1px rgba(250, 250, 250, 0.9))
drop-shadow(2px 2px 1px rgba(250, 250, 250, 0.9));}

.dark-shadow{filter: drop-shadow(-2px -2px 1px rgba(8, 8, 8, 0.9))
drop-shadow(-1px 2px 1px rgba(8, 8, 8, 0.9))
drop-shadow(2px -1px 1px rgba(8, 8, 8, 0.9))
drop-shadow(2px 2px 1px rgba(8, 8, 8, 0.9));}

.product-logo-light{ filter: drop-shadow(0px 0px 3px rgba(240, 240, 240, 0.9));}
.product-logo-dark{ filter: drop-shadow(0px 0px 3px rgba(16, 16, 16, 0.9));}


.basics{
background:linear-gradient(135deg, #c8d8e2, #f8f9fa, #c8d8e2);
}
.gold{
/* background: linear-gradient(135deg,#B67B03, #DAAF08, #FEE9A0, #DAAF08, #B67B03); */
background:linear-gradient(135deg, #cc9900, #ffffcc, #cc9900, #ffffcc, #cc9900);
}
.premiumblack{
background: linear-gradient(135deg, #16222A,#1e3c72, #2a5298,#1e3c72,#16222A);
}

.step_ta_cell{border:1px solid #2d699b;background-color: #fff; padding: 5px 5px; margin: 0px auto; text-align:center;}



.menu1200{width:1200px;max-width:1200px;margin:0 auto;}
.navbar{padding:0.1rem;}
.navbar-brand {
  font-size: 1rem;
}
@media only screen and (max-width: 768px){
  .navbar-brand {
    
  }
}
@media only screen and (max-width: 575px){
  .navbar-brand {
    margin-top: 6px; font-size:14px;
  }
  .navbar-expand-sm .navbar-nav .nav-link {font-size:10.5pt;}
  .nav-link {padding: .3rem 1rem;}
  .sticky-top{position:unset;}
  .navbar-brand-image{width: 20px;
    height: 20px;
    margin-left: 6px;}
}

.navbar-light .navbar-brand {
    color: #1B5E20;
}
.navbar-light .navbar-brand:hover {
    color: #E65100;
}

.ssl_navbar{
  background-color: #DCEDC8 !important;
  border-color: #558B2F;
}
.navbar-expand-sm .navbar-nav .nav-link {padding-right:1rem;}
.navbar-light .navbar-nav .nav-link {color: #1B5E20;}
.navbar-light .navbar-nav .nav-link:hover {color: #E65100;}
.navbar-light .navbar-nav .show>.nav-link {color: #E65100;}
.navbar-light .navbar-nav .nav-link.active {color: #3E2723;}

.navbar .navbar-nav .dropdown-menu {
  background-color: #DCEDC8;
  color:#33691E;
  border-color: #558B2F;
}
.navbar .navbar-text, .navbar .dropdown-item {
  color: #33691E;
}

.ssl_navbar .navbar-nav > li > .dropdown-menu > li > a {
  color: #33691E;
}
.ssl_navbar .dropdown-item:hover{
  color:#E65100;
  background-color:#AED581;
}
.ssl_navbar .dropdown-divider {
  border-top: 1px solid #558B2F;
}
.navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.2);
    margin:0.2rem;
    padding: .15rem .35rem;
    font-size: 1rem;
}

@media only screen and (max-width: 767px){
  .navbar-expand-sm .navbar-nav .nav-link{padding-left: 0.5rem;}
  .dropdown-item {font-size:10pt;}
}

.nav-link.active {font-weight: bold; border-top: 2px solid #E64A19 !important;}

.contents ul.nav-tabs{padding-left: 0 !important}

.toc_inner{border:2px solid #455A64; padding: 5px 10px 0px;}



.header-nav__item--prod > a:after {
  left: 0;
  width: 100%;
}

a.accordion-toggle:after {
    font-family: 'bootstrap-icons';  
    content: "\F2E6";
    float: left; 
}
a.accordion-toggle.collapsed::after {
    content: "\F4FA"; 
}

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform:translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}









.area-ttl {
  background: linear-gradient(to bottom, rgba(49,128,227,0.1) 0%, rgba(111,207,231,0.1) 100%), url(/ssl/img/bg-ttl.jpg) no-repeat 50% 50% !important;
  background-size: cover;
  background-color: #3180e3;
}

.area-ttl__ttl {
  color: #4d7b1f;
  background: url(/ssl/img/secure-icon.svg) no-repeat 50% 0;
  background-size: 34px auto;
  font-family: "UDKakugo_LargePr6N-DB","Hiragino Kaku Gothic ProN";
  font-weight:600;
}

.area-ttl__ttl a {
  color: #4d7b1f !important;
}

.area-ttl__ttl a:hover {
  text-decoration: none !important; 
}


.jumbotron-inner{
 align:left;
 padding:100px 0;
}


.ss-lineup{
  background: url(/ssl/img/lineup-bg.jpg) top center !important;
  background-size: cover !important;
}

.ss-lineup-ev{
  background: url(/ssl/img/lineup-ev-bg.jpg) 20% center !important;
  background-size: cover !important;
}

.ss-lineup-ov{
  background: url(/ssl/img/lineup-ov-bg.jpg) 55% center !important;
  background-size: cover !important;
}

.ss-lineup-md{
  background: url(/ssl/img/614976190.webp) top center !important;
  background-size: cover !important;
}

.ss-lineup-wc{
  background: url(/ssl/img/913259606.webp) top center !important;
  background-size: cover !important;
}

#lineup-home{border-top:1px solid #ccc;border-bottom:1px solid #ccc;}

.sureboard-jumbotron {
  background: url(/ssl/img/head-sureboard.jpg) 50% center !important;
  background-size: cover !important;
}

.surehandson-jumbotron {
  background: url(/ssl/img/head-surehandson.jpg) 50% center !important;
  background-size: cover !important;
}

.sstrial-jumbotron{
    background: url(/ssl/img/961805314.webp) 40% center no-repeat !important;
    background-size: cover;
}

.ss-customer{
  background: url(/ssl/img/customers-voice-bg.jpg) top center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.ss-support{
  background: url(/ssl/img/support-cover.jpg) 50% 30% !important;
  background-size: cover !important;
}

.ss-productinfo{
  background: url(/ssl/img/ss-wave-bg.jpg) center 80% !important;
  background-size: cover !important;
}

.ss-apply{
  background: url(/ssl/img/ss-apply-cover.jpg) 50% 50% !important;
  background-size: cover !important;
}

.ss-renew{
  background: url(/ssl/img/ss-renew-cover.jpg) 50% 50% !important;
  background-size: cover !important;
}

.ss-partners{
  background: url(/ssl/img/ss-partners-cover.jpg) center no-repeat !important;
  background-size: cover !important;
}

.ss-partners-monthly{
  
}

.ss-trial{
  background:linear-gradient(#2E7D32, #8BC34A);
  background:-ms-linear-gradient(top, #2E7D32, #8BC34A); /* IE */
}

.ss-trial-textarea{
  padding:2em;
  color:#fff;
}

.ss-trial-imagearea{
  background: url(/ssl/img/ss-trial-image.jpg) no-repeat 50% 50% !important;
  background-size:cover !important;
  height:300px;
}


.why-ev{
  background:linear-gradient(#2E7D32, #8BC34A);
  background:-ms-linear-gradient(top, #2E7D32, #8BC34A); /* IE */
}

.why-ev-textarea{
  padding:2em;
  color:#fff;
}

.why-ev-imagearea{
  background: url(/ssl/img/https.jpg) no-repeat 50% 50% !important;
  background-size:cover !important;
  height:auto;;
}

.ov-appeal{
  background:linear-gradient(#bfe4f4, #eef2f5);
}

.ov-appeal-textarea{
  padding:2em;
  color:#111;
}

.ov-appeal-imagearea{
  background: url(/ssl/img/https.jpg) no-repeat 50% 50% !important;
  background-size:cover !important;
  min-height:300px;
}



.notice_mute{
  border:1px solid #607D8B; padding: .5rem 1rem; border-radius:5px; background-color:#fff;color:#607D8B;
}

.notice_info{
  border:1px solid #0097A7; padding: .5rem 1rem; border-radius:5px; background-color:#fff; color:#0097A7;
}


.whychoose{
    background: url(/ssl/img/glay-gradation-bg.jpg) no-repeat center 33% !important;
    background-size: cover !important;
    color: #333;
}

.ss-wave{
    background: url(/ssl/img/ss-wave-bg.jpg) no-repeat center bottom !important;
    background-size: cover !important;
    color: #333;
}


.ssl-contact{
  background: #ccc url('/ssl/img/ssl-contact-bg.webp') no-repeat top center !important;
  background-size: cover !important;
}


.download-ca td{
  text-align: center;
  vertical-align: middle;
}

.download-ca .style1{
    background-color: #1976D2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: .75rem;
}

.download-ca .style2{
    background-color: #78909C;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: .75rem;
}

.contents pre{
  background-color:#000;
  color:#fff;
  padding:0.5em;
}

.icon{margin-top:5px;padding:.66667rem;border-radius:.35rem;text-align:center;display:inline-block;color:#fff;font-size:2rem;line-height:1;width:60px}
.icon-round{margin-top:5px;padding-top:0.9rem;border-radius:2rem;text-align:center;display:inline-block;color:#fff;font-size:2rem;line-height:1;width:4rem;height:4rem;}

@media only screen and (max-width: 575px){
  .icon {
    width:48px; font-size:1.5rem;
  }
  .icon-round{width:3rem;height:3rem;border-radius:1.5rem;font-size:1.66rem;padding-top:0.66rem;}
}




.pricing-card-title{
  font-size: 180%;
  color: #17a2b8;
}

.pricing-card-title span{
  font-size: 66%;
  color: #999;
}



.accordion {margin-bottom:1rem;}
.accordion .card-header{padding: .5rem;}
.accordion .card-header .btn-link:hover,  .accordion .card-header .btn-link:focus {text-decoration:none;}


.customlinkcard a .card {border:0;}
.customlinkcard .card-img-overlay{background-color:rgba(32,32,32,0.4);height: 30%; vertical-align: bottom; top: 70%;}

.customlinkcard .card {
    overflow: hidden;
    padding: 0;
    border: none;
    border-radius: .3rem;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.customlinkcard .card:hover{
    box-shadow: 0 1px 5px 3px #E1F5FE, 0 0 0 1px #4FC3F7;
}

.customlinkcard .card-block {
    position: relative;
    margin: 0;
    padding:1em;
    border: none;
    border-top: 1px solid rgba(34, 36, 38, .1);
    box-shadow: none;
}

.customlinkcard .card-block p{
    font-size: 10.5pt;
}


.customlinkcard .card-img-top {
    display: block;
}

@media screen and (-ms-high-contrast: none) {
  .customlinkcard .card {
    display: block;
  }
}





@media screen and (max-width: 640px) {
  .table-sp-vertical th {
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding:0.2rem;
  }
  .table-sp-vertical td {
    display: block;
    width: 100%;
    padding:0.3rem;
  }
}

.glossary-text {font-size:0.9em;}

.text-webscanner-green{color:#006631;}
.text-tooldiag-red{color:#a30100;}

.material-icons.large{font-size: 36px;}
.material-icons.double{font-size: 48px;}


/*** pc-only / sp-only ***/
@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}


/*** side image section : start ***/


.side-image-section {
  position: relative;
  display: table;
  width: 100%;
  margin:0;
  padding:0;
}
.side-image-section-img {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-image: url('');
}
.side-image-section-text{
  background: #fff;
  padding: 120px 3rem 120px;
}
.side-image-section-text img {
  max-width:180px;
}

@media (max-width: 768px){
  .side-image-section-img {
    position: relative;
    height: 400px;
  }
  .side-image-section-text{
    padding: 50px 2rem 50px;
  }
}

@media (max-width: 481px){
  .side-image-section-text img {
    max-width:162px;
  }
}



/*** side image section : end ***/




.position-relative {
  position: relative;
  display: table;
  width: 100%;
}
.side-image {
  position: absolute;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-image: url('/ssl/img/gettyimages-1016201648-2048x2048.jpg');
}
.side-image-text{
  background: #fff;
  padding: 140px 60px 140px;
  float:left;
}


@media (max-width: 768px){
  .side-image {
    position: relative;
    height: 400px;
  }
  .side-image-text{
    padding: 50px 30px 50px;
  }
}

@media (max-width: 481px){
  .variable-side-image img {
    max-width:160px;
  }
}



/*
----------------------------------------------------------- */
/* お申し込み手順
----------------------------------------------------------- */
.order-process {
  padding: 40px 0 0;
}

.order-process__title {
  margin: 0;
  font-size: 35px;
  text-align: center;
}

.order-process__image {
list-style:none; max-width:980px; display:block; margin:1em auto;;
}

.text-order{color:#ca5d6d;}
.text-renew{color:#1976D2;}

.sec-process-first h2 {
  position: relative;

  font-size: 30px;
  text-align: center;
}

.sec-process-first h2:before {
  content: "";
  position: absolute;
  top: 49%;
  right: 0;
  left: 0;
  border-top: 1px solid #ca5d6d;
}

.sec-process-first h2.text-renew:before {
  content: "";
  position: absolute;
  top: 49%;
  right: 0;
  left: 0;
  border-top: 1px solid #1976D2;
}


.sec-process-first h2 span {
  display: inline-block;
  position: relative;
  padding: 0 25px;
  background: #fff;
}

.sec-process-first ul {
  overflow: hidden;
  margin: 0 0 1em;
}

.sec-process-first li {
  float: left;
  width: 25%;
}

.sec-process-first li img {
  max-width: 100%;
  vertical-align: top;
}

.sec-process-step h2 {
  position: relative;

  font-size: 30px;
  text-align: center;
}

.sec-process-step h2 span {
  display: inline-block;
  position: relative;
  margin: 0 0 5px;
  padding: 0 30px 85px;
  color: #818c94;
  font-size: 24px;
}

.sec-process-step.step1 h2 span {
  background: #fafafa url(/ssl/img/img-process-02.png) no-repeat 50% 100%;
}

.sec-process-step.step2 h2 span {
  background: #fff url(/ssl/img/img-process-03.png) no-repeat 50% 100%;
}

.sec-process-step.step3 h2 span {
  background: #fafafa url(/ssl/img/img-process-04.png) no-repeat 50% 100%;
}

.sec-process-step.step4 h2 span {
  background: #fff url(/ssl/img/img-process-05.png) no-repeat 50% 100%;
}

.sec-process-step.renewstep1 h2 span {
  background: #fafafa url(/ssl/img/img-process-icon-01.png) no-repeat 50% 100%;
}

.sec-process-step.renewstep2 h2 span {
  background: #fff url(/ssl/img/img-process-icon-02.png) no-repeat 50% 100%;
}

.sec-process-step.renewstep3 h2 span {
  background: #fafafa url(/ssl/img/img-process-icon-03.png) no-repeat 50% 100%;
}

.sec-process-step.renewstep4 h2 span {
  background: #fff url(/ssl/img/img-process-icon-04.png) no-repeat 50% 100%;
}



.sec-process-step h2:before {
  content: "";
  position: absolute;
  top: 49%;
  right: 0;
  left: 0;
  border-top: 1px solid #ca5d6d;
}

.sec-process-step h2.text-renew:before {
  content: "";
  position: absolute;
  top: 49%;
  right: 0;
  left: 0;
  border-top: 1px solid #1976D2;
}




.sec-process-step-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}

.sec-process-step-txt {
  width: 65%;
}

.sec-process-step-wrap-noimg .sec-process-step-txt {
  width: 100%;
  text-align: center;
}







.sec-process-step-txt .large-button {padding-left:0px;margin: 2em 0;}
.sec-process-step-txt .large-button:last-child { margin-bottom: 0;}

.sec-process-step-txt .large-button li {
  display: inline-block;
  margin: 0 10px 10px 0;
}
.sec-process-step-txt .large-button li:last-child {
  li:last-child
}


.sec-process-step-txt .large-button a {
  display: inline-block;
  padding: 20px 20px 20px 55px;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  background: #2b6ab8 url(/ssl/img/icon-arrow-08.png) no-repeat 20px 50%;
  background-size: 24px;
}

.sec-process-step-img {
  width: 30.61224489795918%;
  margin: 0;
}

.sec-process-issued h2 {
  position: relative;
  color: #ca5d6d;
  font-size: 30px;
  text-align: center;
}

.sec-process-issued h2:before {
  content: "";
  position: absolute;
  top: 49%;
  right: 0;
  left: 0;
  border-top: 1px solid #ca5d6d;
}

.sec-process-issued h2 span {
  display: inline-block;
  position: relative;
  padding: 0 25px;
  background: #f7f7f7;
}

.sec-process-issued ul + p {
  padding: 45px 0 0;
  background: url(/ssl/img/img-process-09.png) no-repeat 50% 0;
}

@media screen and (max-width: 767px) {
  .order-process {
    padding: 30px 0 0;
  }

  .order-process__title {
    margin: 0 15px -15px;
    font-size: 24px;
  }

  .sec-process-first h2 {
    font-size: 20px;
  }

  .sec-process-first h2 span {
    padding: 0 15px;
    font-size: 20px;
  }

  .sec-process-first li {
    float: none;
    width: auto;
    text-align: center;
  }

  .sec-process-step h2 {
    font-size: 20px;
  }
  
  .sec-process-step h2:before {
    top: 60px;
  }

  .sec-process-step h2 span {
    padding: 0 15px 55px;
    color: #818c94;
    font-size: 16px;
    background-size: 50px auto !important;
  }

  .sec-process-step-wrap {
    display: block;
  }

  .sec-process-step-txt {
    width: auto;
  }

  .sec-process-step-txt ul:last-child {
    margin: 1em 0;
  }

  .sec-process-step-txt li {
    display: block;
    margin: 0 0 10px;
    text-align: left;
  }

  .sec-process-step-txt a {
    display: block;
    padding: 10px 10px 10px 45px;
    font-size: 14px;
    background-position: 15px 50%;
    background-size: 20px;
  }

  .sec-process-step-img {
    width: auto;
    margin: 0;
  }

  .sec-process-issued h2 {
    font-size: 20px;
  }

  .sec-process-issued h2 span {
    padding: 0 15px;
    font-size: 20px;
  }

  .sec-process-issued ul + p {
    padding: 35px 0 0;
    background-size: 50px auto;
  }
}


@media screen and (max-width: 600px) {
 .spsize{width:80%;}

}


/* Animation Gradation */

.animation-ttl {
  min-height:320px;
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 3px rgba(16, 16, 16, .5);
  background: linear-gradient(45deg,#002060, #23a6d5);
  background-size: 400% 400%;

  -webkit-animation: animation-ttl 15s ease infinite;
  -moz-animation: animation-ttl 15s ease infinite;
  animation: animation-ttl 15s ease infinite;
}

@-webkit-keyframes animation-ttl {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes animation-ttl {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes animation-ttl {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


.overflow-hidden { overflow: hidden; }


.plusminus a[aria-expanded="false"]:before {
  float:left;
  font-family: 'bootstrap-icons';
  content: "\F4FA";
  margin-right:0.5rem;

}

.plusminus a[aria-expanded="true"]:before {
  float:left;
  font-family: 'bootstrap-icons';
  content: "\F2E6";
  margin-right:0.5rem;

}




dl.powerbox {border: 2px solid #689F38; padding:1em;}
dl.powerbox dt{border-bottom: 1px solid #689F38;}
dl.powerbox dd{padding-top:0.5em;}


ul.none {
  list-style: none;
}
ul.pdf {
  list-style: none;
}
ul.pdf li{text-indent: -1.25rem;}
ul.pdf li:before {
  font-family: 'bootstrap-icons';
  content: '\F63E';
  margin-right: 0.5rem;
}



.contents ul.check {
  list-style: none;
  margin-bottom: 1rem;
  margin-left: -1.5rem;
}
.contents ul.check li:before {
  font-family:'bootstrap-icons';
  content:'\F26D';
  margin-right: 0.5rem;
  color:#558B2F;
}
.contents ul.check li {
  position: relative;
  padding-left: 1.25rem;
  text-indent: -1.25rem;
}

.contents ul.goto {
  list-style: none;
  margin-bottom: 1rem;
  margin-left: -1.5rem;
}
.contents ul.goto li:before {
  font-family:'bootstrap-icons';
  content:'\F134';
  margin-right: 0.5rem;
  color:#558B2F;
}
.contents ul.goto li {
  position: relative;
  padding-left: 1.25rem;
  text-indent: -1.25rem;
}

a.goto{

}
a.goto:before{

  font-family: 'bootstrap-icons';
  content:'\f133';
  margin-right: 0.5rem;
  color:#558B2F;
}



.visualcard-col {
    min-width: 280px;
    margin-bottom:20px;
}

.visualcard-col .card {
    width: 280px;
    height: 380px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-top: none;
    border-left: none;
}
.vc_img{margin-left: 0%; margin-top: 0%; height: 380px;min-height:380px;width:500%;min-width:0}

.visualcard-col .card:hover {

}

.visualcard-col .card>a {

}

.visualcard-col .card .card-subcontent {
    width: 100%;
    display: table;
    position: absolute;
    bottom: 0;
    padding-bottom: 20px;
    height: 260px;
    background: -moz-linear-gradient(bottom,rgba(255,255,255,.9) 62%,rgba(255,255,255,.9) 81%,rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear,bottom,color-stop(.62,rgba(255,255,255,.9)),color-stop(.81,rgba(255,255,255,.9)),color-stop(1,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(bottom,rgba(255,255,255,.9) 62%,rgba(255,255,255,.9) 81%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(bottom,rgba(255,255,255,.9) 62%,rgba(255,255,255,.9) 81%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(bottom,rgba(255,255,255,.9) 62%,rgba(255,255,255,.9) 81%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to top,rgba(255,255,255,.9) 62%,rgba(255,255,255,.9) 81%,rgba(255,255,255,0) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0ffffff',endColorstr='#e6ffffff')";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0ffffff',endColorstr='#e6ffffff');
}

.visualcard-col .card .card-subcontent .card-row {
    position: absolute;
    bottom: 0;
    background: -moz-linear-gradient(bottom,#fff 0%,#fff 80%,rgba(255,255,255,.8) 82%,rgba(255,255,255,.6) 86%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(bottom,#fff 0%,#fff 80%,rgba(255,255,255,.8) 82%,rgba(255,255,255,.6) 86%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to top,#fff 0%,#fff 80%,rgba(255,255,255,.8) 82%,rgba(255,255,255,.6) 86%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#00ffffff',GradientType=0);
}

.visualcard-col .card .card-subcontent .thumbnail {
    margin-bottom: 12px;
}

.visualcard-col .card:hover {
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}




.visualcard-col .card:hover .card-bg-img .thumbnail {
    transform: scale(1.1);
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.visualcard-col .card .card-bg-img .thumbnail {
    transform: scale(1);
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.thumbnail {
    border: none;
    background-color: transparent;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
}

.fill-black {
    fill: black;
    stroke: black;
}
.fill-green {
    fill: #0c8484;
    stroke: #0c8484;
}

.visualcard-header {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    display: block;
    color:#077979;
}
.visualcard-description {
    font-size: 14px;
    font-weight: 400;
    margin: 12px;
    min-height: 80px;
    line-height: 18px;
    max-width: 380px;
    color:#333;
}

.visualcard-col .card .card-subcontent .sectionSeperator {
    position: relative;
    display: block;
    opacity: 0;
    height: 10px;
}
.visualcard-col .card:hover .card-subcontent .sectionSeperator, visualcard-col .card>a:focus .card-subcontent .sectionSeperator {
    opacity: 1;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.center-block>.sectionSeperator>svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}



.pricing-table {
    background-color: #FFFDE7;
}

.pricing-table .block-heading {
    padding-top: 80px;
    margin-bottom: 40px;
    text-align: center;
}

.pricing-table .block-heading h2 {
    color: #3b99e0;
}

.pricing-table .block-heading p {
    text-align: center;
    max-width: 420px;
    margin: auto;
    opacity: 0.7;
}

.pricing-table .item {
    background-color: #ffffff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
    border-top: 2px solid #5ea4f3;
    padding: 30px;
    overflow: hidden;
    position: relative;
}
.pricing-table .col-md-5:not(:last-child) .item {
    margin-bottom: 30px;
}

.pricing-table .heading {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.pricing-table .item p {
    text-align: center;
    margin-top: 20px;
    opacity: 0.7;
}
.pricing-table .features h4 {
    text-align: center;
    font-size: 18px;
    padding: 5px;
}
.pricing-table .features .feature {
    font-weight: 600;
}
.pricing-table .price h4 {
    margin: 15px 0;
    font-size: 45px;
    text-align: center;
    color: #2288f9;
    font-family:'Meiryo';
}

.pricing-table .ribbon {
    width: 160px;
    height: 32px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);
    background: #4dbe3b;
    transform: rotate(45deg);
    position: absolute;
    right: -42px;
    top: 20px;
    padding-top: 7px;
}

/* クロスルート方式とは？ */
.ovsc .ssl_ta td.step01{
	background: url(/ssl/img/step_bg01.png) 3px 14px no-repeat;
	padding-left: 25px;
border-bottom: none !important;
}
.ovsc .ssl_ta td.step02{
	background: url(/ssl/img/step_bg02.png) 10px 0 no-repeat;
	padding-left: 42px;
border-top: none !important;
border-bottom: none !important;
}
.ovsc .ssl_ta td.step03{
	background: url(/ssl/img/step_bg02.png) 28px 0 no-repeat;
	padding-left: 62px;
border-top: none !important;
border-bottom: none !important;
}
.ovsc .ssl_ta td.step03_end{
	background: url(/ssl/img/step_bg03.png) 28px 0 no-repeat;
	padding-left: 62px;
border-top: none !important;
}
.ovsc .ssl_ta td.step04{
	background: url(/ssl/img/step_bg02.png) 46px 0 no-repeat;
	padding-left: 82px;
}
.ovsc .ssl_ta td.step04_end{
	background: url(/ssl/img/step_bg03.png) 46px 0 no-repeat;
	padding-left: 82px;
border-top: none !important;
}
.ovsc .ssl_ta td.step05_end{
	background: url(/ssl/img/step_bg03.png) 64px 0 no-repeat;
	padding-left: 102px;
}

.bcs-result h2{background:none;}
.bcs-modal-header h2{background:none;}
.contents ol.bcs-results {
    padding-left: 0px;
}

#faq-accordion i:before {
  font-family: 'bootstrap-icons';
  content: "\F282";
  font-size:1.25rem;
  font-weight:900;
}

#faq-accordion [aria-expanded="true"] i:before {
  font-family: 'bootstrap-icons';
  content: "\F286";
}

#faq-accordion .card-header:hover{background-color: rgba(10,45,90,.06);}



a#sslineup-collapse[aria-expanded="false"]:after {
  margin-left: .5em;
  font-size:1.25em;
  font-family: 'bootstrap-icons';
  content: '\F282';
  vertical-align: middle;
}

a#sslineup-collapse[aria-expanded="true"]:after {
  margin-left: .5em;
  font-size:1.25em;
  font-family: 'bootstrap-icons';
  content: '\F286';
  vertical-align: middle;
}
.table-lg>:not(caption)>*>* {padding: 1em 0.75em;}
.bcs-container-searchbox {background-color: #fff;}
.bcs-host-div {background-color: unset !important;}