/*** layout *********************************************************************************************************/
html {
 font-size: 62.5%;
}
.sp {
 display: block !important;
}
.pc {
 display: none !important;
}
.container {
 max-width: 1200px;
}
.bl-hot,
.bl-hot img,
a img {
 transition: 0.3s;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}
.bl-hover,
.bl-hover img,
a:hover img {
 opacity: 0.7;
}

@media all and (min-width: 1200px) {
 .container2 {
  padding: 0 40px;
 }
}
@media all and (max-width: 1199px) {
 .container2 .row {
  padding-left: 15px;
  padding-right: 15px;
 }
}
body {
 font-family: helvetica, arial, YuGothic, 'Yu Gothic', 'メイリオ', sans-serif;
 width: 100%;
 position: relative;
 font-size: 1.6rem;
 line-height: 1.6;
 color: #333;
}
.contents-area {
 width: 100%;
 z-index: 15;
 padding: 82px 0 0;
 background: #fff;
}
.contents-area.index {
 padding: 92px 0 0;
 background: rgba(0,0,0,0.88);
}
.contents-area.index.index02 section {
 background: #fff;
}
.contents-area.index.index03 section {
 background: #F8F8F9;
}

/*** top ***/
.contents-area.index-top {
 padding: 0;
}
.contents-area.index-top section {
 padding: 60px 0;
}
.contents-area.index-top .bg01 {
 background: url(../images/index-ph02-bg.jpg) no-repeat center center;
 background-size: cover;
 min-height: 989px;
 color: #FFF;
}
.contents-area.index-top .bg02 {
 background: url(../images/index-ph04-bg.jpg) no-repeat center top;
 background-size: cover;
 min-height: 901px;
 color: #FFF;
}
.contents-area.index-top .bg03 {
 background: url(../images/index-ph05-bg.jpg) no-repeat center top;
 background-size: cover;
 color: #FFF;
}

/*** title *********************************************************************************************************/
.title02_01 {
 font-size: 3.6rem;
 color: #0099CC;
 text-align: center;
 display: flex;
 -webkit-box-align: center;
 -ms-align-items: center;
 align-items: center;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 margin-bottom: 90px;
 line-height: 1.2;
}
.title02_01:before,
.title02_01:after {
 border-top: 3px solid #0099CC;
 content: "";
 flex-grow: 1;
 max-width: 262px;
}
.title02_01:before {
 margin-right: 1.6rem;
}
.title02_01:after {
 margin-left: 1.6rem;
}
.title02_02 {
 font-size: 3.6rem;
 text-align: center;
 position: relative;
 line-height: 1.2;
 padding-bottom: 20px;
 margin-bottom: 20px;
}
.white .title02_02 {
 color: #FFF;
}
.title02_02:after {
 content: "";
 width: 24px;
 height: 3px;
 background: #23b6e2;
 position: absolute;
 bottom: 0;
 left: 50%;
 -ms-transform: translate(-50%,0);
 -webkit-transform: translate(-50%,0);
 transform: translate(-50%,0);
}
.white .title02_02:after {
 background: #FFF;
}
.title02_03 {
 font-size: 3.6rem;
 position: relative;
 line-height: 1.2;
 padding-bottom: 20px;
 margin-bottom: 20px;
}
.white .title02_03 {
 color: #FFF;
}
.title02_03:after {
 content: "";
 width: 24px;
 height: 3px;
 background: #23b6e2;
 position: absolute;
 bottom: 0;
 left: 0;
}
.white .title02_03:after {
 background: #FFF;
}
.title02_04 {
 font-size: 2.8rem;
 color: #262626;
 position: relative;
 line-height: 1.2;
 padding-bottom: 40px;
 margin-bottom: 30px;
 text-align: center;
}
.title02_04:after {
 content: "";
 width: 47px;
 height: 2px;
 background: #23B6E2;
 position: absolute;
 bottom: 0;
 left: 50%;
 -ms-transform: translate(-50%,0);
 -webkit-transform: translate(-50%,0);
 transform: translate(-50%,0);
}
.title03_01 {
 font-size: 2.4rem;
 color: #444;
 line-height: 1.2;
 position: relative;
 padding-left: 15px;
 margin-bottom: 20px;
}
.title03_01:before {
 content: "";
 width: 3px;
 height: 18px;
 background: #23B6E2;
 position: absolute;
 top: 5px;
 left: 0;
}
.title03_02 {
 font-size: 2rem;
 margin-bottom: 15px;
}
.title03_03 {
 font-size: 1.8rem;
 color: #444;
 line-height: 1.2;
 position: relative;
 padding-left: 15px;
 margin-bottom: 15px;
}
.title03_03:before {
 content: "";
 width: 3px;
 height: 18px;
 background: #23B6E2;
 position: absolute;
 top: 0;
 left: 0;
}
.title03_04 {
 font-size: 1.8rem;
 position: relative;
 line-height: 1.2;
 padding-bottom: 15px;
 margin-bottom: 15px;
}
.title03_04:after {
 content: "";
 width: 47px;
 height: 2px;
 background: #000;
 position: absolute;
 bottom: 0;
 left: 0;
}

