@charset "utf-8";
/* CSS Document */
/*--------------------------------------

　Main Index

---------------------------------------*/
#contents {
 width: 100%;
 margin: 0 auto 0rem;
}
h3:not([class]) {
 font-size: 2.6rem;
 font-weight: bold;
 line-height: 1.4;
 letter-spacing: 0.03em;
 margin: 3rem auto 2rem;
 padding: 1.5rem 3rem 1.2rem;
 border-bottom: 2px solid #FBCA00;
}
h3:not([class]) a {
 display: block;
 background: url("img/arrow_black02.png") no-repeat right 50% / 15px auto;
 padding-right: 2rem;
}
.toc_parts {
 width: 767px;
 margin: 0 auto;
}
#toc  .chapter .chapter-h:first-child {
 display: none;
}
/*--------------------------------------

　visArea TOPページ

---------------------------------------*/
#visArea {
 margin: 0 auto;
 overflow: hidden;
}
#visArea .mainArea {
 background: #fff;
 display: block;
 max-width: 100%;
 height: auto;
 padding: 0 1.5rem;
}
#visArea .mainArea .mainAreaInner {
 max-width: 1350px;
 display: block;
 position: relative;
 z-index: 0;
 margin: 0 auto;
 padding: 0rem 0 6.3rem;
}
#visArea .mainArea .mainAreaInner::after {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 background: url(img/mv.png) no-repeat right center;
 background-size: 100% auto;
 left: 5vw;
 z-index: -1;
 top: -50px;
}
#visArea .mainArea__item {
 margin: 0 auto 0 0;
 width: 840px;
 max-width: 100%;
}
#visArea .mainArea .siteName {
 margin: 0px auto 2rem 5rem;
 text-align: left;
}
#visArea .mainArea .siteName img {
 margin: 0 0 0 25px;
 width: 77px;
}
#visArea .mainArea .mainTxtBox {
 width: 100%;
 padding: 0;
 margin: 0 auto;
}
#visArea .mainArea .mainTxtBox .TxtWrp {
  margin-left: 7.5rem;
  max-width: 680px;
}
#visArea .mainArea .catchArea {
 position: relative;
 z-index: 0;
 padding: 0 0 6rem;
 margin: 0 8% 2.5rem auto;
 background: #0E55B3;
 color: #fff;
}
#visArea .mainArea .catchArea::before {
 content: "";
 position: absolute;
 right: 100%;
 top: 0px;
 width: 100vw;
 height: 100%;
 background: #0E55B3;
}
#visArea .mainArea .catchArea::after {
 content: "";
 width: 100%;
 height: calc(100% - 3.5rem);
 background: url(img/main-text.svg) no-repeat bottom 2.5rem left;
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: -1;
}
#visArea .mainArea .catchArea .catch {
 font-size: 3.6rem;
 font-weight: bold;
 line-height: 1.4;
 text-align: left;
 color: #FBCA00;
 margin: 0 2rem auto 0;
 padding: 1.3rem 0;
 border-bottom: 2px solid #fff;
 letter-spacing: 3px;
}
#visArea .mainArea .catchArea .catch .small {
 color: #fff;
 font-size: 2.2rem;
}
#visArea .mainArea .txtArea {
 max-width: 640px;
}	
}
#visArea .mainArea .txtArea p {
 font-size: 1.4rem;
}
#visArea .btn-internal a {
 font-size: 1.6rem;
 background-image: url(img/arrow_black02-1.png);
 background-position: right 16px center;
 background-size: 7px auto;
}
/*--------------------------------------

オリジナル

---------------------------------------*/
.interviewTitAreaWrap {
 position: relative;
 margin: 5rem 0 9rem;
}
.interviewTitAreaWrap::before {
 content: "";
 position: absolute;
 width: 100%;
 height: 52px;
 background: url(img/benefits.png) no-repeat left bottom / auto 100%;
 top: -52px;
}
.interviewTitAreaWrap .interviewTitArea {
 display: flex;
 position: relative;
 margin: 5rem auto 0;
 border: 2px solid #C7D9FC;
 border-left: none;
}
.interviewTitAreaWrap .interviewTitArea::before {
 content: "";
 position: absolute;
 top: 0;
 right: 100%;
 bottom: 0;
 margin: auto 0;
 width: 9999px;
 border-top: 2px solid #C7D9FC;
 border-bottom: 2px solid #C7D9FC;
 height: 100%;
}
.interviewTitAreaWrap .interviewTitArea::after {
 content: "";
 width: 9999px;
 height: 100%;
 position: absolute;
 top: 20px;
 right: 22px;
 z-index: -1;
 background: #0E55B3;
}
.interviewTitAreaWrap .interviewTitArea .interviewTit {
 width: 46%;
 font-size: 4rem;
 font-weight: bold;
 line-height: 1.3;
 padding: 4.8rem 0;
 position: relative;
 color: #fff;
 box-sizing: border-box;
 letter-spacing: 0.13em;
 font-feature-settings: "palt";
 padding-right: 4rem;
}
.interviewTitAreaWrap .interviewTitArea .interviewTit .small {
 font-size: 3rem;
 display: inline-block;
}
.interviewTitAreaWrap .interviewTitArea .interviewTit a {
 background-image: url("img/arrow_white02.png");
}
.interviewTitAreaWrap .interviewTitArea .interviewTxt {
 font-size: 1.8rem;
 color: #fff;
}
.interviewTitAreaWrap .interviewTitArea .interviewTxt p {
 margin-top: 0;
}
/***** addParts--recommended
---------------------------------------*/
.addParts--recommended .frame--recommended .btn-internal a {
 background-image: url("img/arrow_black02-1.png");
 background-size: auto 17px;
}
/***** addParts01 
---------------------------------------*/
.addParts01 .addParts__title {
 background-image: url("img/addParts__title_about.png");
}
.addParts01 .float-wrap {
 margin: 7rem 0 0;
}
.addParts01 .float-wrap .caption {
 margin: 0 auto 1rem;
 text-align: center;
}
.addParts01 .modal-contents {
 display: none;
}
/***** addParts02 
---------------------------------------*/
.addParts02 {
 background:url("img/index_bg03.jpg") repeat-y center top / 100% auto;
 position: relative;
}
.addParts02::before {
 content: "";
 width: 100%;
 height: 89px;
 background: url(img/indetail.png) no-repeat center top;
 background-size: auto 100%;
 position: absolute;
 left: 0;
 right: 0;
 margin: 0 auto;
 top: 0;
}
.addParts02 .addInner {
 padding-top: 6rem;
}
#index .addParts02 .sttl {
 text-align: center;
 background: none;
 font-size: 4.2rem;
 line-height: 1.45;
 font-weight: bold;
 padding: 0;
 margin: 0 auto 3rem;
 letter-spacing: 0.15em;
 color: #0E55B3;
}
#index .addParts02 .sttl .small {
 display: block;
 border: none;
 font-size: 3rem;
 margin: 0 auto 1rem;
 color: #3B3B3B;
}
/*block*/
.addParts02 .block {
 background-color: #fff;
 padding: 6.2rem 0 7.5rem;
 margin: 0 auto;
 position: relative;
 z-index: 0;
 border: 1px solid #172151;
}
.addParts02 .block + .block {
 margin-top: 12rem;
}
.addParts02 .blockTitArea {
 text-align: center;
 padding: 0 12rem;
 margin: 0 auto 5rem;
}
.addParts02 .blockTitSub {
 font-size: 2.6rem;
 line-height: 1.5;
 text-align: center;
 margin: 0 auto 3rem;
 display: inline-block;
 font-weight: bold;
 padding: 1.5rem 3.2rem;
 position: relative;
 background: #0E55B3;
 border-radius: 8px;
 color: #fff;
 min-width: 598px;
}
.addParts02 .blockTitSub::before {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 top: 9px;
 left: 11px;
 z-index: -1;
 border-radius: 8px;
 border: 1px solid #000;
}
.addParts02 .blockTitSub::after {
 content: "";
 width: 30px;
 height: 12px;
 background: url(img/detail_catch_deco.png) no-repeat;
 background-size: contain;
 position: absolute;
 bottom: -21px;
 left: 0;
 right: 0;
 margin: 0 auto;
}
#index .addParts02 .blockTit {
 display: block;
 font-size: 3.2rem;
 font-weight: bold;
 line-height: 1.5;
 text-align: center;
 padding: 0;
 position: relative;
}
#index .addParts02 .blockTit span {
 border: none;
 display: inline;
 color: inherit;
 font-weight: inherit;
 background: linear-gradient(transparent 75%, rgb(234 187 4) 75%);
}
#index .addParts02 table th {
 background-color: #E6E6E6;
}
.addParts02 .block__item {
 margin: 4rem 0;
 padding: 4.2rem 8.6rem;
 background: url("img/block__item_feature.png") no-repeat left top;
}
.addParts02 .block__item--voices { background-image: url("img/block__item_example.png"); }
.addParts02 .block__item--performance { background-image: url("img/block__item_function.png"); }
.addParts02 .block__item--int { background-image: url("img/block__item_integration.png"); }
.addParts02 .block__item--info { background-image: url("img/block__item_information.png"); }
.addParts02 .block__item__title {
 text-align: center;
 font-size: 2.8rem;
 line-height: 1.4;
 font-weight: bold;
 margin: 0 auto 3rem;
}
.addParts02 .block__item--price {
 overflow: hidden;
 background: none;
}
.addParts02 .block__item--price .thum {
 width: 486px;
 float: left;
 text-align: center;
}
.addParts02 .block__item--price .text {
 width: 386px;
 float: right;
}
#index .addParts02 .block__item--price .text table {
 margin: 0 0 1rem;
}
#index .addParts02 .block__item--price .text table th {
 width: 178px;
}
#index .addParts02 .block__item--price .text .note {
 font-size: 1.4rem;
}
.addParts02 .lightBox {
 background-color: #F7F7F7;
 padding: 4rem 3rem 2.5rem;
 border-top: 52px solid #fff;
 position: relative;
}
.addParts02 .lightBox::before {
 content: "";
 width: 92px;
 height: 73px;
 background: url("img/icon01-1.png") no-repeat center top / 100% auto;
 position: absolute;
 left: 27px;
 top: -52px;
}
.addParts02 .lightBoxWrap .lightBox:nth-child(2)::before { background-image: url("img/icon01-2.png"); }
.addParts02 .lightBoxWrap .lightBox:nth-child(3)::before { background-image: url("img/icon01-3.png"); }
.addParts02 .lightBox + .lightBox {
 margin-top: 3rem;
}
.addParts02 .lightBox .catch {
 font-size: 1.8rem;
 font-weight: bold;
 margin: 0 0 2rem;
}
.addParts02 .personBox {
 border: #3B3B3B solid 1px;
 padding: 3.5rem 2.7rem;
 display: table;
 width: 100%;
}
.addParts02 .personBox + .personBox {
 margin-top: 4.5rem;
}
.addParts02 .personBox .pic {
 display: table-cell;
 vertical-align: middle;
 width: 10.9rem;
 padding-right: 1.4rem;
}
.addParts02 .personBox dl {
 display: table-cell;
 vertical-align: middle;
}
.addParts02 .personBox dl dt {
 font-size: 1.8rem;
 font-weight: bold;
 line-height: 1.4;
 color: #3B3B3B;
 margin: 0 0 2rem;
}
.addParts02 .personBox .caption {
 text-align: right;
}
.addParts02 .block__item--int ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 padding: 0;
 margin: 0;
}
.addParts02 .block__item--int ul li {
 width: 48%;
}
#index .addParts02 .block__item--info table {
 margin: 0;
}
.addParts02 .block__item--performance .icoArea {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 padding: 0 13.3rem;
}
.addParts02 .icoArea .icoArea__item {
 width: 155px;
 margin: 3rem 3rem 0;
 position: relative;
}
.addParts02 .icoArea .icoArea__item .block__modal-contents {
 display: none;
 position: absolute;
 bottom: 185px;
 left: 0;
 background: #8D8D8D;
 width: 308px;
 border: 2px solid #f3f3f3;
 border-radius: 10px;
 padding: 2rem 2.4rem 2.2rem;
 text-align: left;
 color: #fff;
 font-size: 1.6rem;
 line-height: 1.6875; 
}
.addParts02 .icoArea .icoArea__item .icoTtl a {
 text-decoration: none;
 display: block;
 font-weight: bold;
}
.addParts02 .icoArea .icoArea__item .icoTtl {
 text-align: center;
 margin: 0 auto 2rem;
 height: 165px;
 padding: 11.8rem 0.5rem 0;
 color: #0E55B3;
 font-size: 1.8rem;
 font-weight: normal;
 background: url("img/parts01.png") no-repeat center top / 100% auto;
 position: relative;
 cursor: pointer;
}
.addParts02 .icoArea .icoArea__item:nth-child(2) .icoTtl { background-image: url("img/parts02.png"); }
.addParts02 .icoArea .icoArea__item:nth-child(3) .icoTtl { background-image: url("img/parts03.png"); }
.addParts02 .icoArea .icoArea__item:nth-child(4) .icoTtl { background-image: url("img/parts04.png"); }
.addParts02 .icoArea .icoArea__item:nth-child(5) .icoTtl { background-image: url("img/parts05.png"); }
.addParts02 .icoArea .icoArea__item:nth-child(6) .icoTtl { background-image: url("img/parts06.png"); }
.addParts02 .icoArea .icoArea__item .icoTtl::after {
 width: 21px;
 height: 24px;
 content: "";
 position: absolute;
 background: url(img/q-icon.png) center no-repeat;
 bottom: 0;
 right: 0;
 margin: auto;
}
@media screen and (min-width: 480px) {
 .addParts02 .icoArea .icoArea__item .icoTtl a { pointer-events: none; }
 .addParts02 .icoArea .icoArea__item .icoTtl a:hover { opacity: 1; }
 .addParts02 .icoArea .icoArea__item:hover .icoTtl::after {
  background-image: url("img/hover-q-icon.png");
 }
}
/***** addParts03 
---------------------------------------*/
/***** addParts04
---------------------------------------*/
.addParts04 {
 background: url("img/index_bg01.png") no-repeat right 0 top 100%;
}
.addParts04 .interviewTitAreaWrap .interviewTitArea .interviewTit {
 width: auto;
 padding-right: 4.5rem;
}
.addParts04 .box-wrap .box {
 background-color: transparent;
}
/***** addParts05 
---------------------------------------*/
.addParts05 .addInner {
 padding-top: 0;
}
.addParts05 .addParts__title {
 background-image: url("img/addParts__title_flow.png");
}
/***** addParts06 
---------------------------------------*/
.addParts06 .interviewTitAreaWrap .interviewTitArea .interviewTit {
 width: 100%;
}
.addParts06 {
 background: url("img/index_bg02.png") no-repeat right 0 top 87%;
}
.addParts06 .interviewTitAreaWrap::before {
 background-image: url("img/choose.png");
}
.addParts06 .float-wrap .fl {
 width: 346px;
}
.float-wrap + h3 {
 margin-top: 8rem;
}
/***** addParts07 
---------------------------------------*/
.addParts07 .addParts__title {
 background-image: url("img/addParts__title_standard.png");
}
/***** addParts08 
---------------------------------------*/
.addParts08 {
 background-color: #F1F4FF;
}
.addParts08 .addParts__title {
 background-image: url("img/addParts__title_report.png");
}
.addParts08 .addParts__title::after {
 background-color: #e4e9ff;
}
.addParts08 .float-wrap {
 width: 860px;
}
/***** addParts09 
---------------------------------------*/
.addParts09 .addParts__title {
 background-image: url("img/addParts__title_basic.png");
}
/***** addParts10 
---------------------------------------*/
.addParts10 .addInner {
 padding-top: 0;
}
.addParts10 .addParts__title {
 background-image: url("img/addParts__title_example.png");
}
/***** addParts11 
---------------------------------------*/
.addParts11 .addParts__title {
 background-image: url("img/addParts__title_problem.png");
}
.btn-internalWrap {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.btn-internalWrap .btn-internal {
 width: calc((100% - 6rem)/2);
 max-width: 100%;
 margin: 3rem auto 0;
}
.btn-internalWrap .btn-internal a {
 color: #fff;
 background-color: #0E55B3;
 font-size: 2.2rem;
 background-image: url("img/arrow_white02.png");
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 137px;
}
/***** addParts12 
---------------------------------------*/
.addParts12 .addParts__title {
 background-image: url("img/addParts__title_list.png");
}
/***** addParts13 
---------------------------------------*/
.addParts13 .addInner {
 padding-top:0;
}
@media screen and (max-width: 480px) {
 /* SP */
 /*------------

	Index

	------------*/
 #contents {
  width: 100%;
  margin: 0 auto 10rem;
 }
 h3:not([class]) {
  padding: 1.2rem 3rem;
  font-size: 1.8rem;
  margin: 2rem auto 1rem;
 }
 .toc_parts {
  width: 90%;
 }
 /*--------------------------------------

	　visArea

	---------------------------------------*/
 #visArea {
  margin: 0 auto;
 }
 #visArea .mainArea {
  background: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;
 }
 #visArea .mainArea .mainAreaInner {
  max-width: 100%;
  padding: 40.26666666666667% 0 0;
  background: url(img/mv_pic_sp.jpg) no-repeat top center;
  background-size: 100% auto;
  position: relative;
 }
 #visArea .mainArea .mainAreaInner::after {
  content: none;
 }
 #visArea .mainArea .siteNameArea {
  display: table;
  background: url("img/mv_pic_sp.jpg") center top no-repeat;
  background-size: cover;
  height: 130px;
  width: 100%;
  margin: 0 auto;
 }
 #visArea .mainArea .siteName {
  margin: 0 auto;
  text-align: left;
  position: absolute;
  top: 10vw;
  left: 5.375vw;
  width: 18.75vw;
 }
 #visArea .mainArea .siteName img {
  margin: 0;
 }
 #visArea .mainArea .mainTxtBox {
  width: 100%;
  padding: 0;
  margin: 0rem auto 0;
 }
 #visArea .mainArea .mainTxtBox .TxtWrp {
  margin-left: 0;
  max-width: unset;
}
 #visArea .mainArea .catchArea {
  padding: 1rem 0 2.8rem;
  margin: 0 auto 1rem;
 }
 #visArea .mainArea .catchArea::after {
  background-size: auto 20px;
  background-position: left 1rem top 0.4rem;
  width: 100%;
  height: 28px;
 }
 #visArea .mainArea .catchArea .catch {
  font-size: 2.2rem;
  padding: 0 0 0.5rem 4%;
  max-width: 96%;
  margin: 0 auto 0 0;
  letter-spacing: 3px;
 }
 #visArea .mainArea .catchArea .catch .small {
  font-size: 1.8rem;
 }
 #visArea .mainArea .txtArea {
  margin: 0 auto;
  padding: 0 2rem;
 }
 /*--------------------------------------

	オリジナル

	---------------------------------------*/
 .interviewTitAreaWrap {
  margin: 2.2rem 0 4rem;
 }
 .interviewTitAreaWrap::before {
  height: 22px;
  top: -22px;
  left: 0;
 }
 .interviewTitAreaWrap .interviewTitArea {
  display: block;
  padding: 1.4rem 7% 0.4rem 0;
  margin: 0 0 1.4rem;
 }
 .interviewTitAreaWrap .interviewTitArea::before {
  right: 100%;
 }
 .interviewTitAreaWrap .interviewTitArea::after {
  top: 15px;
  right: 10px
 }
 .interviewTitAreaWrap .interviewTitArea .interviewTit {
  display: block;
  width: 100%;
  font-size: 2.2rem;
  padding: 1rem 0 1rem;
  letter-spacing: normal;
  line-height: 1.4;
 }
 .interviewTitAreaWrap .interviewTitArea .interviewTit .small {
  font-size: 1.4rem;
 }
 .interviewTitAreaWrap .interviewTitArea .interviewTxt {
  display: block;
  vertical-align: middle;
  width: 100%;
  font-size: 1.4rem;
  border-left: none;
  padding: 0;
 }
 /***** addParts01 
 ---------------------------------------*/
 /***** addParts02 
 ---------------------------------------*/
 .addParts02::before {
  height: 31px;
 }
 #index .addParts02 .sttl {
  font-size: 2.2rem;
  letter-spacing: normal;
 }
 #index .addParts02 .sttl .small {
  font-size: 1.8rem;
  margin-bottom: 0;
 }
 .addParts02 .block {
  padding: 3rem 0;
 }
 .addParts02 .blockTitArea {
  padding: 0 2rem;
 }
 .addParts02 .blockTitSub {
  min-width: 0;
  font-size: 1.4rem;
  margin: 0 auto 2.5rem;
  padding: 1.5rem 2.5rem;
 }
 .addParts02 .block__item {
  padding: 2rem;
  background-size: auto 40px;
 }
 .addParts02 .block__item__title {
  font-size: 2rem;
 }
 .addParts02 .block__item--price .thum,
 .addParts02 .block__item--price .text {
  float: none;
  width: 100%;
 }
 .addParts02 .block__item--price .text {
  margin-top: 2rem;
 }
 #index .addParts02 .block__item--price .text table th {
  width: 100%;
 }
 #index .addParts02 .block__item--price .text .note {
  font-size: 1.2rem;
 }
 .addParts02 .lightBox {
  padding: 3rem 2rem 2rem;
  border-top: 28px solid #fff;
 }
 .addParts02 .lightBox::before {
  width: 60px;
  height: 48px;
  top: -28px;
 }
 .addParts02 .lightBox + .lightBox {
  margin-top: 2rem;
 }
 .addParts02 .lightBox .catch {
  font-size: 1.6rem;
  margin: 0 auto 1rem;
 }
 .addParts02 .personBox {
  padding: 2rem;
  display: block;
 }
 .addParts02 .personBox .pic {
  display: none;
 }
 .addParts02 .personBox dl {
  display: block;
 }
 .addParts02 .personBox dl dt {
  font-size: 1.6rem;
  min-height: 58px;
  background: url("img/box01-1.png") no-repeat left 50%;
  background-size: 66px auto;
  padding-left: 80px;
  margin: 0 0 1rem;
 }
 .addParts02 .block__item--performance .icoArea {
  padding: 0;
  justify-content: space-between;
 }
 .addParts02 .icoArea .icoArea__item {
  width: 48%;
  margin: 2rem 0 0;
 }
 .addParts02 .icoArea .icoArea__item .icoTtl {
  text-align: left;
  height: auto;
  margin: 0;
  padding: 2rem;
  font-size: 1.6rem;
  border-radius: 10px;
  background:#D2DFFA url("img/hover-q-icon.png") no-repeat right 10px top 50% / 20px auto !important;
 }
 .addParts02 .icoArea .icoArea__item .icoTtl::after {
  display: none;
 }
 .spModal {
  width: 100%;
  font-size: 1.6rem;
  padding: 3rem 1.5rem;
  background-color: #666464;
  color: #fff;
 }
 .addParts02 .block__item--int ul {
  display: block;
 }
 .addParts02 .block__item--int ul li {
  width: auto;
 }
 .addParts02 div[class^="btn"] {
  width: 80%;
 }
 /***** addParts03
 ---------------------------------------*/
 /***** addParts04
 ---------------------------------------*/
 .addParts04 {
  background-size: 86px auto;
 }
 .addParts04 .interviewTitAreaWrap .interviewTitArea .interviewTit {
  padding-right: 0;
 }
 .addParts04 .box-wrap .box + .box {
  margin-top: 6rem;
 }
 /***** addParts05
 ---------------------------------------*/
 /***** addParts06
 ---------------------------------------*/
 .addParts06 {
  background-size: 86px auto;
 }
 /***** addParts07 
 ---------------------------------------*/
 /***** addParts08 
 ---------------------------------------*/
 /***** addParts09 
 ---------------------------------------*/
 /***** addParts10 
 ---------------------------------------*/
 /***** addParts11 
 ---------------------------------------*/
 .btn-internalWrap {
  display: block;
 }
 .btn-internalWrap .btn-internal {
  width: 100%;
 }
 .btn-internalWrap .btn-internal a {
  min-height: 60px;
  font-size: 1.6rem;
 }
 /***** addParts12 
 ---------------------------------------*/
 /***** addParts13 
 ---------------------------------------*/
 
 
 
 
 
 
 
 
 
 
 
 
 
}