@charset "utf-8";
body{
  max-width: 1200px;
  margin: 0 auto;
}
.header{
  padding: 20px 2.5%;
  background: #fff;
}
.header a{
  display: block;
  width: 240px;
}
.FL_contwrap{
  width: calc(100% - 400px - 2.5%);
  margin-right: 400px;
  padding-right: 2.5%;
}
.FL_contwrap .cont_inner{
  padding: 0 2.5%;
}
.Fl_footer{
  width: 100%;
  background: #eee;
  color:#666;
  font-size: 12px;
  padding: 20px 10px;
  box-sizing: border-box;
}
.Fl_footer p{
  margin: 0;
}
.ttl-lv01{
  font-size: 24px;
  font-weight: bold;
  background: #00B2CA;
  color:#fff;
  padding: 10px 16px;
  line-height: 1.4;
  margin:0 0 30px;
}

.ttl-lv02{
  font-size: 20px;
  font-weight: bold;
  color:#00B2CA;
  padding: 8px 0px 10px;
  line-height: 1;
  border-bottom: 2px solid #00B2CA;
  margin:40px 0 20px;
}

.ttl-lv03{
  font-size: 18px;
  font-weight: bold;
  color:#333;
  padding: 8px 0px 10px;
  line-height: 1;
  margin:30px 0 20px;
  border-bottom: 1px dashed #333;
}

.txt{
  margin-bottom: 16px;
  line-height: 1.8;
  font-size: 16px;
  color:#333;
  text-align: justify;
}
.txt.strong{
  color:#F98700;
  font-weight: bold;
  font-size: 18px;
  line-height: 2;
  padding: 10px 0;
}
.txt.bold{
  font-weight: bold;
}
.txtlink{
  display: inline-block;
  font-size: 16px;
  color:#00B2CA;
  text-decoration: underline;
  text-align: justify;
  transition: 0.8s;
}
.txtlink:hover{
  opacity: 0.8;
}
.mv{
  width: 100%;
  margin-bottom: 40px;
}
.img{
  margin: 0 auto 20px;
}
.img a{
  display: block;
  cursor: pointer;
  transition: 0.5s;
}
.img a:hover{
  opacity: 0.8;
}
.img img{
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.img.pc img{
  display: block;
}
.img.sp img{
  display: none;
}
.list01{
  padding: 20px 0 10px;
}
.list01 dd{
  margin:10px 0 20px 0;
}
.list02{
  font-size: 16px;
  line-height: 1.4;
  padding: 0 0px;
  list-style: none;
  margin: 0;
}
.list02 li{
  list-style: none;
  margin-bottom: 16px;
  padding-left: 1em;
  text-indent: -1em;
}
.list02 li::before{
  content: '・';
}
.list02.list02--emphasis {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}
.list02.list02--emphasis > li {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
}
.list02.list02--noMark > li {
  padding-left: 0;
  text-indent: 0;
}
.list02.list02--noMark > li::before {
  content: none;
}
.list02 .list02.list02--emphasis {
  row-gap: 4px;
}
.list02 .list02.list02--emphasis > li {
  color: #F98700;
  font-size: 16px;
  font-weight: normal;
}
.list02 li .list02 {
  margin-top: 16px;
  color: #333333;
  font-weight: normal;
}
.list02 li .list02 li::before {
  content: '✔︎ ';
}
.list02 li .list02 li li::before {
  content: '・';
}

.linkarea{
  background: #fff;
  border: 1px solid #00B2CA;
  border-radius: 5px;
}
.linkarea .lead{
  font-size: 16px;
  font-weight: bold;
  background: #00B2CA;
  color:#fff;
  padding: 20px ;
  margin: 0;
}
.linkarea ul{
  padding: 30px 20px;
  list-style: none;
  margin: 0;
}
.linkarea li{
  list-style: none;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 20px;
  transition: 0.8s;
}
.linkarea li:last-of-type{
  margin-bottom: 0;
}
.linkarea li a{
  color:#00B2CA;
  display: inline-block;
  transition: 0.8s;
}
.linkarea li a:hover{
  opacity: 0.8;
}
/* ガイドラベル用スタイル */
.guideLabel {
  padding: 8px;
  margin-bottom: 16px;
  border: 5px double #fff;
  border-radius: 10px;
  background-color: #00B2CA;
}
.guideLabel .txt {
  margin-bottom: 0;
  color: #fff;
}
.FL_formwrap{
  position: fixed;
  top: 20px;
  right: 0px;
  overflow-y: scroll;
  height: 100%;
  scrollbar-color: #ddd #fff;
}
.scrollwrap{
  width: 400px;
  padding: 30px 30px 20px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eee;
  position: relative;
  z-index: 100;
  /*box-shadow: 0 0 10px #ddd;*/
}
.FL_formwrap .form_ttl{
  font-size: 16px;
  font-weight: bold;
  color:#00B2CA;
  padding: 0px 0px 0px;
  line-height: 1;
  text-align: center;
}
.ss_contents{
  width: 100% !important;
}
.FL_formwrap #ss_header,
.FL_formwrap .navbar,
.breadcrumb,
.FL_formwrap #ss_footer{
  display: none;
}
.FL_formwrap table,
.FL_formwrap tbody,
.FL_formwrap tr,
.FL_formwrap th,
.FL_formwrap td{
  display: block;
}
.FL_formwrap table{
  border: none;
}
.FL_formwrap tr{
  width: 100% !important;
  background: #fff !important;
  border: none;
}
.FL_formwrap th{
  width: 100% !important;
  background: #fff !important;
  border: none;
  padding: 0 0 6px 0;
  font-size: 12px;
}

