@charset 'utf-8';
/*
Theme Name: Key-point Original
Theme URI: http://www.key-p.com/
Author: キー・ポイント株式会社
Author URI: http://www.key-p.com/
Description:
Version: 1.5
*/
/* --------------------------------------------------------------
 * @package     KP Web
 * @author      Chihiro Yano
 * @copyright   KEYPOINT.INC
/* --------------------------------------------------------------
 * 0. Reset Style
 * 1. Base Style
 * 2. Layout style
 * 3. Responsive style
 * 4. Button style
 * 5. Table style
 * 9. Common style (共通)
*/

/* -------------------------------
 * 01. Reset Style
/* ------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

:focus {/* remember to define focus styles! */
  outline: 0;
}

body {
  background: #fff;
  line-height: 1;
}

ol, ul { list-style: none; }

table { /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}

blockquote, q { quotes: "" ""; }
a img {
  border: 0;
  vertical-align: top;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}


/* -------------------------------
 * 1. Base Style
/* ------------------------------- */
body {
  color: #333333;
  background-color: #FFF;
  -webkit-font-smoothing: antialiased;
  font: 13px/1.231 proxima-nova, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "MS PGothic", Helvetica, Arial, sans-serif;
}

#header {
  height: 76px;
  background-color: #FFF;
  opacity: 0.9;
  box-shadow: 0px 1px 6px 0.12px rgba(204, 204, 204, 0.6);
}

#footer {
  border-top: 1px #a9cbce solid;
}

.footer-bottom {
  padding: 15px 0px 12px;
  text-align: center;
  border-top: 1px solid  #a9cbce;
  margin-bottom: 70px;
}


.always-free-trial {
  text-align: center;
  padding: 16px 10px;
  background-color: #ffa621;
  position: fixed;
  z-index: 9999999;
  bottom: 0px;
  width: 100%;
  font-size: 1.1rem;
  box-shadow: 0px -2px 2px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 9px -1px -3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 9px 3px -1px rgba(0,0,0,0.6);
  display: block;
}

.always-free-trial img {
  width: 58px;
  height: 54px;
  position: absolute;
  top: -6px;
  margin-left: -50px;
}

.always-free-trial a strong {
  font-weight: 700;
  font-size: 1.2rem;
}


.always-free-trial a {
  text-decoration: underline;
  color: #FFF;
  font-weight: 500;
  cursor: pointer;
}

/* -------------------------------
 * 2. Layout Style
/* ------------------------------- */
.top-bar {
  height: 6px;
  width: 100%;
  background: #ff1e5e;
  background: -moz-linear-gradient(left,  #ff1e5e 0%, #ffce1e 35%, #00ddbc 70%, #00c2d3 100%);
  background: -webkit-linear-gradient(left,  #ff1e5e 0%,#ffce1e 35%,#00ddbc 70%,#00c2d3 100%);
  background: linear-gradient(to right,  #ff1e5e 0%,#ffce1e 35%,#00ddbc 70%,#00c2d3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1e5e', endColorstr='#00c2d3',GradientType=1 );
}

/* start header */
.system-name {
  float: left;
  height: 76px;
}

.system-name img { height: 54px; }
p.sub-title {
  padding-top: 6px;
  padding-left:12px;
  color:#464646;
}

#header h1 {
  margin: 0px;
}

#header #header-nav {
  float: right;
  clear: right;
  height: 70px;
  line-height: 70px;
}

.inner-wrap {
  width: 980px;
  margin: 0 auto;
}

.big-inner-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.inquiry {
  width: 910px !important;
  margin: 0 10px;
}

h4.inquiry-h4 {
  font-weight: bold;
  font-size: 1.2rem;
  padding: 20px 0px;
}

.inquiry dl dt {
  font-weight: bold;
  font-size: 1.0rem;
  margin: 10px 20px;
}

.inquiry dl dd {
  margin: 10px 20px 30px 20px;
  font-size: 1.0rem;
}



#header .inner-wrap #header-nav #nav > ul > li {
  display: inline-block;
  margin-left: 14px;
  vertical-align: middle;
  font-weight: bold;
}
/* end header */

/* start main */
#main {
  background-color: #25c0c8;
  /* clear: both; */
  padding: 20px 0px 40px;
  height: 100%;
  width: 100%;
}

#main h3 {
  color: #e9ff2e;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 10px auto 0px auto;
  text-align: center;
  text-shadow: 0px 2px 0px rgba(45, 164, 175, 0.6);
  /* text-shadow: 1px 0px 3px #ffffff; */
}

#main h2 {
  font-size: 2.2rem;
  color: #FFF;
  margin: 20px auto 30px auto;
  text-align: center;
  text-shadow: 0px 2px 0px rgba(45, 164, 175, 0.6);
}

#main h2 span {
  font-weight: bold;
  font-size: 3.2rem;
}
#main h2 rt {
  font-size: 1.2rem;
}

#main p.commentary {
  text-align: center;
  margin: 0px auto;
  font-size: 1.0rem;
  line-height:1.5;
  color: #FFF;
}
#main ul.troubles {
  text-align: center;
}

#main ul.troubles li {
  display: inline-block;
  margin: 20px 40px 20px 40px;
}

.cycle {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background-color: rgb(92, 204, 214);
  width: 217px;
  height: 217px;
  font-size: 1.2rem;
  color: #FFF;
  font-weight: bold;
  line-height: 200%;
}

/*
.cycle:before {
  content: "";
  position: absolute;
  bottom: -10px; left: 20px;
  margin-left: 0;
  display: block;
  width: 30px;
  height: 30px;
  background-color: rgb(92, 204, 214);
  border-radius: 0 30px 0 30px;
  z-index: -1;
}
*/

/* 202106 main改修 */
#main-s {
  color: #393939;
  width: 100%;
  height: 600px;
  background: url(../images/ws/img-main-bk.svg)no-repeat;
  background-size: 110%;
  background-position: center center;
  display: flex;
  align-items: center;
}

#main-s h2 {
  font-size: 3.8rem;
  font-family: "Noto Sans Display";
  font-weight: 800;
  line-height: 1.3;
}

#main-s .main-inner-wrap {
  width: 1160px;
  margin: 0 auto;
}

#main-s .main-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#main-s img.main-img {
  height: auto;
  width: 55%;
}

#main-s p.commentary {
  margin: 20px 0 40px;
  font-size: 1.0rem;
  line-height:1.5;
}


/* 202106 main改修 end */


/* end main */


/* start title-line */
.title-line {
  border-bottom: 1px solid #0cc6d6;
  margin: 30px 0px 10px;
  box-shadow: 0px 3px 3px -3px rgba(0,0,0,0.3);
}

.title-line h3 {
  padding: 20px;
  text-align: center;
  color: #0cc6d6;
  font-size: 2rem;
  font-weight: bold;
}

/* start problems */
.set_700, .set_400 { display: none; }

.problems {
  width: 780px;
  display: flex;
  justify-content: space-between;
  margin: 40px auto 40px;
  position: relative;
}

.problems section {
  position: relative;
  width: 240px;
  height: 90px;
  padding: 20px 10px;
  box-sizing: border-box;
  border: 3px solid #BCC5C6;
  border-radius: 10px;
}

.problems img {
  width: 80%;
  margin-top: 20px;
}

.problems .inner:first-of-type,
.problems .inner:last-of-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.problems section p {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.4;
}

.problems section.problem-1::before {
  content: "";
  position: absolute;
  top: 65%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.problems section.problem-1::after {
  content: "";
  position: absolute;
  top: 65%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #BCC5C6;
  z-index: 1;
}

.problems section.problem-2::before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 70%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.problems section.problem-2::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 70%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #BCC5C6;
  z-index: 1;
}