@media all and (max-width: 767px) {
 .title02_01 {
  font-size: 2.8rem;
  margin-bottom: 45px;
 }
 .title02_02 {
  font-size: 2.8rem;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
 .title02_03 {
  font-size: 2.8rem;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.title02_04 {
 font-size: 2.2rem;
 padding-bottom: 20px;
 margin-bottom: 15px;
}
 .title03_01 {
  font-size: 2.0rem;
 }
 .title03_01:before {
  height: 16px;
  top: 3px;
 }
}

/*** btn *********************************************************************************************************/
.btn {
 display: inline-block;
}
.btn:hover {
 color: #ff5d5c;
 border: 2px solid #ff5d5c;
}
.btn.main-btn {
 color: #FFF;
 border: 4px solid #FFFFCC;
 background-color: rgba(19,54,88,0.9);
 font-size: 2.2rem;
 width: 274px;
 line-height: 50px;
 border-radius: 35px;
 -webkit-border-radius: 35px;
 -ms-border-radius: 35px;
}
.btn.main-btn:hover {
 border: 4px solid #ff5d5c;
}
.btn.btn-reason {
 color: #33FEFE;
 border: 2px solid #33FEFE;
 background-color: rgba(6,36,43,0.9);
 font-size: 1.8rem;
 width: 238px;
 line-height: 53px;
 border-radius: 35px;
 -webkit-border-radius: 35px;
 -ms-border-radius: 35px;
}
.btn.btn-relation {
 color: #3399CC;
 border: 2px solid #3399CC;
 background-color: #FFF;
 font-size: 1.8rem;
 width: 196px;
 line-height: 29px;
 border-radius: 20px;
 -webkit-border-radius: 20px;
 -ms-border-radius: 20px;
}
.btn.btn-zip {
 background: #d8d8d8;
 background: -moz-linear-gradient(top, #d8d8d8 0%, #ebebeb 100%);
 background: -webkit-linear-gradient(top, #d8d8d8 0%,#ebebeb 100%);
 background: linear-gradient(to bottom, #d8d8d8 0%,#ebebeb 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#ebebeb',GradientType=0 );
 max-width: 294px;
 width: 100%;
 line-height: 28px;
 border: 1px solid #B0B0B0;
 -webkit-border-radius: 8px;
 -ms-border-radius: 8px;
 border-radius: 8px;
 font-size: 1.8rem;
}
.btn.btn-zip:hover {
 border: 1px solid #ff5d5c;
}
.btn.btn-primary {
 max-width: 378px;
 width: 100%;
 display: block;
 margin: 0 auto;
 border: 1px solid #36C3DF;
 line-height: 1.2;
 background: #36C3DF;
 color: #FFF;
 -webkit-border-radius: 8px;
 -ms-border-radius: 8px;
 border-radius: 8px;
 padding: 30px 0;
 font-size: 2rem;
 margin-top: 20px;
}
.btn.btn-primary:hover {
 background: #FFF;
 color: #36C3DF;
 border: 1px solid #36C3DF;
}

/*** animation *********************************************************************************************************/
@-webkit-keyframes slideDown {
 0% {
  transform: translateY(-100%);
 }
 100% {
  transform: translateY(0);
 }
}
@keyframes slideDown {
 0% {
  transform: translateY(-100%);
 }
 100% {
  transform: translateY(0);
 }
}
@-webkit-keyframes fadeIn {
 0% {
  opacity: 0;
  transform: translateY(15px);
 }

 100% {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes fadeIn {
 0% {
  opacity: 0;
  transform: translateY(15px);
 }

 100% {
  opacity: 1;
  transform: translateY(0);
 }
}
.animation-fadeIn {
 -webkit-animation-duration: 0.8s;
 animation-duration: 0.8s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
 -webkit-animation-delay: 0.2s;
 animation-delay: 0.2s;
 opacity: 0;
}
.animation-fadeIn.is-animated {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/*** table *********************************************************************************************************/
.table01 {
 margin-bottom: 40px;
}
.table01 th {
 width: 20%;
 vertical-align: middle;
 font-size: 1.8rem;
 text-align: center;
 padding: 10px;
 line-height: 1.2;
}
.table01 td {
 width: 80%;
 vertical-align: middle;
 padding: 10px;
}
.table-responsive-lg {
 padding-bottom: 20px;
 margin-bottom: 20px;
}
.table02 {
 font-size: 1.8rem;
 line-height: 1.2;
}
.table02 th {
 width: 25%;
 vertical-align: middle;
 text-align: center;
 padding: 10px;
 color: #FFF;
 white-space: nowrap;
}
.table02 th:nth-child(2n+1) {
 background-color: #23B6E2;
}
.table02 th:nth-child(2n) {
 background-color: #A0BAC5;
}
.table02 td {
 vertical-align: middle;
 padding: 30px 10px;
 text-align: center;
}
.table02 tbody tr:nth-child(2n) {
 background-color: #F8F8F8;
}
.table03 {
 margin-bottom: 40px;
}
.table03 th {
 width: 22%;
 font-size: 1.8rem;
 line-height: 1.2;
 vertical-align: middle;
 text-align: center;
 padding: 5px 10px;
 color: #FFF;
 white-space: nowrap;
 background-color: #23B6E2;
}
.table03 td {
 width: 78%;
 vertical-align: middle;
 padding: 5px 10px;
}
.table03 td ul {
 padding: 0;
 list-style: none;
 margin-bottom: 0;
}
.table03 td p.kome {
 padding-left: 1em;
 position: relative;
}
.table03 td p.kome:before {
 content: "※";
 position: absolute;
 top: 0;
 left: 0;
 width: 1em;
 height: 1em;
}

/*** top *********************************************************************************************************/

/*** scrollAnimation ***/
.js-scrollAnimation {
    -webkit-transition: opacity 0.8s,transform 0.6s cubic-bezier(0, 0.585, 0.385, 1);
    -webkit-transition: opacity 0.8s,-webkit-transform 0.6s cubic-bezier(0, 0.585, 0.385, 1);
    transition: opacity 0.8s,-webkit-transform 0.6s cubic-bezier(0, 0.585, 0.385, 1);
    transition: opacity 0.8s,transform 0.6s cubic-bezier(0, 0.585, 0.385, 1);
    transition: opacity 0.8s,transform 0.6s cubic-bezier(0, 0.585, 0.385, 1),-webkit-transform 0.6s cubic-bezier(0, 0.585, 0.385, 1);
    opacity: 0;
    -ms-transform: translateY(50px);
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}

/*** main-cover ***/
.main-cover {
 background: url(../images/index-ph01-bg.jpg) no-repeat center top;
 background-size: cover;
 min-height: 715px;
 margin: 0 0 20px;
}
.main-text h1 {
 font-size: 4.6rem;
 line-height: 1.2;
 color: #FFF;
 margin-bottom: 4rem;
}
.main-text h1 .js-text-01,
.main-text h1 .js-text-02,
.main-text h1 .js-text-03,
.main-text h1 .js-text-04 {
 display: block;
 text-transform: uppercase;
}
.main-text h1 .js-text-01 .letter,
.main-text h1 .js-text-02 .multiply,
.main-text h1 .js-text-03 .letter,
.main-text h1 .js-text-04 .letter {
 display: inline-block;
}
.main-text h1 .js-text-02 {
 font-size: 4.6rem;
}
.main-text h1 .js-text-02 .multiply {
 position: relative;
}
.main-text h1 .js-text-02 .multiply:before {
 content: "";
 width: 2px;
 height: 50px;
 background: #FFF;
 position: absolute;
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%,-50%) rotate(45deg);
 -webkit-transform: translate(-50%,-50%) rotate(45deg);
 transform: translate(-50%,-50%) rotate(45deg);
}
.main-text h1 .js-text-02 .multiply:after {
 content: "";
 width: 50px;
 height: 2px;
 background: #FFF;
 position: absolute;
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%,-50%) rotate(45deg);
 -webkit-transform: translate(-50%,-50%) rotate(45deg);
 transform: translate(-50%,-50%) rotate(45deg);
}
.main-text h1 .js-text-03 {
 margin-bottom: 20px;
}
.main-text h1 .js-text-04 {
 font-size: 2.4rem;
}

/*** counter ***/
.intro-performance {
 font-size: 3.6rem;
 line-height: 1.2;
}
.intro-performance .intro-title {
 display: block;
}
.intro-performance .intro-num {
 font-size: 12rem;
 display: inline-block;
 color: #0099CC;
}
@media all and (max-width: 1024px) {
 .intro-performance .intro-num {
  font-size: 9rem;
 }
}
.intro-performance .intro-sub {
 display: inline-block;
 color: #0099CC;
}

/*** graph ***/
.chart-bar-01 {
 position: relative;
 display: inline-block;
 width: 100%;
 max-width: 403px;
 float: right;
 height: 370px;
}
.chart-bar-01 .data {
 display: none;
 position: absolute;
 top: 0px;
 left: 46px;
}
.chart-bar-01 .data li {
 list-style: none;
 font-size: 15px;
 font-family: Century Gothic;
}
.chart-bar-01 .data li span {
 font-size: 12px;
 margin-left: 2px;
}
.chart-bar-01 .data li:first-child {
 position: absolute;
 top: 95px;
 left: 15px;
 width: 52px;
}
.chart-bar-01 .data li:nth-child(2) {
 position: absolute;
 top: 62px;
 left: 86px;
 width: 52px;
}
.chart-bar-01 .data li:nth-child(3) {
 position: absolute;
 top: 37px;
 left: 158px;
 width: 52px;
}
.chart-bar-01 .data li:nth-child(4) {
 position: absolute;
 top: 20px;
 left: 229px;
 width: 52px;
}
.chart-bar-01 .data li:nth-child(5) {
 position: absolute;
 top: 12px;
 left: 300px;
 width: 52px;
}
.chart-bar-01 .data li:nth-child(6) {
 position: absolute;
 top: 20px;
 left: 372px;
 width: 52px;
}

/*** feature-box ***/
.feature-box {
 padding-top: 60px;
 margin-right: 0;
 margin-left: 0;
}
.feature-box .row {
 margin: 0;
 padding: 0;
}
.feature-img {
 padding: 0;
}
.feature-txt {
 padding: 0;
 line-height: 1.4;
}
.feature-txt .feature {
 font-size: 2.8rem;
 position: relative;
 display: inline-block;
 line-height: 1.2;
 margin-bottom: 25px;
}
.feature-txt .feature:before {
 content: "";
 width: 100%;
 height: 13px;
 background: #36C3DF;
 position: absolute;
 left: 0;
 bottom: -4px;
 z-index: -1;
 -webkit-transform: skewX(-30deg);
 -ms-transform: skewX(-30deg);
 transform: skewX(-30deg);
}
.feature-txt .feature .sub {
 display: block;
 font-size: 1.6rem;
 color: #F0C759;
}
.feature-txt .feature .num {
 font-size: 5.4rem;
 color: #FFF;
 margin-left: 15px;
}

/*** reason-box ***/
.reason-box {
 padding-top: 60px;
}
.reason-box .box {
 width: 40%;
 max-width: 480px;
 margin-left: 30px;
 margin-right: 30px;
 color: #333;
 background: #FFF;
 position: relative;
 padding: 0;
}
.reason-box .box:before {
 content: "";
 width: 100%;
 height: 7px;
 background: #3B9DCE;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
}
.reason-box .box .heightLine-title {
 margin: 0 0 10px;
 padding: 0 20px;
 width: 100%;
}
.reason-box .box h3 {
 font-size: 2rem;
 line-height: 1.2;
}
.reason-box .box p {
 padding: 0 20px;
 line-height: 1.8;
}
.reason-box .box p a {
 display: block;
 padding: 10px 0;
 color: #333;
}

/*** relation-box ***/
.relation-box .box {
 color: #333;
 background: #FFF;
 padding: 30px 20px;
}
.relation-box h3 {
 font-size: 2.2rem;
 line-height: 1.2;
 margin-bottom: 30px;
}
.relation-box h3 .sub {
 font-size: 1.6rem;
 display: block;
 margin-bottom: 10px;
}

/*** page-title *********************************************************************************************************/
section.case-title {
 height: 480px;
 width: 100%;
 color: #FFF;
 padding: 0 18px;
}
section.case-title.kddi {
 background: url(../images/kddi-ph01-bg.jpg) no-repeat center center;
 background-size: cover;
}
section.case-title.niigata-pref {
 background: url(../images/niigata-pref-ph01-bg.jpg) no-repeat center center;
 background-size: cover;
}
section.case-title.nstec {
 background: url(../images/nstec-ph01-bg.jpg) no-repeat center center;
 background-size: cover;
}
section.case-title.obayashi {
 background: url(../images/obayashi-ph01-bg.jpg) no-repeat center center;
 background-size: cover;
}
section.case-title.brother {
 background: url(../images/brother-ph01-bg.jpg) no-repeat center center;
 background-size: cover;
}
section.case-title.iai {
 background: url(../images/iai-ph01-bg.jpg) no-repeat center center;
 background-size: cover;
}
section.case-title h1 {
 font-size: 4rem;
 line-height: 1.2;
 max-width: 1200px;
 margin-left: auto;
 margin-right: auto;
}
@media all and (max-width: 1024px) {
 section.case-title {
  height: 46.875vw;
  padding: 0 15px;
 }
 section.case-title h1 {
  font-size: 3.9vw;
 }
}
section.top-title01 {
 height: 266px;
 background: #FFF!important;
 line-height: 1.2;
}
section.top-title01 h1 {
 font-size: 3.6rem;
 margin-bottom: 20px;
 padding-bottom: 20px;
 position: relative;
}
section.top-title01 h1:before {
 content: "";
 width: 24px;
 height: 3px;
 display: block;
 background: #404858;
 position: absolute;
 bottom: 0;
 left: 50%;
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
}
section.top-title01 p {
 font-size: 1.4rem;
}
@media all and (max-width: 1024px) {
 section.top-title01 {
  height: auto;
  padding: 35px 0;
 }
 section.top-title01 h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  padding-bottom: 15px;
 }
}
section.top-title02 {
 background: #FFF!important;
 line-height: 1.2;
 padding: 70px 0 40px;
}
section.top-title02 h1 {
 font-size: 2.8rem;
 margin-bottom: 40px;
 padding-bottom: 40px;
 position: relative;
}
section.top-title02 h1:before {
 content: "";
 width: 47px;
 height: 2px;
 display: block;
 background: #23B6E2;
 position: absolute;
 bottom: 0;
 left: 0;
}
section.top-title02 p {
 margin-bottom: 0;
}
section.top-title03 {
 height: 480px;
 width: 100%;
 color: #FFF;
}
section.top-title03.function {
 background: url(../images/function-ph01-bg.jpg) no-repeat center center!important;
 background-size: cover;
}
section.top-title03 h1 {
 font-size: 4rem;
 line-height: 1.2;
 max-width: 1200px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2rem;
}
@media all and (max-width: 1024px) {
 section.top-title03 {
  min-height: 46.875vw;
  height: auto;
  padding: 10px 0;
 }
 section.top-title03 h1 {
  font-size: 3.9vw;
 }
}
@media all and (max-width: 768px) {
 section.top-title03 h1 {
  font-size: -webkit-calc(1.6rem + 3.125vw);
  font-size: calc(1.6rem + 3.125vw);
  margin-bottom: 1rem;
 }
}
section.top-title04 {
 height: 266px;
 background: #FFF!important;
 line-height: 1.2;
 text-align: center;
}
section.top-title04 h1 {
 font-size: 2.8rem;
 margin-bottom: 40px;
 padding-bottom: 40px;
 position: relative;
}
section.top-title04 h1:before {
 content: "";
 width: 48px;
 height: 2px;
 display: block;
 background: #23B6E2;
 position: absolute;
 bottom: 0;
 left: 50%;
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
}
section.top-title04 p {
 font-size: 2.4rem;
}
@media all and (max-width: 1024px) {
 section.top-title04 {
  height: auto;
  padding: 35px 0;
 }
 section.top-title04 h1 {
  font-size: 2.6rem;
  margin-bottom: 20px;
  padding-bottom: 20px;
 }
 section.top-title04 p {
  font-size: 2rem;
 }
}


/*** case一覧 *********************************************************************************************************/
.contents-area.index.case-index section {
 background: #f2f2f2;
 padding: 50px 0;
}
.case-item {
 background: #FFF;
 line-height: 1.2;
 width: 340px;
 margin-bottom: 20px;
}
@media all and (max-width: 1199px) {
 .case-item {
  width: 32%;
  max-width: 340px;
 }
}
.case-item-img {
 margin-bottom: 20px;
}
.case-item-text {
 padding: 0 10px 40px;
}

/*** case-carousel ***/
.case-carousel {
 background: url(../images/case-index-ph01-bg.jpg) no-repeat center center!important;
 background-size: cover!important;
 padding: 0!important;
}
#case-carousel {
 max-width: 1200px;
 margin-left: auto;
 margin-right: auto;
 color: #FFF;
}
.carousel-item .container {
 min-height: 280px;
 height: auto;
 padding: 20px 85px;
}
.carousel-control-next,
.carousel-control-prev {
 opacity: 1;
 width: 24px;
 height: 24px;
 top: 50%;
 bottom: auto;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}
.carousel-control-prev-icon {
 width: 24px;
 height: 24px;
 background-image: url(../images/arrow-prev.png);
}
.carousel-control-next-icon {
 width: 24px;
 height: 24px;
 background-image: url(../images/arrow-next.png);
}
.case-carousel h2 {
 margin-bottom: 20px;
}
.case-carousel h2 a {
 font-size: 2.8rem;
 color: #FFF;
 line-height: 1.2;
}
@media all and (max-width: 1199px) {
 .carousel-control-next {
  right: 15px;
 }
 .carousel-control-prev {
  left: 15px;
 }
}

/*** case詳細 *********************************************************************************************************/

/*** layout ***/
.contents-area.index .case-contents {
 background: #F8F8F9;
 padding-top: 40px;
}
.contents-area.index .case-contents > .row {
 max-width: 1200px;
 margin-left: auto;
 margin-right: auto;
 padding: 0;
}
.contents-area.index .main-content {
 width: 800px;
 margin-left: 40px;
 border-top: 1px solid #D8D8D8;
}
.contents-area.index .sidebar {
 width: 222px;
 margin-right: 24px;
 border-top: 1px solid #D8D8D8;
 padding: 30px 0;
}
@media all and (max-width: 1199px) {
 .contents-area.index .main-content {
  width: 70.42%;
  margin-left: 3.33%;
 }
 .contents-area.index .sidebar {
  width: 18.5%;
  margin-right: 2%;
 }
}
@media all and (max-width: 1024px) {
 .contents-area.index .main-content {
  width: 100%;
  margin-left: 0;
  margin-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px;
 }
 .contents-area.index .sidebar {
  width: 100%;
  margin-right: 0;
  padding: 20px 0 0;
 }
}

/*** main-content ***/
.case-catch {
 padding-top: 60px;
 margin-bottom: 50px;
}
.case-catch p {
 margin-bottom: 0;
}
.case-company {
 background: #FFF;
 margin-bottom: 90px;
}
.case-company .text-box {
 padding: 10px;
 font-size: 1.5rem;
 width: 420px;
}
.case-company .text-box h2 {
 font-size: 1.8rem;
 position: relative;
 padding-bottom: 25px;
 line-height: 1.2;
}
.case-company .text-box h2:before {
 content: "";
 width: 47px;
 height: 2px;
 background: #000;
 position: absolute;
 bottom: 12px;
 left: 0;
}
.case-company .text-box th {
 font-weight: normal;
 width: 5em;
 vertical-align: top;
}
.case-company .text-box td {
 padding: 0 5px;
 vertical-align: top;
}
@media all and (max-width: 1199px) {
 .case-company .img-box {
  width: 47.5%;
 }
 .case-company .text-box {
  width: 52.5%;
 }
}
.case-box {
 margin-bottom: 3rem;
}
.case-box.hr {
 margin-bottom: 5rem;
 border-bottom: 1px solid #D8D8D8;
 padding-bottom: 2rem;
}
.case-box h3 {
 height: 82px;
 margin-bottom: 3rem;
}
.case-box h3 .sub {
 font-size: 1.2rem;
 font-weight: bold;
 width: 104px;
 background: #026CCC;
 color: #FFF;
 padding: 6px;
}
.case-box h3 .main {
 font-size: 4rem;
 width: -webkit-calc(100% - 104px);
 width: calc(100% - 104px);
}
.case-box p {
 font-size: 1.5rem;
}
.case-box p.title {
 font-size: 2.4rem;
 line-height: 1.2;
 margin-bottom: 2rem;
}

/*** sidebar ***/
.sidebar h3 {
 padding-bottom: 25px;
 border-bottom: 1px solid #D8D8D8;
}
.sidebar h3 .sub {
 display: block;
 line-height: 1.2;
 margin-bottom: 10px;
 color: #026CCC;
 font-size: 1.4rem;
 font-weight: bold;
}
.sidebar ul {
 list-style: none;
 padding: 0;
 margin-bottom: 0;
}
.sidebar li a {
 padding: 20px 0;
 border-bottom: 1px solid #D8D8D8;
 display: block;
 color: #333;
 transition: 0.3s;
 font-size: 1.5rem;
}
.sidebar li a .sub {
 display: block;
 line-height: 1.2;
 margin-bottom: 10px;
 color: #026CCC;
 font-size: 1.2rem;
 font-weight: bold;
}
.sidebar li a:hover {
 text-decoration: none;
 color: #ff5d5c;
}
.sidebar h3 .sub,
.sidebar li a .sub {
 font-family: verdana, sans-serif;
 letter-spacing: 0.068rem;
}
@media all and (max-width: 1024px) {
 .sidebar h3 {
  padding: 0 15px 15px;
 }
 .sidebar li a {
  padding: 10px 15px;
 }
}

/*** 機能紹介 *********************************************************************************************************/
.fuction-box01 {
 padding: 90px 0 30px;
 text-align: center;
}
.fuction-box01 > .container > p {
 margin-bottom: 60px;
}
.fuction-box01 .row .box {
 background: #FFF;
 padding: 10px;
 margin-bottom: 30px;
}
.fuction-box01 .row .box.blue {
 border: 4px solid #23B6E2;
}
.fuction-box01 .row .box.yellow {
 border: 4px solid #F0C759;
}
.fuction-box01 .row .box.orange {
 border: 4px solid #FF9900;
}
.fuction-box01 .row .box:last-child {
 margin-bottom: 0;
}
.fuction-box01 .row .box h3 {
 font-size: 1.8rem;
 line-height: 1.2;
 margin-bottom: 10px;
}
.fuction-box01 .row .box.blue h3 {
 color: #23B6E2;
}
.fuction-box01 .row .box.yellow h3 {
 color: #F0C759;
}
.fuction-box01 .row .box.orange h3 {
 color: #FF9900;
 font-size: 2.8rem;
 margin-bottom: 15px;
}
.fuction-box01 .row .box h3 .sub {
 font-size: 1.6rem;
 color: #262626;
 display: block;
 margin-top: 10px;
}
.fuction-box01 .row .box.orange h3 .sub {
 font-size: 2.2rem;
 position: relative;
 z-index: 2;
}
.fuction-box01 .row .box.orange h3 .sub .u-line {
 position: relative;
 display: inline-block;
}
.fuction-box01 .row .box.orange h3 .sub .u-line:before {
 content: "";
 width: 100%;
 height: 8px;
 background: #FF9900;
 -webkit-transform: translateX(-50%) skewX(-30deg);
 -ms-transform: translateX(-50%) skewX(-30deg);
 transform: translateX(-50%) skewX(-30deg);
 position: absolute;
 bottom: -1px;
 left: 50%;
 z-index: -1;
}
.fuction-box01 .row .box .inner {
 width: 100%;
}
.fuction-box01 .left-box,
.fuction-box01 .right-box {
 max-width: 400px;
 width: -webkit-calc((100% - 100px) / 2);
 width: calc((100% - 100px) / 2);
}
.fuction-box01 .left-box .box {
 min-height: 184px;
}
.fuction-box01 .right-box {
 margin-left: 100px;
 position: relative;
}
.fuction-box01 .right-box:before {
 content: "";
 width: 41px;
 height: 72px;
 display: block;
 background: url(../images/arrow01.png) no-repeat;
 position: absolute;
 top: 50%;
 left: -68px;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}
.fuction-box01 .right-box .box {
 height: 100%;
}
.fuction-box01 .dictionary {
 background: #FFF;
 max-width: 300px;
 width: 32%;
 padding: 0 10px 15px;
 margin-top: 61px;
}
.fuction-box01 .dictionary .img-box {
 margin-top: -61px;
 margin-bottom: 30px;
}
.fuction-box01 .dictionary h3 {
 font-size: 2rem;
 line-height: 1.2;
 margin-bottom: 20px;
}
.fuction-box01 .dictionary h3 .sub {
 font-size: 1.8rem;
 margin-top: 10px;
 display: block;
}
.fuction-box01 .dictionary01 h3 .sub {
 color: #8CB84E;
}
.fuction-box01 .dictionary02 h3 .sub {
 color: #FFCC66;
}
.fuction-box01 .dictionary03 h3 .sub {
 color: #22B6E1;
}
.fuction-box01 .dictionary p {
 width: 100%;
}
.fuction-box02 {
 padding: 90px 0 0;
 text-align: center;
}
.fuction-box02 > .container > p {
 margin-bottom: 40px;
}
.fuction-box02 .bg01 {
 background: url(../images/function-ph04-bg.jpg) center top;
 padding: 30px 0;
}
.fuction-box02 .bg01 .box {
 max-width: 340px;
 width: 32%;
 text-align: left;
 background: #FFF;
 border: 1px solid #D4D4D4;
 padding: 29px 9px 9px;
 margin-bottom: 60px;
}
.fuction-box02 .bg01 .box:nth-child(4),
.fuction-box02 .bg01 .box:nth-child(5),
.fuction-box02 .bg01 .box:nth-child(6) {
 margin-bottom: 0;
}
.fuction-box02 h3 {
 font-size: 2rem;
 margin-bottom: 10px;
 line-height: 1.2;
}
.fuction-box02 h4 {
 font-size: 1.8rem;
 margin-bottom: 20px;
 line-height: 1.4;
}
.fuction-box02 .bg01 p {
 margin-bottom: 20px;
}
.fuction-box02 .bg01 .box .img-box {
 border: 1px solid #D4D4D4;
 width: 100%;
 height: 206px;
}

/*** お見積もり・お問い合わせ *********************************************************************************************************/
.inquiry-box {
 padding-bottom: 40px;
}
.inquiry-box .privacy {
 width: 100%;
 max-width: 960px;
 margin-left: auto;
 margin-right: auto;
 border: 1px #B0B0B0 solid;
 padding: 30px 20px 20px;
 -webkit-border-radius: 8px;
 -ms-border-radius: 8px;
 border-radius: 8px;
}
.inquiry-box .privacy h2 {
 font-size: 1.6rem;
 line-height: 1.8;
 margin-bottom: 0;
 font-weight: 400;
}
.inquiry-box form {
 width: 100%;
 max-width: 960px;
 margin-left: auto;
 margin-right: auto;
}
.col-form-label {
 font-size: 1.7rem;
 line-height: 1.2;
 padding-left: 0;
 padding-right: 0;
}
@media all and (max-width: 1024px) {
 .col-form-label {
  padding-left: 15px;
 }
}
.col-form-label .label-danger {
 display: inline-block;
 background: #CC0000;
 color: #FFF;
 font-size: 1.3rem;
 margin-left: 5px;
 padding: 3px;
 vertical-align: top;
 -webkit-border-radius: 3px;
 -ms-border-radius: 3px;
 border-radius: 3px;
}
.form-control {
 font-size: 1.7rem;
 width: 100%;
 padding: 5px;
 -webkit-border-radius: 8px;
 -ms-border-radius: 8px;
 border-radius: 8px;
 border: 1px #B0B0B0 solid;
}
.form-control:placeholder-shown {
 color: #D0D0D0;
}
.form-control::-webkit-input-placeholder {
 color: #D0D0D0;
}
.form-control:-moz-placeholder {
 color: #D0D0D0;
 opacity: 1;
}
.form-control::-moz-placeholder {
 color: #D0D0D0;
 opacity: 1;
}
.form-control:-ms-input-placeholder {
 color: #D0D0D0;
}


/*** header *********************************************************************************************************/
header {
 width: 100%;
 position: absolute;
 transition: top .4s;
 z-index: 999;
}
header.fixed {
 position: fixed;
 animation-duration: .8s;
 animation-name: slideDown;
}
header .header-inner {
 position: relative;
 width: 100%;
 border-bottom: 2px solid rgba(255,255,255,0.88);
 box-shadow: 1px -1px 2px 0px rgba(0, 0, 0, 0.33);
 -webkit-box-shadow: 1px -1px 2px 0px rgba(0, 0, 0, 0.33);
 -moz-box-shadow: 1px -1px 2px 0px rgba(0, 0, 0, 0.33);
 -o-box-shadow: 1px -1px 2px 0px rgba(0, 0, 0, 0.33);
 -ms-box-shadow: 1px -1px 2px 0px rgba(0, 0, 0, 0.33);
 background: rgba(56,65,80,0.76);
}
header .header-bar {
 position: relative;
 width: 100%;
 min-height: 71px;
}
header .logo {
 display: inline-block;
 margin-right: auto;
}
header .logo a img {
 margin: 9px 0 9px 4%;
}
header .h-btn {
 float: right;
}

/*** gnav ***/
header .gnav-inner {
}
header .gnav-inner #btn-sp-menu {
 position: absolute;
 right: 15px;
 top: 17px;
 padding: 8px 0;
 width: 40px;
 border: 2px solid #FFF;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -ms-border-radius: 5px;
}
header .gnav-inner #btn-sp-menu p {
 width: 20px;
 height: 4px;
 margin: 0px auto 4px;
 background: #FFF;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}
header .gnav-inner #btn-sp-menu p:last-child {
 margin-bottom: 0;
}
header .gnav-inner #btn-sp-menu p .middle {
 -webkit-transform: translateX(0px);
 -ms-transform: translateX(0px);
 transform: translateX(0px);
}
header .gnav-inner #btn-sp-menu p .top {
 -webkit-transform: translateY(-17px);
 -ms-transform: translateY(-17px);
 transform: translateY(-17px);
}
header .gnav-inner #btn-sp-menu p .bottom {
 -webkit-transform: translateY(17px);
 -ms-transform: translateY(17px);
 transform: translateY(17px);
}
header .gnav-inner #btn-sp-menu.open {
 top: -54px;
}
header .gnav-inner #btn-sp-menu.open p {
 margin: 1px auto 2px;
}
header .gnav-inner #btn-sp-menu.active .middle {
 -webkit-transform: translateX(100px);
 -ms-transform: translateX(100px);
 transform: translateX(100px);
 background: rgba(255, 255, 255, 0);
}
header .gnav-inner #btn-sp-menu.active .top {
 -webkit-transform: rotate(-45deg) translateY(5px) translateX(-5px);
 -ms-transform: rotate(-45deg) translateY(5px) translateX(-5px);
 transform: rotate(-45deg) translateY(5px) translateX(-5px);
}
header .gnav-inner #btn-sp-menu.active .bottom {
 -webkit-transform: rotate(45deg) translateY(-4px) translateX(-4px);
 -ms-transform: rotate(45deg) translateY(-4px) translateX(-4px);
 transform: rotate(45deg) translateY(-4px) translateX(-4px);
}
@media screen and (max-width: 1099px) {
 header .gnav-inner .menu ul.show-on-mobile {
  display: block;
 }
}
header .gnav-inner .menu > ul {
 list-style: none;
 padding: 0;
 position: relative;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
header .gnav-inner .menu > ul:before, header .gnav-inner .menu > ul:after {
 content: "";
 display: table;
}
header .gnav-inner .menu > ul:after {
 clear: both;
}
header .gnav-inner .menu > ul > li {
 padding: 0;
 margin: 0;
}
header .gnav-inner .menu > ul > li:last-of-type {
 padding: 0 0 75px;
}
header .gnav-inner .menu > ul > li.menu_markup a {
 color: #ff5d5c;
}
header .gnav-inner .menu > ul > li .link-title {
 display: block;
 width: 100%;
 padding: 0;
 border-bottom: 1px solid #fff;
}
header .gnav-inner .menu > ul > li .link-title a {
 position: relative;
 display: block;
 width: 100%;
 padding: 15px 15px 15px 36px;
 font-weight: bold;
 font-size: 1.8rem;
 line-height: 1.8rem;
}
header .gnav-inner .menu > ul > li .link-title a:before {
 position: absolute;
 display: block;
 content: "";
 width: 13px;
 height: 14px;
 background: url(../images/nav-black.svg) 0 -10px no-repeat;
 background-size: 200% auto;
 top: 18px;
 left: 16px;
}
header .gnav-inner .menu > ul > li a {
 text-decoration: none;
 padding: 1.5em 3em;
 display: block;
}
 header .gnav-inner .menu > ul > li.menu_markup {
  display: none;
 }

/* モバイル用 サイズは任意で。js側の設定と合わせる*/
@media screen and (max-width: 1099px) {
/*sp menu表示時 背景stop*/
 .fixed {
  position: fixed;
  width: 100%;
 }
 .gnav-inner {
  width: 100%;
 }
 .gnav-inner .menu .show-on-mobile {
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  /*-webkit-overflow-scrolling:touch;*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
 .gnav-inner .menu.open {
  position: relative;
  background: #DCDCDC;
  height: 100%;
  /*-webkit-overflow-scrolling: touch;*/
  z-index: 10002;
 }
 .gnav-inner .menu > ul {
  display: none;
 }
 .gnav-inner .menu > ul > li {
  width: 100%;
  float: none;
  display: block;
 }
 .gnav-inner .menu > ul > li a {
  padding: 1.5em;
  width: 100%;
  display: block;
 }
 .menu-mobile {
  display: block;
 }
 header .gnav-inner .menu > ul > li.menu_markup {
  display: block;
 }
}

/*** bnr *********************************************************************************************************/
.bnr {
 padding: 90px 0 75px;
}
.index-top .bnr {
 background: #E6F5FD;
}
.bnr ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
.bnr ul li {
 padding: 0 13px 15px;
}

/*** bnr02 *********************************************************************************************************/
.bottom-btn {
 padding: 35px 0 20px!important;
 background: #FFF!important;
}
.bottom-btn ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
.bottom-btn ul li {
 padding: 0 30px 15px;
}
.bottom-btn ul li a {
 font-size: 1.8rem;
 display: block;
 width: 310px;
 text-align: center;
 line-height: 58px;
 transition: 0.3s;
}
.bottom-btn ul li:first-child a {
 border: 3px solid #074A8F;
 background: #3399CC;
 color: #FFF;
}
.bottom-btn ul li:last-child a {
 border: 3px solid #FFCC00;
 background: #FFFF66;
 color: #666;
}
.bottom-btn ul li:first-child a:hover {
 background: #FFF;
 color: #3399CC;
 text-decoration: none;
}
.bottom-btn ul li:last-child a:hover {
 background: #666;
 color: #FFFF66;
 text-decoration: none;
}
.bnr02 {
 padding: 65px 0!important;
 border-top: 1px solid #EFEFEF;
 background: #FFF!important;
}
.bnr02 .container {
 padding-left: 0;
 padding-right: 0;
}
.bnr02 ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
.bnr02 ul li {
 padding: 0 5px 15px;
 text-align: center;
}

/*** bnr for Maeketo index.html *********************************************************************************************************/
.conversion-float-area {
	display: block;
	position: fixed;
	right: 20px;
	bottom: 20px;
	background-color: #dee6ec;
	width: 240px;
	text-align: center;
	padding: 10px;
}
.conversion-float-area a:hover{
	text-decoration: none;
}
.conversion-float-area span {
	width: 24px;
	height: 24px;
	border-radius: 30px;
	border: 1px solid #cccccc;
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: #ffffff;
	cursor: pointer;
}
.conversion-float-area span:before,
.conversion-float-area span:after {
	content: "";
	width:18px;
	height: 2px;
	background-color: #cccccc;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
.conversion-float-area span:before {
	transform: rotate(45deg);
}
.conversion-float-area span:after {
	transform: rotate(-45deg);
}
.conversion-float-area .image-box {
	width: 100%;
}
.conversion-float-area .image-box figure {
	margin-bottom: 10px;
	width: 100%;
}
.conversion-float-area .image-box img {
	width: 100%;
}
.conversion-float-area .text-box {
	color: #1A1A1A;
}
.conversion-float-area .text-box h3 {
	font-size: 2rem;
}
.conversion-float-area .text-box p {
	width: 80%;
	margin: 0 auto;
	padding: 3px;
	background: #fa5c1a;
	border-radius:4px;
	font-size: 1.4rem;
	color: #fff;
}


/*** footer *********************************************************************************************************/
footer {
 height: 120px;
 background: #36c3df;
 background: -moz-linear-gradient(left, #36c3df 0%, #0066cc 50%, #36c3df 100%);
 background: -webkit-linear-gradient(left, #36c3df 0%,#0066cc 50%,#36c3df 100%);
 background: linear-gradient(to right, #36c3df 0%,#0066cc 50%,#36c3df 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36c3df', endColorstr='#36c3df',GradientType=1 );
 color: #FFF;
}
footer nav {
 width: 100%;
 overflow: hidden;
}
footer nav ul {
 padding: 50px 0 0;
}
footer nav ul a {
 color: #FFF;
 display: block;
 position: relative;
 font-size: 1.6rem;
 line-height: 1;
 padding: 4px 0 4px 15px;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
}
footer nav ul a:before {
 position: absolute;
 display: block;
 content: "";
 width: 13px;
 height: 14px;
 background: url(../images/nav-white.svg) 0 -10px no-repeat;
 background-size: 180% auto;
 top: 8px;
 left: 0;
}
footer nav ul a:hover {
 color: #ff5d5c;
 text-decoration: none;
}
footer nav ul a:hover:before {
 background: url(../images/nav-red.svg) 0 -9px no-repeat;
 background-size: 180% auto;
 text-decoration: none;
}
footer .copy {
 width: 100%;
 padding: 0 15px 5px;
 text-align: right;
}
footer .copy small {
 font-size: 1.2rem;
}