.FL_formwrap td{
  width: 100% !important;
  background: #fff !important;
  margin-bottom: 16px;
  border: none;
  padding: 0;
}
.FL_formwrap label{
  font-size: 12px;
}

.FL_formwrap .validate2 input{
  width: 60px;
}

.FL_formwrap .ss_input textarea {
  width: 100%;
}

.ss_bottomComment .txtlink{
  font-size: 12px;
}

/*導入事例*/
.introexample{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.introexample .item{
  width: 49%;
  margin-bottom: 15px;
}
.introexample .title{
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  padding: 5px 0;
  border-radius: 0.5em;
  font-weight: bold;
}
.introexample .content{
  border-radius: 0.5em;
  padding: 10px;
  margin-top: 10px;
}
.introexample .comment{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
.introexample .detail{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.introexample .detail .img{
  width: 23%;
  margin: 0;
}
.introexample .detail .img img{
  width: 100%;
  vertical-align: bottom;
}
.introexample .detail .txt{
  width: 73%;
  font-size: 12px;
  list-style: none;
  margin: 0;
  padding: 10px;
  border-radius: 0.5em;
  box-sizing: border-box;
}
.introexample .detail .txt li.allow{
  position: relative;
  margin-bottom: 15px;
}
.introexample .detail .txt li.allow::before{
  content: '';
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
/*長いの設定*/
.introexample .item.long{
  width: 100%;
}
.introexample .item.long .item{
  margin-bottom: 0;
}
.introexample .long_fl{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
/*色設定_01*/
.introexample .item.col_01 .title{
  background-color: #2469B7;
}
.introexample .item.col_01 .comment{
  color: #2469B7;
}
.introexample .item.col_01 .content{
  border: solid 1px #2469B7;
}
.introexample .item.col_01 .detail .txt{
  background-color: #DFECFA;
}
.introexample .item.col_01 .detail .txt li.allow::before{
  border-top: 10px solid #2469B7;
}
/*色設定_02*/
.introexample .item.col_02 .title{
  background-color: #3AB2CA;
}
.introexample .item.col_02 .comment{
  color: #3AB2CA;
}
.introexample .item.col_02 .content{
  border: solid 1px #3AB2CA;
}
.introexample .item.col_02 .detail .txt{
  background-color: #E0FAFF;
}
.introexample .item.col_02 .detail .txt li.allow::before{
  border-top: 10px solid #3AB2CA;
}
/*色設定_03*/
.introexample .item.long.col_03 .title{
  background-color: #3EB4F0;
}
.introexample .item.long.col_03 .comment{
  color: #3EB4F0;
}
.introexample .item.long.col_03 .content{
  border: solid 1px #3EB4F0;
}
.introexample .item.long.col_03 .detail .txt{
  background-color: #E0F5FF;
}
.introexample .item.long.col_03 .detail .txt li.allow::before{
  border-top: 10px solid #3EB4F0;
}
/*色設定_04*/
.introexample .item.long.col_04 .title{
  background-color: #EF8301;
}
.introexample .item.long.col_04 .comment{
  color: #EF8301;
}
.introexample .item.long.col_04 .content{
  border: solid 1px #EF8301;
}
.introexample .item.long.col_04 .detail .txt{
  background-color: #FFF2E2;
}
.introexample .item.long.col_04 .detail .txt li.allow::before{
  border-top: 10px solid #EF8301;
}
/*色設定_05*/
.introexample .item.col_05 .title{
  background-color: #90CB55;
}
.introexample .item.col_05 .comment{
  color: #90CB55;
}
.introexample .item.col_05 .content{
  border: solid 1px #90CB55;
}
.introexample .item.col_05 .detail .txt{
  background-color: #EDFFDB;
}
.introexample .item.col_05 .detail .txt li.allow::before{
  border-top: 10px solid #90CB55;
}
/*色設定_06*/
.introexample .item.col_06 .title{
  background-color: #F778A0;
}
.introexample .item.col_06 .comment{
  color: #F778A0;
}
.introexample .item.col_06 .content{
  border: solid 1px #F778A0;
}
.introexample .item.col_06 .detail .txt{
  background-color: #FFE6EE;
}
.introexample .item.col_06 .detail .txt li.allow::before{
  border-top: 10px solid #F778A0;
}
@media screen and (max-width: 960px) {
  .img.pc img{
    display: none;
  }
  .img.sp img{
    display: block;
  }
  .img{
    width: 100%;
    margin: 0 auto 20px;
  }
  body{
    width: 100%;
    margin: 0 auto;
  }
  .FL_contwrap{
    width: 100%;
    margin-right: 0px;
    padding: 0 2.5%;
    box-sizing: border-box;
  }
  .FL_formwrap{
    position: static;
    box-sizing: border-box;
    margin: 40px auto;
  }
  .scrollwrap{
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
  }
  .ss_input {
    margin-right: 10px;
  }
  .ss_rightComment{
    display: inline-block;
  }
  /*導入事例*/
  .introexample .title{
    font-size: 16px;
  }
  .introexample .comment{
    font-size: 13px;
  }
  .introexample .detail{
    flex-direction: column;
  }
  .introexample .detail .img{
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
  }
  .introexample .detail .img img{
    width: auto;
  }
  .introexample .detail .txt{
    margin-top: 10px;
    width: 100%;
  }
}
@media screen and (max-width: 420px) {
  
  .FL_formwrap {
    width: 95%;
    padding: 40px 10px 20px;
    box-sizing: border-box;
  }
  .FL_formwrap input[type="text"]{
    width: 100%;
  }
  .FL_formwrap .validate2 input[type="text"]{
    width: 60px;
  }
}