.problems section.problem-3::before {
  content: "";
  position: absolute;
  top: 65%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.problems section.problem-3::after {
  content: "";
  position: absolute;
  top: 65%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #BCC5C6;
  z-index: 1;
}

/* start solutions */
.solutions {
  background-color: #F5FDFE;
  padding: 80px 0;
}

.solutions h4 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #676767;
  margin-bottom: 40px;
}

.solutions section {
  text-align: left;
}

.solutions section:nth-of-type(2) {
  padding: 60px 0;
  text-align: right;
}

.solutions section > img {
  width: 23%;
}

.solutions section .text {
  display: inline-block;
  width: 560px;
  padding: 0 0 20px 30px;
  box-sizing: border-box;
  text-align: left;
  vertical-align: top;
}

.solutions section h5 {
  font-size: 0.9rem;
  font-weight: bold;
  width: 120px;
  padding: 5px;
  box-sizing: border-box;
  color: #FFF;
  border-radius: 4px;
  background-color: #0CC6D6;
}

.solutions section h6 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0 15px;
  display: flex;
  align-items: baseline;
}

.solutions section p {
  font-size: 1.0rem;
  line-height: 1.5;
}

/* start abaout */
.about section {
  display: inline-block;
  margin: 20px;
  width: 280px;
  vertical-align: top;
}
.about h4 {
  font-size: 2.6rem;
  margin: 0 auto 20px auto;
  text-align: center;
}

.about section h4 {
  font-size: 1.2rem;
  font-weight: bold;
  color: rgb(51, 51, 51);
  text-align: center;
  height: 50px;
  margin: 0px;
}

.about section h4.spec {
  font-size: 1.2rem;
  font-weight: bold;
  color: rgb(51, 51, 51);
  text-align: center;
  height: auto;
}

.about section p {
  padding: 10px;
  text-align: left;
  font-size: 1.0rem;
  line-height: 1.5;
}

p.overview {
  line-height: 1.5;
  width: 80%;
  min-width: 320px;
  margin: 0 auto 20px auto;
  text-align:center;
  font-size: 1.0rem;
  margin-top: 30px;
}

p.back-blue {
  color: #00C2D3;
  text-align: center;
}

.security section {

}

.about section p.troubles {
  border-width: 1px;
  width: 260px;
  height: 76px;
  display: table-cell;
  vertical-align: middle;
}

.about .about-features h5 {
  font-size: 1.2rem;
  color: #0cc6d6;
  margin: 0px auto 20px auto;
  border-bottom: 1px solid  #0cc6d6;
  padding: 10px 10px;
}

.about .about-features ul {
  padding: 10px 10px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
  list-style-type: disc;
  width: 88%;
}
.about .about-features li {
  color: #ffa621;
}

.about .about-features li span {
  color: #333333;
}

.about-outline {
  width: 100%;
  background-color: #FFF;
  margin-bottom: 20px;
  text-align: center;
  margin: 0 auto;
  max-width: 776px;
}

.about-outline img {
  width:100%;
  max-width: 100%;
  height: auto;
}

.security_pdf{
  font-size: 1.0rem;
  padding-right: 40px;
  text-align: right;
}

/* サービスの仕様を下に */
#plans .service {
  margin: 50px 0px 10px 0px;
}

#plans h4.service-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-align: center;
}

#plans .service section {
  display: inline-block;
  margin: 12px;
  width: 280px;
  vertical-align: top;
  background-color: #ffff;
}

#plans .service section h4.spec {
  font-size: 1.2rem;
  font-weight: bold;
  color: rgb(51, 51, 51);
  text-align: center;
  height: auto;
}

#plans .service section p {
  padding: 10px;
  text-align: left;
  font-size: 1.0rem;
  line-height: 1.5;
}



/* end about */
/* start functions */
.functions h4 {
  font-size: 2.2rem;
  color: rgb(51, 51, 51);
  line-height: 1.2;
  text-align: center;
}

.type-easy .functions-cell {
  width: 300px;
  margin: 30px 40px;
}

.functions-cell {
  display: inline-block;
  width: 260px;
  text-align: left;
  margin: 30px;
  vertical-align: top;
}

.functions-cell .function-img {
  display: inline-block;
  height: 60px;
  margin-left: 5px;
}

.functions-cell h5 {
  display: inline-block;
  font-size: 1.0rem;
  color: rgb(51, 51, 51);
  line-height: 1.5;
  font-weight: bold;
  vertical-align: middle;
}

.functions-cell h5.wrap {
  margin-top: 0px;
}

.functions-cell p {
  margin-top: 20px;
  line-height: 1.8;
}
/* end functions */

/* start contact */
p.read {
  font-size: 0.9rem;
  line-height: 1.6em;
  margin: 2rem 0;
}


table.inquiry-table {
  width: 100%;
}

table.inquiry-table th, table.inquiry-table td {
  padding: 10px 20px;
  font-size: 1.0rem;
}

table.inquiry-table th {
  font-weight: bold;
  width: 25%;
}
table.inquiry-table caption {
  font-weight: bold;
  font-size: 1.2rem;
}


.origin-radio {
  font-size: 1.2rem;
}


.inquiry-contents label {
  font-size: 1.0rem;
}

.inquiry-contents input[type='text'],
.inquiry-contents input[type='email'],
.inquiry-contents input[type='password'],
.inquiry-contents select,
.inquiry-contents textarea
{
  border: 1px solid rgb(0, 194, 211);
  padding: 10px;
  font-size: 1.2rem;
  width: 85%;
}

.privacy-confirm-btn{
  margin-top:20px;
  margin-bottom: 20px;
  padding:10px;
  text-align:center;
  /* background-color:#E3ECEF; */
}

/* checkbox */
.privacy-confirm-btn input[type="checkbox"]
{
    opacity: 0;
}

.privacy-confirm-btn input[type="checkbox"]+label
{
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 30px;
    padding-right: 10px;
    font-size: 1.2rem;
}

.privacy-confirm-btn input[type="checkbox"]+label::before {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    left: 0;
    top: 50%;
    border: 2px solid;
    border-color:  #42acd6;
    background-color: #FFF;

}

.privacy-confirm-btn input[type="checkbox"]:checked+label::after {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 9px;
    margin-top: -7px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color:  #585753;
}

.center {
  margin:0 auto;
}

section.contents {
  padding: 10px;
}

.cd-multi-steps {
  width: 90%;
  padding: 0.5em 1em;
  margin: 1em auto;
  background-color: #edeff0;
  border-radius: .25em;
}

.cd-multi-steps:after {
  clear: both;
  content: "";
  display: table;
}

.cd-multi-steps li {
  display: inline-block;
  float: left;
  margin: 0.5em 0;
}

.cd-multi-steps li:after {
  /* this is the separator between items */
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}

.cd-multi-steps li:last-of-type:after {
  /* hide separator after the last item */
  display: none;
}

.cd-multi-steps li > * {
  /* single step */
  display: inline-block;
  font-size: 12.6px;
  font-size: 0.9rem;
  color: #2c3f4c;
  font-style: normal;
}

.cd-multi-steps li.current > * {
  /* selected step */
  color: #00C2D3;
}

.no-touch .cd-multi-steps a:hover {
  /* steps already visited */
  color: #00C2D3;
}

.cd-multi-steps.custom-separator li:after {
  /* replace the default separator with a custom icon */
  content: '';
  height: 16px;
  width: 16px;
  background: url(../img/cd-custom-separator.svg) no-repeat center center;
  vertical-align: middle;
}

.cd-multi-steps.custom-icons li > *:before {
  /* add a custom icon before each item */
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: .4em;
  margin-top: -2px;
  background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
  vertical-align: middle;
}

.cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *:before {
  /* change custom icon using image sprites */
  background-position: -20px 0;
}

.cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *:before {
  background-position: -40px 0;
}

.cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *:before {
  background-position: -60px 0;
}

.cd-multi-steps.custom-icons li.current:first-of-type > *:before {
  /* change custom icon for the current item */
  background-position: 0 -20px;
}

.cd-multi-steps.custom-icons li.current:nth-of-type(2) > *:before {
  background-position: -20px -20px;
}

.cd-multi-steps.custom-icons li.current:nth-of-type(3) > *:before {
  background-position: -40px -20px;
}

.cd-multi-steps.custom-icons li.current:nth-of-type(4) > *:before {
  background-position: -60px -20px;
}

.cd-multi-steps {
  padding: 0 1.2em;
}

.cd-multi-steps li {
  margin: 1.2em 0;
}

.cd-multi-steps li:after {
  margin: 0 1em;
}

.no-touch .cd-multi-steps.text-center.custom-icons li:first-of-type a:hover:before,
.cd-multi-steps.text-center.custom-icons li.current:first-of-type em:before {
  /* change custom icon using image sprites - hover effect or current item */
  background-position: 0 -40px;
}

.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(2) a:hover:before,
.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(2) em:before {
  background-position: -20px -40px;
}

.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(3) a:hover:before,
.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(3) em:before {
  background-position: -40px -40px;
}

.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(4) a:hover:before,
.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(4) em:before {
  background-position: -60px -40px;
}

.cd-multi-steps {
  /* reset style */
  background-color: transparent;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: -1;
}

.cd-multi-steps li {
  position: relative;
  float: none;
  margin: 0.4em 40px 0.4em 0;
}

.cd-multi-steps li:last-of-type {
  margin-right: 0;
}

.cd-multi-steps li:after {
  /* this is the line connecting 2 adjacent items */
  position: absolute;
  content: '';
  height: 4px;
  background: #edeff0;
  /* reset style */
  margin: 0;
}

.cd-multi-steps li.visited:after {
  background-color: #00C2D3;
}

.cd-multi-steps li > *, .cd-multi-steps li.current > * {
  position: relative;
  color: #2c3f4c;
}

.cd-multi-steps li.current > * {
  border-bottom: 2px solid #00C2D3;
}

.cd-multi-steps.custom-separator li:after {
  /* reset style */
  height: 4px;
  background: #edeff0;
}

.cd-multi-steps.text-center li:after {
  width: 100%;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%) translateX(-1px);
  -ms-transform: translateY(-50%) translateX(-1px);
  -o-transform: translateY(-50%) translateX(-1px);
  transform: translateY(-50%) translateX(-1px);
}

.cd-multi-steps.text-center li > * {
  z-index: 1;
  padding: .6em 1em;
  border-radius: .25em;
  background-color: #edeff0;
}

.no-touch .cd-multi-steps.text-center a:hover {
  background-color: #2c3f4c;
}

.cd-multi-steps.text-center li.current > *,
.cd-multi-steps.text-center li.visited > * {
  color: #ffffff;
  background-color: #00C2D3;
}

.cd-multi-steps.text-center.custom-icons li.visited a:before {
  /* change the custom icon for the visited item - check icon */
  background-position: 0 -60px;
}

.cd-multi-steps.text-top li,
.cd-multi-steps.text-bottom li {
  width: 154px;
  text-align: center;
}

.cd-multi-steps.text-top li:after, .cd-multi-steps.text-bottom li:after {
  /* this is the line connecting 2 adjacent items */
  position: absolute;
  left: 50%;
  /* 40px is the <li> right margin value */
  width: calc(100% + 40px);
}

.cd-multi-steps.text-top li > *:before, .cd-multi-steps.text-bottom li > *:before {
  /* this is the spot indicator */
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #edeff0;
}

.cd-multi-steps.text-top li.visited > *:before,
.cd-multi-steps.text-top li.current > *:before,
.cd-multi-steps.text-bottom li.visited > *:before,
.cd-multi-steps.text-bottom li.current > *:before {
  background-color: #00C2D3;
}

.no-touch .cd-multi-steps.text-top a:hover, .no-touch .cd-multi-steps.text-bottom a:hover {
  color: #00C2D3;
}

.no-touch .cd-multi-steps.text-top a:hover:before, .no-touch .cd-multi-steps.text-bottom a:hover:before {
  -webkit-box-shadow: 0 0 0 3px rgba(150, 192, 61, 0.3);
  box-shadow: 0 0 0 3px rgba(150, 192, 61, 0.3);
}

.cd-multi-steps.text-top li:after {
  /* this is the line connecting 2 adjacent items */
  bottom: 4px;
}

.cd-multi-steps.text-top li > * {
  padding-bottom: 20px;
}

.cd-multi-steps.text-top li > *:before {
  /* this is the spot indicator */
  bottom: 0;
}

.cd-multi-steps.text-bottom li:after {
  /* this is the line connecting 2 adjacent items */
  top: 3px;
}

.cd-multi-steps.text-bottom li > * {
  padding-top: 20px;
}

.cd-multi-steps.text-bottom li > *:before {
  /* this is the spot indicator */
  top: 0;
}

.cd-multi-steps.count li {
  counter-increment: steps;
}

.cd-multi-steps.count li > *:before {
  content: counter(steps) " - ";
}

.cd-multi-steps.text-top.count li > *:before,
.cd-multi-steps.text-bottom.count li > *:before {
  /* this is the spot indicator */
  content: counter(steps);
  height: 26px;
  width: 26px;
  line-height: 26px;
  font-size: 14px;
  font-size: 1rem;
  color: #ffffff;
}

.cd-multi-steps.text-top.count li.current > *:before,
.cd-multi-steps.text-bottom.count li.current > *:before {
  /* this is the spot indicator */
  content: counter(steps);
  height: 26px;
  width: 26px;
  line-height: 26px;
  font-size: 14px;
  font-size: 1rem;
  color: #ffffff;
}

.cd-multi-steps.text-top.count li:not(.current) em:before,
.cd-multi-steps.text-bottom.count li:not(.current) em:before {
  /* steps not visited yet - counter color */
  color: #2c3f4c;
}

.cd-multi-steps.text-top.count li:after {
  bottom: 11px;
}

.cd-multi-steps.text-top.count li > * {
  padding-bottom: 34px;
}

.cd-multi-steps.text-bottom.count li:after {
  top: 11px;
}

.cd-multi-steps.text-bottom.count li > * {
  padding-top: 44px;
}

/* start plans */
#plans section {
  display: inline-block;
  padding: 10px;
  width: 29%;
  vertical-align: top;
  min-width: 280px;
  background-color: #f0f6f7;
  margin: 30px 5px 0px 5px;

}

#plans section .plan-contens {
  background-color: #FFF;
  padding: 14px;
  font-size: 1.0rem;
  vertical-align: middle
}

.plans section h4 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #0cc6d6;
  margin-bottom: 20px;
}

/* small plan */
.small-plan-color {
  color: #0cc6d6;
}

.small-plan-bg {
  background-color: #0cc6d6;
}

/* standard plan */
.standard-plan .plan-contens {
  border: 2px solid #ff1e5e;
}
section.standard-plan h4 {
  color: #ff1e5e;
}
.standard-plan-color {
  color: #ff1e5e;
}
.standard-plan-bg {
  background-color: #ff1e5e;
}

/* premium plan */
section.premium-plan h4 {
  color: #ffa621;
}
.premium-plan-color {
  color: #ffa621;
}
.premium-plan-bg {
  background-color: #ffa621;
}

p.user-capacity {
  border-bottom: 1px solid #a9cbce;
  padding: 10px 0 20px;
}

.price-large { font-size: 2.2rem; }
.price-middle { font-size: 1.6rem; }

.plans .plan-contens table {
  width: 100%;
}

.plans .plan-contens table th,
.plans .plan-contens table td {
  padding: 5px 6px;
}
.plans .plan-contens table th {
  font-size: 0.8rem;
  text-align: right;
}

.plans .plan-contens table td {
  font-size: 1.0rem;
  text-align: center;
}

.plans .plan-contens table td p.good-value {
  font-size: 0.8rem;
  padding: 5px;
  margin-top: 10px;
  color: #FFF;
  font-weight: bold;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  text-align: center;
}

.light-gray { color: #7c7c7c; }
.plan-contens dl.price dt {
  font-size: 1.0rem;
}

.plan-contens dl.price dd {
  font-size: 1.4rem;
  margin-bottom: 20px;
}

div.option-price {
  max-width: 760px;
  width: auto;
  margin: 40px auto;
}

table.option-table {
  font-size: 1.0rem;
  text-align: center;
  width: 100%;
  border-collapse: collapse;
}

table.option-table caption {
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-align: center;
}

table.option-table th,
table.option-table td
{
  padding: 10px;
  background-color: #FFF;
  border: 1px solid #a9cbce;
}

table.option-table th {
  text-align: right;
  font-weight: bold;
  background-color: #b3dadd;
  width: 40%;
}
table.option-table td {
  text-align: center;
}

table.plans-table thead th {
  font-weight: bold;
  font-size: 1.2rem;
}

/* start special gift */
#gift h4.special {
  font-size: 1.5rem;
}

#gift .special span {
  font-size: 2rem;
}

#gift h4.special-big {
  font-size: 5rem;
}

#gift .special-big span {
  font-size: 7rem;
}

#gift p {
  font-size: 1.0rem;
  line-height: 1.5;
  margin: 15px 0px 20px 0px;
}

#gift .gift-caption{
  max-width: 640px;
  width: auto;
}

/* start campaign */
.campaign h4 {
  font-size: 2.6rem;
}

.campaign p {
  margin: 40px auto 20px auto;
  font-size: 1.1rem;
  line-height: 1.5;
}

.campaign dl {
  border-top: 1px dotted #a9cbce;
  font-size: 1.1rem;
  margin: 20px auto 20px auto;
  width: 70%;
  padding: 10px;
}

.campaign dt {
  clear: left;
  float: left;
  width: 30%;
  font-weight: bold;
  padding: 10px;
  text-align: right;
  min-width: 200px;

}
.campaign dd {
  padding: 10px;
  text-align: left;
}
.campaign dd::before {
  content: " : ";
}

/* start footer */

footer h6 {
  font-size: 1.0rem;
  color: rgb(51, 51, 51);
  line-height: 1.5;
  font-weight: bold;
}

.footer-top {
  padding: 20px;
}

ul.footer-menu {
  list-style:none;
}

ul.footer-menu  li {
  display: inline-block;
  padding:18px 28px;
}

ul.mainLink li ul.subLink2{ padding:8px 15px;}


/* -------------------------------
 * 3. Responsive style
/* ------------------------------- */

@media screen and (max-width:960px) {
  .inquiry {
    width: 600px !important;
    margin:0 10px;
  }
}


/*
 * for PC 980px -
 */
@media screen and (max-width:980px)
{
  .inner-wrap { width:auto; margin:0 0px }

  .top-fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 0;
  }

  #main-s {
    height: auto;
    padding: 30px 0 30px;
    background: none;
  }

  #main-s .main-content {
    flex-direction: column;
  }

  .btn-free-trial-big {
    margin: 0 auto 20px;
  }

}

/*
 * for PC 820px - 979px
 */
@media screen and (min-width: 820px) and (max-width: 979px)
{

  #plans section {
    margin-bottom: 10px;
  }
  .top-bar, .inner-wrap, main, section, footer {
    width: auto !important;
  }

  .footer-menu li {
    display: block;
  }
}

/*
 * for smaller than tablet - 819px
 */
@media screen and (max-width: 819px) {
  .cd-multi-steps {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .cd-multi-steps.text-top li, .cd-multi-steps.text-bottom li {
    width: 33%;
  }

  .cd-multi-steps li {
    margin: .4em 0.4em .4em 0;
  }

  .cd-multi-steps.text-top li:after, .cd-multi-steps.text-bottom li:after {
    width: calc(100%);
  }
}

/*
 * for tablet 768px - 819px
 */
@media screen and (min-width: 768px) and (max-width: 819px)
{
  #header {
    height: auto;
  }
  #plans section {
    margin-bottom: 10px;
  }

  .set_700 { display: block; }
  .none_700 { display: none; }

  .problems {
    flex-direction: column;
    align-items: center;
    width: 60%;
  }

  .problems img {
    width: 40%;
    margin: 0 auto;
  }

  .problems section {
    width: 320px;
    margin-bottom: 20px;
  }

  .problems section.problem-1::before {
    bottom: -24px;
    left: 70%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    top: inherit;
    right: inherit;
    margin-top: inherit;
  }

  .problems section.problem-1::after {
    bottom: -30px;
    left: 70%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #BCC5C6;
    top: inherit;
    right: inherit;
    margin-top: inherit;
  }

  .problems section.problem-3::before {
    bottom: -24px;
    left: 70%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    top: inherit;
    right: inherit;
    margin-top: inherit;
  }

  .problems section.problem-3::after {
    bottom: -30px;
    left: 70%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #BCC5C6;
    top: inherit;
    right: inherit;
    margin-top: inherit;
  }

  .solutions section {
    text-align: center !important;
  }
}

/*
 * for tablet 600px - 767px
 */
@media screen and (min-width: 600px) and (max-width: 767px)
{
  #header .inner-wrap #header-nav {
    height: 30px;
  }

  /* お知らせ */
  .news-main dt {float:none !important;}
  .news-main dd {
    padding-top: 7px;
    margin:auto;
    line-height:150%;
  }
  .news-main dl {
    margin:5px auto 15px auto;
    padding: 0;
  }

}
@media screen and (max-width: 524px) {
  /* 項目名改行させる */
  .contents h3 span::before {
    content:"\A";
    white-space: pre;
  }

  .footer-bottom {
    margin-bottom: 90px !important;
  }
  .always-free-trial strong:after {
    content:"\A";
    white-space: pre;
  }
  .inquiry {
    min-width: 320px !important;
    width: auto !important;
    margin: 0px;
  }

  #main-s .main-inner-wrap {
    width: auto;
    padding: 0 10px 0;
  }

  .set_400 {display: block;}

  .security_pdf{
    padding-right: 0px;
    text-align: center;
  }
}

/*
 * for smart phone 300px - 767px
 */
@media screen and (min-width: 300px) and (max-width: 767px)
{
  #header { height: auto; }

  #header .inner-wrap #header-nav {
    float:none;
    clear:both;
    padding-bottom: 1em;
    line-height: 2.8;
  }

  #header .inner-wrap #header-nav ul li {
    margin: 5px 20px 0px 0px;
  }

  #header .Group #globalnav #nav ul li:last-child {
    margin-right:0
  }

  #main h3 {
    font-size: 1.3rem;
  }

  #main h2 {
    font-size: 1.3rem;
  }

  #main h2 span {
    font-size: 2.6rem;
  }

  /* watasoon改行させる */
  #main h2 span::before {
    content:"\A";
    white-space: pre;
  }
  /* 項目名改行させる */
  .contents h3 span::before {
    content:"\A";
    white-space: pre;
  }

  #main p.commentary {
    text-align: left;
  }

  a.btn-free-trial {
    font-size: 0.9rem;
    width: 240px;
    height: 28px;
    line-height: 28px;
    padding: 10px 10px 10px 10px;
    border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
  }
  .btn-free-trial > strong {
    font-size: 1.1rem;
    font-weight: bold;
  }
  .about section {
    width: 90%;
  }
  .about section p {
    width: 100% !important;
  }
  .security section p {
    width: auto !important;
  }
  .about p.back-blue {
    width: 70% !important;
    margin: 0 auto;
  }
  p.overview {
    width: 100%;
    min-width: 240px;
    text-align: left;
  }

  ul.features {
    font-size: 1.0rem !important;
  }

  .plans .plan-list {
    text-align: center;
    margin: 0 auto;
  }
  .plans .plan-list section {
    min-width: 270px !important;
  }

  .plans .plan-contens table th {
    padding: 0px !important;
  }

  .media-break {
    display: block;
  }

  .about h4, .campaign h4 {
    font-size: 1.1rem !important;
  }

  .campaign p {
    text-align: left;
  }

  .campaign h4 img {
    display: none;
  }

  .campaign dl {
    width: auto;
    text-align: center;
  }

  .campaign dl dt, .campaign dl dd {
    float: none;
    text-align: center;
    width: auto;
    padding: 10px 0px;
  }

  .campaign dd::before {
    content: "";
  }

  dd.subject label::after {
    content:"\A";
    white-space: pre;
  }

  dd.subject  {
    line-height: 2;
  }

  .contents h3 {
    font-size: 1.4rem;
    padding: 10px;
  }
  .inquiry-table th,
  .inquiry-table td,
  .inquiry-table caption
  {
    display: block;
    width: auto !important;
  }

  .inquiry section {

  }

  .inquiry-contents input[type='text'],
  .inquiry-contents input[type='email'],
  .inquiry-contents input[type='password'],
  .inquiry-contents select,
  .inquiry-contents textarea
  {
    width: 80% !important;
  }

  .news-main dt {float:none !important;}

  #gift h4.special{
    font-size: 1rem;
  }

  #gift .special span {
    font-size: 1.5rem;
    display: block;
  }

  #gift h4.special-big {
    font-size: 1.8rem;
  }

  #gift .special-big span {
    font-size: 3rem;
  }

  #gift p {
    text-align: left !important;
  }

  #plans .service section {
    width: 90%;
  }
  #plans .service section p {
    width: 100% !important;
  }

  #main-s h2 {
    font-size: 2.8rem;
    font-weight: normal;
  }

  .none_375 {display: none;}

  #main-s img.main-img {
    height: auto;
    width: 80%;
  }

  .none_700 { display: none; }

  .set_400,
  .set_700 {
    display: block;
  }

  .problems {
    display: inherit;
    width: 100%;
  }

  .problems section {
    width: 320px;
    margin-bottom: 20px;
  }

  .problems img {
    width: 40%;
    margin: 0 auto;
  }

  .problems .inner:first-of-type,
  .problems .inner:last-of-type {
    align-items: flex-end;
  }

  .problems section.problem-1::before {
    bottom: -24px;
    left: 70%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    top: inherit;
    right: inherit;
    margin-top: inherit;
  }

  .problems section.problem-1::after {
    bottom: -30px;
    left: 70%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #BCC5C6;
    top: inherit;
    right: inherit;
    margin-top: inherit;
  }

  .problems section.problem-3::before {
    bottom: -24px;
    left: 70%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    top: inherit;
    right: inherit;
    margin-top: inherit;
  }

  .problems section.problem-3::after {
    bottom: -30px;
    left: 70%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #BCC5C6;
    top: inherit;
    right: inherit;
    margin-top: inherit;
  }

  .solutions {
    padding: 40px 0;
  }

  .solutions section {
    text-align: center !important;
  }

  .solutions section:nth-of-type(2) {
    padding: 30px 0;
  }

  .solutions section .text {
    width: 90%;
    padding: 10px 0 30px;
  }

  .solutions section h6 {
    font-size: 1.14rem;
    align-items: center;
  }

  .solutions section > img {
    width: 60%;
  }

}



/* -------------------------------
* 4. Button style
/* ------------------------------- */
/* Links */

a {
  color: #00c2d3;
  text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn-free-trial {
  display: block;
  color: #333;
  font-size: 1.0rem;
  background-image: -moz-linear-gradient( -90deg, rgb(255,255,255) 0%, rgb(241,241,241) 100%);
  background-image: -webkit-linear-gradient( -90deg, rgb(255,255,255) 0%, rgb(241,241,241) 100%);
  background-image: -ms-linear-gradient( -90deg, rgb(255,255,255) 0%, rgb(241,241,241) 100%);
  box-shadow: 0px 5px 3.88px 0.12px rgba(0, 162, 176, 0.34);
  width: 250px;
  height: 64px;
  line-height: 64px;
  border-radius: 32px 32px 32px 32px / 32px 32px 32px 32px;
  -moz-border-radius: 32px 32px 32px 32px / 32px 32px 32px 32px;
  padding-left: 20px;
  padding-right: 20px;

}

.btn-free-trial-big {
  display: block;
  color: #FFF;
  font-size: 1.2rem;
  background-image: linear-gradient(45deg, #00C2D3, #1AE0C3);
  background-image: -webkit-linear-gradient(45deg, #00C2D3, #1AE0C3);
  background-image: -moz-linear-gradient(45deg, #00C2D3, #1AE0C3);
  box-shadow: 1px 1px 6px 2px rgba(0, 162, 176, 0.34);
  width: 330px;
  height: 64px;
  border-radius: 32px;
  font-weight: bold;
  line-height: 64px;
  text-align: center;
}

.btn-free-trial > strong {
  font-size: 1.1rem;
  font-weight: bold;
}

.btn-free-trial:hover {
  text-decoration: none;
  cursor: pointer;
}

.btn-free-trial-big:hover {
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}


.btn {
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 0px none;
  padding: 15px 150px;
  font-weight: bold;
  margin: 0px;
  letter-spacing: 3px;
}

.btn-primary {
  background-color: rgb(0, 194, 211);
  color: #FFF;
}
.btn-primary:hover {
  background-color: #12d6e7;
  color: #FFF;
}

.btn-primary-disable {
  background-color: #acc3c5;
  color: #f0f0f0;
}

.btn-primary-disable:hover {
  text-decoration: none;

}


/* -------------------------------
* 5. Table style
/* ------------------------------- */
/* -------------------------------
* 9. Common style (共通)
   /* ------------------------------- */
a {}

.light-blue {
  background-color: #f0f6f7;
}

/* for font style */
.font-14pt {
  font-size: 1.0rem !important;
}
.font-small {
  font-size: 0.8rem !important;
}

.font-middle {
  font-size: 1.5rem !important;
}

.font-twice {
  font-size: 2.0rem !important;
}

.font-primary {
  color : #00C2D3;
}
.font-danger {
  color : #ff1e5e;
}

.bold {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

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

.cc { text-align: center !important; }
.rr { text-align: right; }
.ll { text-align: left; }
.vt { vertical-align: top; }
.vm { vertical-align: middle; }
.super {
  vertical-align: super;
}
.vb { vertical-align: bottom; }
.f-left  { float: left; }
.f-right { float: right; }

.padding10 { padding: 10px; }

.hide {
  display: none;
}

.error-list ul{
  margin-top:10px;
  color:#EB1111;
  font-size: 1.0rem;
}

.help-inline{
  display:block;
  padding-top: 5px;
  color:#EB1111;
}

.error, .required { color:#EB1111; }
/*
#page {
  margin: 0 auto 40px;
  width: 980px;
}

#page-wf {
  background: url(../images/webfile/bg-head-title.gif) no-repeat top center scroll transparent;
}

#secondary {
  float: right;
  margin-right: 7.6%;
  width: 18.8%;
}

/* Singular */
.singular #primary {
	margin: 0;
}

/* Attachments */
.singular .image-attachment .entry-content {
	margin: 0 auto;
	width: auto;
}
.singular .image-attachment .entry-description {
	margin: 0 auto;
	width: 68.9%;
}

/* Showcase */
.page-template-showcase-php #primary,
.left-sidebar.page-template-showcase-php #primary {
	margin: 0;
}
.page-template-showcase-php #content,
.left-sidebar.page-template-showcase-php #content {
	margin: 0 7.6%;
	width: auto;
}
.page-template-showcase-php section.recent-posts {
	float: right;
	margin: 0 0 0 31%;
	width: 69%;
}
.page-template-showcase-php #main .widget-area {
	float: left;
	margin: 0 -22.15% 0 0;
	width: 22.15%;
}

/* error404 */
.error404 #primary {
	float: none;
	margin: 0;
}
.error404 #primary #content {
	margin: 0 7.6%;
	width: auto;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Right Content */
.left-sidebar #primary {
	float: right;
	margin: 0 0 0 -26.4%;
	width: 100%;
}
.left-sidebar #content {
	margin: 0 7.6% 0 34%;
	width: 58.4%;
}
.left-sidebar #secondary {
	float: left;
	margin-left: 7.6%;
	margin-right: 0;
	width: 18.8%;
}

/* One column */
.one-column #page {
	max-width: 980px;
}
.one-column #content {
	margin: 0 7.6%;
	width: auto;
}
.one-column #nav-below {
	border-bottom: 1px solid #ddd;
	margin-bottom: 1.625em;
}
.one-column #secondary {
	float: none;
	margin: 0 7.6%;
	width: auto;
}
/* Simplify the showcase template */
.one-column .page-template-showcase-php section.recent-posts {
	float: none;
	margin: 0;
	width: 100%;
}
.one-column .page-template-showcase-php #main .widget-area {
	float: none;
	margin: 0;
	width: auto;
}
.one-column .page-template-showcase-php .other-recent-posts {
	border-bottom: 1px solid #ddd;
}
/* Simplify the showcase template when small feature */
.one-column section.featured-post .attachment-small-feature {
	border: none;
	display: block;
	height: auto;
	max-width: 60%;
	position: static;
}
.one-column article.feature-image.small {
	margin: 0 0 1.625em;
	padding: 0;
}
.one-column article.feature-image.small .entry-title {
	font-size: 20px;
	line-height: 1.3em;
}
.one-column article.feature-image.small .entry-summary {
	height: 150px;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
}
.one-column article.feature-image.small .entry-summary a {
	left: -9%;
}
/* Remove the margin on singular articles */
.one-column.singular .entry-header,
.one-column.singular .entry-content,
.one-column.singular footer.entry-meta,
.one-column.singular #comments-title {
	width: 100%;
}
/* Simplify the pullquotes and pull styles */
.one-column.singular blockquote.pull {
	margin: 0 0 1.625em;
}
.one-column.singular .pull.alignleft {
	margin: 0 1.625em 0 0;
}
.one-column.singular .pull.alignright {
	margin: 0 0 0 1.625em;
}
.one-column.singular .entry-meta .edit-link a {
	position: absolute;
	left: 0;
	top: 40px;
}
.one-column.singular #author-info {
	margin: 2.2em -8.8% 0;
	padding: 20px 8.8%;
}
/* Make sure we have room for our comment avatars */
.one-column .commentlist > li.comment {
	margin-left: 102px;
	width: auto;
}
/* Make sure the logo and search form don't collide */
.one-column #branding #searchform {
	right: 40px;
	top: 4em;
}
/* Talking avatars take up too much room at this size */
.one-column .commentlist > li.comment {
	margin-left: 0;
}
.one-column .commentlist > li.comment .comment-meta,
.one-column .commentlist > li.comment .comment-content {
	margin-right: 85px;
}
.one-column .commentlist .avatar {
	background: transparent;
	display: block;
	padding: 0;
	top: 1.625em;
	left: auto;
	right: 1.625em;
}
.one-column .commentlist .children .avatar {
	background: none;
	padding: 0;
	position: absolute;
	top: 2.2em;
	left: 2.2em;
}
.one-column #respond {
	width: auto;
}


/* =Global
----------------------------------------------- */


/* Headings */
h1,h2,h3,h4,h5,h6 {
  clear: both;
}


/* Text elements */
ul { list-style:square inside none; }
ol { list-style-type: decimal; }
ol ol { list-style: upper-alpha; }
ol ol ol { list-style: lower-roman; }
ol ol ol ol { list-style: lower-alpha; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }


/* Forms */
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
textarea {
/*  background: #fafafa;*/
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  border: 1px solid rgb(0, 194, 211);
  color: #303030;
  height: 25px;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
textarea:focus { color: #303030; }

textarea {
padding-left: 3px;
height: 100px;
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number] {
  padding: 3px;
  width:85%;
}



/* Assistive text */
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
#access a.assistive-text:active,
#access a.assistive-text:focus {
	background: #eee;
	border-bottom: 1px solid #ddd;
	color: #1982d1;
	clip: auto !important;
	font-size: 12px;
	position: absolute;
	text-decoration: underline;
	top: 0;
	left: 7.6%;
}


/* ヘッダー
----------------------------------------------- */

#branding {
  position: relative;
  z-index: 9999;
  background:url(../images/webfile/bg-head-top.gif) repeat-x top left #FFFFFF;
}

#branding hgroup {
  width:980px;
  margin:0 auto;
}


#site-title-wf {
  width:212px;
  height:53px;
  background:url(../images/webfile/logo.gif) no-repeat top left;
  text-indent:-9999px;
  margin-bottom:35px;
  float:left;
}

#site-title-wf a {
  color: #111;
  font-size: 30px;
  text-decoration: none;
  display:block;
  width:189px;
  height:62px;
}

.top-link{
  margin-top:10px;
}

#branding img{
  margin-left:-5px;
}

.top-link ul{ list-style:none; }

.top-link li{
  float:left;
  padding-left:18px;
  margin-right:15px;
  font-size:80%;
}

.top-link li a{ color:#838383; }
.top-link li a:hover{ color:#000000; }

li.access{ background:url(images/ico-access.gif) no-repeat top left; }
li.sitemap{ background:url(images/ico-sitemap.gif) no-repeat top left; }
li.privacy{
  background:url(images/ico-privacy.gif) no-repeat top left;
  margin:0px;
}

/* 検索フォーム */
.header-right-area{
  float:right;
}

#searchform {
  text-align: right;
}

#s {
  -webkit-transition-duration: 400ms;
  -webkit-transition-property: width, background;
  -webkit-transition-timing-function: ease;
  -moz-transition-duration: 400ms;
  -moz-transition-property: width, background;
  -moz-transition-timing-function: ease;
  -o-transition-duration: 400ms;
  -o-transition-property: width, background;
  -o-transition-timing-function: ease;
  width: 225px;
  height:17px;
  background-color: #FFFFFF;
}

#s:focus {
  background-color: #F9F9F9;
  width: 225px;
}

#searchsubmit {
  float:right;
  border: 0px;
  width: 86px;
  height: 26px;
  background: url(../images/btn-search.gif) left top no-repeat;
  margin-left:5px;
  cursor: pointer;
}

.only-search #searchform {
  top: 5px;
  z-index: 1;
}

/* メニュー
-------------------------------------------------------------- */

#access ul {
  width:100%;
  list-style:none;
}

.access{ height:50px;}

#access li {
  float: left;
  position: relative;
  border-left:1px solid #DDDDDD;
  padding:5px 18px;
}

#access li a{
  display:block;
  color:#000000;
  font-size:0.9em;
  text-decoration: none;
}

#access a:focus,
#access a:active,
#access a:hover {
  text-decoration: underline;
}

/* アイキャッチ内
-------------------------------------------------------------- */

.eye-catch{
  background: url(../images/webfile/bg-eye.gif) repeat-x scroll top center;
  padding-top:25px;
  padding-bottom:12px;
}

.main-eye{
  background: url(../images/webfile/img-top-eye.png) no-repeat scroll top left;
  width:980px;
  height:161px;
  text-indent:-9999px;
}

.eye-nav ul{ list-style:none;}
.eye-nav ul li{
  float:left;
  text-indent:-9999px;
}

.eye-nav ul li a{
  display:block;
  height:353px;
}

.eye-nav ul li.send a{
  background: url(../images/webfile/btn-naveye-send.png) no-repeat scroll top left;
  width:197px;
}

.eye-nav ul li.collect a{
  background: url(../images/webfile/btn-naveye-collect.png) no-repeat scroll top left;
  width:195px;
}

.eye-nav ul li.share a{
  background: url(../images/webfile/btn-naveye-share.png) no-repeat scroll top left;
  width:195px;
}

.eye-nav ul li.admin a{
  background: url(../images/webfile/btn-naveye-admin.png) no-repeat scroll top left;
  width:195px;
}

.eye-nav ul li.security a{
  background: url(../images/webfile/btn-naveye-security.png) no-repeat scroll top left;
  width:195px;
}


/* トップトピック
----------------------------------------------- */

.top-topic-area{
  margin-top: 20px;
  width: 700px;
}

.topic{
  background: url(../images/webfile/bg-top-topic.gif) no-repeat scroll top left;
/*  width:957px;*/
  width:700px;
  height:151px;
  font-family: "ヒラギノ角ゴ Pro", Helvetica, Arial, sans-serif;
}

.topic-title{
/*  font-size:1.2em;*/
  font-weight:bold;
  color:#535353;
  margin-bottom:10px;
/*  width:680px;*/
  width:430px;
  padding: 38px 0 0 87px;
}

.topic-com-1{
/*  width:520px;*/
  width:310px;
  color:#6D6D6D;
  line-height:140%;
  font-size:0.9em;
  background:url(../images/webfile/img-topic1.gif) no-repeat scroll top left;
  padding-left:125px;
  margin-left:87px;
  height:70px;
}

.topic-com-2{
/*  width:520px;*/
  width:310px;
  color:#6D6D6D;
  line-height:140%;
  font-size:0.9em;
  background:url(../images/webfile/img-topic2.gif) no-repeat scroll top left;
  padding-left:125px;
  margin-left:87px;
  height:70px;
}

.topic-com-3{
  /*  width:520px;*/
  width:310px;
  color:#6D6D6D;
  line-height:140%;
  font-size:0.9em;
  background:url(../images/webfile/img-topic3.gif) no-repeat scroll top left;
  padding-left:125px;
  margin-left:87px;
  height:70px;
}

.topic-link{
  float:right;
  padding-top: 19px;
}

.topic-link a{
  display:block;
  background: url(../images/webfile/btn-topic.gif) no-repeat scroll bottom right;
  width:162px;
  height:132px;
  text-indent:-9999px;
}


/* お知らせ
----------------------------------------------- */

.ws-news{
  margin-top:40px;
  /* padding:0px 7px; */
}

.news-title{
  padding:23px;
  border-top:2px solid #25c0c8;
}

.main-news-title{
  color:#000000;
  font-weight:bold;
  font-size:1.4em;
}

.sub-news-title{
  color:#9C9C9C;
  font-size:0.85em;
  padding-top:3px;
}

.news-main{
  margin-bottom:20px;
  border-top:1px dotted #C6D3C0;
}

.news-main dl{
  border-bottom:1px dotted #C6D3C0;
  padding: 15px 0px 15px 23px;
}

.news-main dt{
  float:left;
  margin-right:15px;
  background:url(../images/webfile/ico-news-ya.gif) no-repeat scroll center right #000000;
  color:#FFFFFF;
  height:26px;
  font-size:0.9em;
  font-family: "ヒラギノ角ゴ Pro", Helvetica, Arial, sans-serif;
}

.date{ padding:7px 20px 0px 7px;}

.news-main dd{
  padding-top:7px;
  text-align: left;
}

p.news-list-button {
  text-align: right;
}


/* 製品概要
----------------------------------------------- */

h2.title-summary{
  background:url(../images/webfile/title-summary.png) no-repeat scroll top left transparent;
  margin-top:38px;
  height:96px;
  text-indent:-9999px;
}

.wf-wrapper{ margin-top:18px;}

.main-wrapper{ padding:0px 25px 15px 25px;}
.main-wrapper2{ padding:0px 10px 15px 10px;}

.pan{
  margin-bottom:6px;
  font-size:0.85em;
  line-height:130%;
}

.com-wrapper{
  margin-top:10px;
}

/* 共通h3タイトル */
h3.title-h3-wf{
  background:url(../images/webfile/title-h3-wf.gif) no-repeat scroll top left transparent;
  width:690px;
  padding:14px 0px 16px 28px;
  font-size:1.1em;
  font-family: "ヒラギノ角ゴ Pro", Helvetica, Arial, sans-serif;
}

/* 詳細を見るボタン */
.detailBtn {
  background: url(../images/webfile/ico-sim-open.gif) no-repeat scroll left center transparent;
  border: 0 none;
  cursor: pointer;
  margin-left: 5px;
  padding-bottom: 1px;
  padding-left: 18px;
}

/* 閉じるボタン */
.closeBtn {
  background: url(../images/webfile/ico-sim-close.gif) no-repeat scroll left center transparent;
  border: 0 none;
  cursor: pointer;
  margin-left: 5px;
  padding-bottom: 1px;
  padding-left: 20px;
}

#detail-1, #detail-2, #detail-3, #detail-4, #detail-5, #detail-6, #detail-7, #detail-8 {
    display: none;
}

ul.sim-step2-ico {
  margin-left: 30px;
  margin-top:5px;
}

ul.sim-step2-ico li{
  margin-bottom:5px;
  line-height:100%;
  list-style: none inside url(../images/webfile/ico-sim-ya.gif);
  color:#4A4A4A;
}

.optionTitle {
  color: #353535;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 3px;
}

/* トータルボタン */
.btn-total {
  margin: 20px auto;
  text-align: center;
}

#total {
  background: url(../images/webfile/btn-sim-result.gif) no-repeat scroll left center transparent;
  border: 0 none;
  cursor: pointer;
  height: 77px;
  width: 208px;
}

/* お見積もり内容 */
.total-area {
  background: url(../images/webfile/bg-sim-tableTop.gif) no-repeat scroll left top transparent;
  width: 530px;
  margin:0 auto;
}

.step {
  border-left: 1px solid #CACACA;
  border-right: 1px solid #CACACA;
}

.total-step {
  padding-top: 45px;
}

ul.total {
  margin: 0px 10px;
  padding: 10px 0px 5px;
}

ul.total li {
  border-bottom: 1px dotted #CCCCCC;
  color: #353535;
  font-size: 0.9em;
  list-style: none outside none;
  min-height: 36px;
  padding:15px 0px 0px  95px;
  font-size:1.1em;
}

ul.total li.to-step1 { background: url(../images/webfile/sim-step1.gif) no-repeat scroll left center transparent;}
ul.total li.to-step2 { background: url(../images/webfile/sim-step2.gif) no-repeat scroll left center transparent;}
ul.total li.to-step3 { background: url(../images/webfile/sim-step3.gif) no-repeat scroll left center transparent;}
ul.total li.nb { border: medium none;}

.total-table table {
  border-collapse: collapse;
  border: solid 1px #CACACA;
  width: 100%;
}

.total-table table th {
  background: url(../images/webfile/bg-sim-tableResult.gif) repeat-x scroll left top #EDEDED;
  border-bottom: 1px dotted #CACACA;
  border-right: 1px dotted #CACACA;
  color: #000000;
  padding: 7px;
  text-align: center;
  width: 50%;
}

.total-table table td {
  border-bottom: 1px dotted #CACACA;
  padding: 7px;
  text-align: right;
}



table.control-group-table{
  width:100%;
  border-collapse:separate;
  font-size:0.9em;
}

table.control-group-table th{
  padding:5px 5px 5px 20px;
  text-align:left;
  white-space:nowrap;
  font-weight:bold;
  font-size:1.3em;
  width:120px;
}

table.control-group-table td{
  padding:12px 10px 10px;
}

table.control-group-table th .required{ color:#EB1111;}

table.control-group-subTable{
  width:100%;
  border-collapse:separate;
}

table.control-group-subTable th{
  color: #373737 !important;
  background: url("../images/webfile/bg-option-th2.gif") repeat-x scroll left top #D8E0E2;
  padding:10px 5px 10px 10px;
  text-align:right;
  white-space:nowrap;
  font-weight:bold;
  width:10%;
}

table.control-group-subTable td{
  padding:8px;
}

table.control-group-subTable td.zipcode input{
  width:50px !important;
}

.privacy-link{
  background:url(../images/ico-privacylink.gif) no-repeat scroll center left #FFFFFF;
  padding-left:25px;
}

.privacy-link:link{
  color:#373737;
  text-decoration: underline;
}
.privacy-link:hover{ text-decoration: none;}

.privacy-wrapper{
  padding:10px;
}

h4.privacy{
  margin-top:30px;
  padding-bottom:5px;
  color:#000000;
  border-bottom:#C6C6C6 1px dotted;
  background-color:#FFFFFF;
}


.privacy-confirm-btn p{
  margin:0px !important;
}

.bnone { border: medium none !important;}

.help-inline{
  display:block;
  padding-top: 5px;
  color:#EB1111;
}


/* 申込み --------------------------------------*/
h2.title-entry2{
  background:url(../images/webfile/title-entry2.png) no-repeat scroll top left transparent;
  margin-top:38px;
  height:96px;
  text-indent:-9999px;
}

.kiyaku{
  border: 1px solid #CECECE;
  height: 200px;
  overflow: scroll;
  padding: 20px;
  width: 635px;
  margin-top:10px;
}

.kiyaku p {line-height:140%;}

.alerm{
  background-color: #FFF5EE;
  border: 1px solid #CC0000;
  color: #CC0000;
  font-weight: bold;
  margin: 20px auto;
  padding: 5px;
  text-align: center;
  line-height:150%;
}
/* =トップメイン
----------------------------------------------- */

h2.title-entry{
  background:url(../images/webfile/title-entry.png) no-repeat scroll top left transparent;
  margin-top:38px;
  height:96px;
  text-indent:-9999px;
}

h2.title-step{
  background:url(../images/webfile/title-step.png) no-repeat scroll top left transparent;
  margin-top:38px;
  height:96px;
  text-indent:-9999px;
}


.debug {
  border: 1px solid #FF0000;
}

/* ctf7 フォーム
----------------------------------------------- */
.wpcf7 input[name="your-url"] {
  width: 30%;
}
.wpcf7 .wpcf7-list-item {
  margin-left: 0;
}

/* checkbox */
.privacy-confirmation-area {
  text-align: center;
  padding-top: 20px;
}

.privacy-confirmation-btn input[type="checkbox"] {
  opacity: 0;
}

.privacy-confirmation-btn input[type="checkbox"] + span {
  cursor: pointer;
  display: flex;
  position: relative;
  font-size: 1.2rem;
  align-content: center;
  align-items: center;
}

.privacy-confirmation-btn input[type="checkbox"] + span::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  left: 0;
  border: 2px solid #42acd6;
  background-color: #FFF;
}

.privacy-confirmation-btn input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 9px;
  margin-top: -7px;
  top: 50%;
  left: 3px;
  transform: rotate(-45deg);
  border-bottom: 3px solid;
  border-left: 3px solid;
  border-color: #585753;
}

.submit-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 2em;
  margin-bottom: 2em;
}

/* [response]のデザイン */
.wpcf7 form.sent .wpcf7-response-output {/* 送信ボタン下完了時 */
  display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {/* 送信ボタン下未入力警告 */
  text-align: center;
  border: none;
  padding: 1em;
  background-color: #F8F8F8;
  color: #EB1111;
}

.wpcf7-not-valid-tip {/* 必須未入力項目下の文章 */
  color: #EB1111;
  font-size: 15px;
  padding-top: 3px;
}

.wpcf7 .required {
  color: #EB1111;
  padding-left: 5px;
}

/* 送信完了メッセージ */
form.sent div.cf7-form-area {
  display: none;
}
.wpcf7 form div.sent-message {
  display: none;
}
.wpcf7 form.sent div.sent-message {
  line-height: 1.5;
  display: block;
  border: none;
  padding: 1.2rem;
  margin: 1rem;
  background-color: #F8F8F8;
}
div.sent-message h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: rgba(36, 124, 167, 1);
}

.button-back {
  display: inline-block;
  background: url(../images/btn-back.gif) no-repeat scroll center left transparent;
  width: 117px;
  height: 38px;
}

.marginTop20{ margin-top:20px;}
/* microcopy added to top page -2024/03/14-
----------------------------------------------- */
.m-copy-add p.m-copy-t { width:70%; text-align:center; color:#232323; font-size:110%; font-weight:bold; letter-spacing:0.02em; padding:0 0 10px; }
.m-copy-add p.m-copy-b { width:70%; text-align:center; color:#232323; font-size:100%; font-weight:normal; padding:2px 0px 0px; margin-top:5px; }
@media (max-width:980px) {
  .m-copy-add p.m-copy-t { width:100%; }
  .m-copy-add p.m-copy-b { width:100%; padding:3px 0px 30px; }
  .m-copy-add a.btn-free-trial-big { margin-bottom:0; }
}
@media screen and (max-width:768px){
    .m-copy-add p.m-copy-t { font-size:130%;}
    .m-copy-add p.m-copy-b { font-size:100%; margin-top:5px; }
}

/*　固定ページ化に伴いメインビジュアルエリアにスタイル追加 */
#main-s .mv-modify .main-content .mv-left { flex-basis:45%; }
#main-s .mv-modify .main-content .mv-left .mv-btn-elem { width:330px; }
#main-s .mv-modify .main-content .mv-left .mv-btn-elem .m-copy-t { width:100%; font-size:110%; text-align:center; font-weight:bold; padding:0 0 10px; }
#main-s .mv-modify .main-content .mv-left .mv-btn-elem .m-copy-b { width:100%; text-align:center; padding:5px 0 0; }
#main-s .mv-modify .main-content .mv-right { flex-basis:55%; }
#main-s .mv-modify .main-content .mv-right img { width:100%; }
.solution-left { display:flex; }
.solution-right { display:flex; justify-content:flex-end; }

p.p-top15 { padding-top:15px; }
@media screen and (max-width: 850px) {
#main-s .mv-modify .main-content .mv-left .mv-btn-elem { width:100%; text-align:center; }
#main-s .mv-modify .main-content .mv-left .mv-btn-elem .m-copy-t { font-size:130%; }
#main-s .mv-modify .main-content .mv-left .mv-btn-elem .btn-free-trial-big { margin-bottom:5px; }
#main-s .mv-modify .main-content .mv-right { width:55%; margin:0 auto; }
.solution-left { display:block; }
.solution-right { display:block; }
}
@media screen and (min-width: 300px) and (max-width: 767px) {
#main-s .mv-modify .main-content .mv-right { width:80%; padding-top:15px; margin:0 auto; }
}