@charset "UTF-8";
/* Scss Document */
/* Scss Document */
a {
  text-decoration: none; }
a:focus,
a:hover {
  opacity: 0.7; }

.solution-image > .hero-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 165px;
  color: #FFFFFF; }

.solution {
  width: 700px;
  background: #FFFFFF;
  margin-top: 72px; }
  .solution h2, .solution h3, .solution h4 {
    padding: 0; }
    .solution h2:before, .solution h3:before, .solution h4:before {
      content: none; }
  .solution h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center; }

#topScene01,#topScene02,#topScene03{
    padding-top: 98px;
    margin-top: -98px;
}

  .solution-image {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 93px; }
    .solution-image p {
      font-size: 17px;
      padding: 32px 0 0 38px;
      line-height: 1.7; }
  .solution-movie {
    position: relative;
    margin: 28px 0 0; }
    .solution-movie p {
      text-align: center;
      display: block; }
    .solution-movie small {font-size: 14px;}
    .solution-movie a {
      display: block; }
    .solution-movie img {
      vertical-align: top;
      width: 100%;
      height: auto; }
  .solution-inner {
    max-width: 700px;
    padding: 0 20px;
    box-sizing: border-box; }
  .solution-task {
    margin-bottom: 155px; }
  .solution-task + #cloud {
    margin-top: -205px; }
    .solution-task-top {
      position: relative;
      width: 210px;
      margin: 35px 0 47px;
      padding: 14px 0;
      border: 1px solid #999999;
      border-radius: 12px;
      box-sizing: border-box; }
      .solution-task-top:after {
        content: url("images/bottom_arrow.png");
        position: absolute;
        left: 0;
        right: 0;
        bottom: -39px;
        text-align: center; }
      .solution-task-top p {
        font-size: 16px;
        height: 67px;
        text-align: center; }
      .solution-task-top img {
        display: block;
        margin: 12px auto 0; }
    .solution-task-bottom {
      width: 210px;
      border-radius: 12px;
      text-align: center;
      padding: 13px 0 16px; }
      .solution-task-bottom p {
        margin-top: 10px;
        font-size: 16px; }
  .solution-text {
    width: 500px;
    height: 100px;
    margin: 42px auto 0;
    padding-top: 27px;
    box-sizing: border-box;
    font-size: 17px;
    line-height: 1.7;
    color: #FFFFFF;
    text-align: center;
    background: #707070; }
  .solution-title {
    width: 100%;
    display: flex;
    position: relative;
    margin-bottom: 144px; }
    .solution-title:before {
      display: block;
      position: absolute;
      background: #FFFFFF;
      width: 80px;
      height: 80px;
      line-height: 70px;
      border: 5px solid #707070;
      border-radius: 50px;
      margin: 0 auto;
      font-size: 28px;
      text-align: center;
      left: 0;
      right: 0;
      top: -40px;
      box-sizing: border-box; }
    .solution-title h2 {
      width: 50%;
      padding: 45px 30px 0;
      box-sizing: border-box;
      text-align: center;
      font-size: 22px; }
      .solution-title h2 span {
        display: block;
        font-size: 14px;
        padding: 10px 0;
        margin-bottom: 12px;
        background: #FFFFFF;
        border-radius: 10px; }
    .solution-title img {
      width: 50%;
      height: auto; }
  .solution-content {
    width: 100%;
    margin-bottom: 100px;
    position: relative; }
    .solution-content:before {
      position: absolute;
      top: -32px;
      right: 0;
      font-size: 15px; }
    .solution-content-scene {
      font-size: 17px;
      padding: 18px 0 15px 210px;
      line-height: 1.8;
      position: relative; }
      .solution-content-scene:before {
        position: absolute;
        left: 29px;
        bottom: 12px; }
    .solution-content-block {
      padding: 25px 0 30px 30px;
      box-sizing: border-box;
      position: relative; }
      .solution-content-block:after {
        position: absolute;
        bottom: 35px; }
      .solution-content-block h3 {
        font-size: 24px;
        font-weight: 400;
        margin: 19px 0 16px;
        line-height: 1.7; }
      .solution-content-block p {
        font-size: 14px;
        line-height: 1.7; }
      .solution-content-block a {
        display: block;
        width: 240px;
        margin-top: 23px;
        line-height: 2.8;
        font-size: 14px;
        background: #000000;
        text-align: center;
        color: #FFFFFF; }
  .solution-office, .solution-telework {
    margin-bottom: 200px; }
  .solution-sales {
    margin-bottom: 170px; }

.solution-content-block > .solution-icon {
  font-size: 16px;
  width: 134px;
  padding-left: 50px;
  box-sizing: border-box;
  border-radius: 18px;
  line-height: 2;
  position: relative;
  background: #FFFFFF; }
  .solution-content-block > .solution-icon:before {
    content: url("images/solution-icon.png");
    position: absolute;
    left: 0;
    bottom: 3px; }

.solution-content-block > .support-text {
  width: 340px;
  border-radius: 13px;
  line-height: 2;
  margin: 20px 0;
  text-align: center;
  color: #FFFFFF;
  background: #FF6F7D; }

.solution-office > .solution-title:before {
  content: "01"; }

.solution-telework > .solution-title:before {
  content: "02"; }

.solution-sales > .solution-title:before {
  content: "03"; }

.solution-content.scene-1:before {
  content: "［　scene 1　］"; }

.scene-1 > .solution-content-scene:before {
  content: url("./images/scene1.png"); }

.scene-1 > .solution-content-block:after {
  content: url("./images/scene-image1.png");
  right: 4px; }

.solution-content.scene-2:before {
  content: "［　scene 2　］"; }

.scene-2 > .solution-content-scene:before {
  content: url("./images/scene2.png"); }

.scene-2 > .solution-content-block:after {
  content: url("./images/scene-image2.png");
  right: 44px; }

.solution-content.scene-3:before {
  content: "［　scene 3　］"; }

.scene-3 > .solution-content-scene:before {
  content: url("./images/scene3.png"); }

.scene-3 > .solution-content-block:after {
  content: url("./images/scene-image3.png");
  right: 26px; }

.solution-content.scene-4:before {
  content: "［　scene 4　］"; }

.scene-4 > .solution-content-scene:before {
  content: url("./images/scene4.png"); }

.scene-4 > .solution-content-block:after {
  content: url("./images/scene-image4.png");
  right: 0; }

.solution-content.scene-5:before {
  content: "［　scene 5　］"; }

.scene-5 > .solution-content-scene:before {
  content: url("./images/scene5.png"); }

.scene-5 > .solution-content-block:after {
  content: url("./images/scene-image5.png");
  right: 27px; }

.solution-content.scene-6:before {
  content: "［　scene 6　］"; }

.scene-6 > .solution-content-scene:before {
  content: url("./images/scene6.png"); }

.scene-6 > .solution-content-block:after {
  content: url("./images/scene-image6.png");
  right: 26px; }

.solution-content.scene-7:before {
  content: "［　scene 7　］"; }

.scene-7 > .solution-content-scene:before {
  content: url("./images/scene7.png"); }

.scene-7 > .solution-content-block:after {
  content: url("./images/scene-image7.png");
  right: 0; }

.flex-betwwen {
  display: flex;
  justify-content: space-between; }

.top-space {
  padding-top: 10px;
  box-sizing: border-box; }

.content-number {
  width: 40px;
  hieght: 40px;
  line-height: 40px;
  border: 4px solid #FFFFFF;
  border-radius: 50px;
  margin: 0 auto; }

.contact-inner {
  max-width: 700px;
  padding: 0 50px;
  box-sizing: border-box; }
  .contact-inner h2 {
    font-size: 28px;
    text-align: left; }
  .contact-inner p {
    margin: 23px 0 57px; }
  .contact-inner img {
    display: block;
    margin: 0 auto; }
  .contact-inner button {
    display: block;
    margin: 66px auto 95px;
    width: 300px;
    font-size: 20px;
    line-height: 2;
    color: #FFFFFF;
    border-radius: 23px;
    background: #E51C24;
    text-align: center;
      border: none;
}

.bg-green {
  background: #D0FFB7; }
  .bg-green-thin {
    background: #EBFAE2; }
.bg-blue {
  background: #BEF5EA; }
  .bg-blue-thin {
    background: #DEF4EF; }
  .bg-skyblue {
    background: #a7cee9; }
.bg-yellow {
  background: #FAFA6D; }
  .bg-yellow-thin {
    background: #FCFADA; }

/* Scss Document */
.solution-block {
  padding-top: 48px;
  margin-top: -48px;
  width: 100%;
  max-width: 700px; }
  .solution-block-hero {
    display: flex; }
    .solution-block-hero h2, .solution-block-hero img {
      width: 50%;
      height: auto; }
    .solution-block-hero h2 {
      font-size: 24px;
      text-align: center;
      margin-top: 70px;
      position: relative; }
      .solution-block-hero h2 span {
        display: block;
        font-size: 14px;
        line-height: 2;
        width: 240px;
        background: #FFFFFF;
        border-radius: 8px;
        margin: 12px auto 0; }
  .solution-block-text {
    padding: 27px 0 0 38px;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 80px; }

.scene-title {
  display: flex;
  position: relative;
  height: 70px; }
  .scene-title p {
    width: 100px;
    height: 70px;
    text-align: center;
    font-size: 15px;
    padding-top: 5px;
    box-sizing: border-box;
    line-height: 1.7; }
    .scene-title p span {
      display: block;
      font-size: 22px; }
  .scene-title h2 {
    line-height: 70px;
    padding-left: 22px;
    font-size: 20px; }

.office-inner > .solution-block-hero > h2 > span:before {
  content: "01"; }

.telework-inner > .solution-block-hero > h2 > span:before {
  content: "02"; }

.sales-inner > .solution-block-hero > h2 > span:before {
  content: "03"; }

.solution-block-hero > h2 > span:before {
  display: block;
  position: absolute;
  width: 40px;
  hieght: 40px;
  line-height: 40px;
  font-size: 15px;
  border: 4px solid #FFFFFF;
  border-radius: 50px;
  left: 0;
  right: 0;
  top: -56px;
  margin: 0 auto; }

.scene-title:after {
  position: absolute;
  right: 30px;
  bottom: 10px; }

.scene-title.scene-1:after {
  content: url("./images/scene1.png"); }

.scene-title.scene-2:after {
  content: url("./images/scene2.png"); }

.scene-title.scene-3:after {
  content: url("./images/scene3.png");
  bottom: -25px; }

.scene-title.scene-4:after {
  content: url("./images/scene4.png"); }

.scene-title.scene-5:after {
  content: url("./images/scene5.png"); }

.scene-title.scene-6:after {
  content: url("./images/scene6.png");
  right: 2px; }

.scene-title.scene-7:after {
  content: url("./images/scene7.png"); }

.taishokishu {
  font-size: 11px;
  width: 100%;
  margin-bottom: 10px; }

.taishokishu th {
  background-color: #999;
  color: #fff;
  padding: 0 5px;
  vertical-align: middle;
  border: 1px solid #000; }

.taishokishu td {
  border: 1px solid #000;
  padding: 3px 15px;
  vertical-align: middle; }

.taishokishu a{
    text-decoration:underline;
}


.padding-space {
  width: 100%;
  padding: 50px 30px 0;
  box-sizing: border-box; }

.office-content h3 {
  font-size: 28px;
  font-weight: 400; }
.office-content .scene-explanation {
  font-size: 14px;
  line-height: 1.5;
  margin: 22px 0 57px; }

.cloud-content {
	padding-top: 24px;
	padding-bottom: 96px;
	margin-bottom: 48px;
	border-bottom: solid 4px #707070;
}

.cloud-app-nav {
	max-width: 420px;
	margin: 40px auto 0;
}
.cloud-app-nav > li {
	padding: 0 0 0 1.5em;
	font-size: 16px;
	line-height: 1.5;
}
.cloud-app-nav > li + li {margin-top: 12px;}
.cloud-app-nav > li > a {
	color: #476bb5;
	text-decoration: underline;
	position: relative;
}
.cloud-app-nav > li > a::before {
	content: '';
	display: block;
	position: absolute;
	left: -1.5em;
	top: 0;
	z-index: 1;
	transform: translate(0,10%);
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background-image: url("./images/icon-arrow-blue.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
}

.cloud-content h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6666; }
.cloud-content h3 sup {
	font-size: 10px;
	font-weight: 400;
}
.cloud-content h3 small {
	font-size: 12px;
	font-weight: inherit;
	line-height: inherit;
}

.cloud-content h4 {
  font-size: 20px;
  font-weight: 400; }
.cloud-content .scene-explanation {
  font-size: 14px;
  line-height: 1.7142;
  margin: 22px 0 0; }
.cloud-content .scene-explanation small {
  font-size: 11px;
  line-height: 1.7142; }

.cloud-app {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 42px; }

.cloud-app + .cloud-app {
  margin: 40px 0 0; }

.solution .cloud-app-title,
.cloud-app-title {
	width: 100%;
	background-color: #a7cee9;
	background-image: url("images/new.png");
	background-repeat: no-repeat;
	background-size: 60px auto;
	background-position: left 12px top 50%;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5555;
	border-radius: 10px;
	padding: 12px 12px 12px 48px;
	margin: 0 0 32px;
}
.cloud-app-title.icon-none {
	background-image: none;
	padding: 12px;
}
.solution .cloud-app-title sup,
.cloud-app-title sup {
	font-size: 12px;
	font-weight: 400;
}
.solution .cloud-app-title small,
.cloud-app-title small {
	font-size: 12px;
	font-weight: inherit;
	line-height: inherit;
}

.cloud-app-text > p {
  width: 340px; }

.cloud-app-image {
  width: 280px; }
  .cloud-app-image img {
    width: 100%;
    height: auto; }

.cloud-app-notes {margin-top: 40px;}
.cloud-app .cloud-app-notes {width: 100%;}
.cloud-app-notes > li {
	font-size: 14px;
	line-height: 1.7142;
}
.cloud-app-notes > li > a {
	color: #476bb5;
	text-decoration: underline;
}


.telework-content h3 {
  font-size: 28px;
  font-weight: 400; }
.telework-content h4 {
  font-size: 20px;
  font-weight: 400; }
.telework-content .scene-explanation {
  font-size: 14px;
  line-height: 1.5;
  margin: 22px 0 57px; }

.telework-app {
  display: flex;
  justify-content: space-between;
  margin-top: 42px; }

.telework-app + .telework-app {
  margin: 60px 0 105px; }

.telework-app-text > p {
  width: 340px; }

.telework-app-image {
  width: 280px; }
  .telework-app-image img {
    width: 100%;
    height: auto; }

.model > h3 {
  font-size: 17px;
  margin: 60px 0 10px; }

.contact-link {
  margin: 65px 0 150px;
  font-size: 20px;
  line-height: 1.7;
  text-align: center; }
  .contact-link a {
    text-decoration: underline;
    color: #000000; }

.contact-link form{
    display: inline-block;
}
  .contact-link button {
    text-decoration: underline;
    color: #000000;
    border: none;
font-size: 110%;
cursor: pointer}


.solution-content-image + .solution-content-image {
  margin-top: 20px; }

.introduction-copy {
  width: 470px;
  margin: 96px auto 0;
  padding: 34px 0;
  font-size: 22px;
  text-align: center;
  background: #E2F5D8;
  position: relative; }
  .introduction-copy:after {
    content: url("images/copy-icon.png");
    position: absolute;
    right: -25px;
    bottom: -42px; }

.sales-inner .introduction-copy {
  background: #FCFADA; }

.scene-3-image img {
  display: block;
  margin: 0 auto; }
.scene-3-image p {
  margin: 5px 35px; }

.solution-footer {
  width: 700px;
  margin-top: 32px;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: center; }
  .solution-footer h3 {
    font-size: 23px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 28px; }

.solution-footer-content {
  display: flex;
  justify-content: space-between; }
  .solution-footer-content a {
    display: block;
    width: 220px;
    padding: 90px 0 42px;
    font-size: 22px;
    position: relative; }
  .solution-footer-content p {
    font-size: 22px; }

.solution-footer-content > .bg-green:before {
  content: "01"; }

.solution-footer-content > .bg-blue:before {
  content: "02"; }

.solution-footer-content > .bg-yellow:before {
  content: "03"; }

.solution-footer-content > a:before {
  display: block;
  position: absolute;
  width: 50px;
  hieght: 50px;
  line-height: 50px;
  font-size: 18px;
  border: 4px solid #FFFFFF;
  border-radius: 50px;
  left: 0;
  right: 0;
  top: 22px;
  margin: 0 auto; }

a.solution-top-link {
  display: block;
  margin-top: 18px;
  width: 100%;
  height: 192px;
  font-size: 23px;
  line-height: 192px;
  text-align: center;
  margin-bottom: 70px;
  color: #FFFFFF;
  background: #000000; }
  a.solution-top-link:visited {
    color: #FFFFFF; }

.telework-machine {
  margin-bottom: 90px; }

.telework-machine-item {
  padding-left: 120px;
  position: relative; }
  .telework-machine-item h4 {
    font-size: 14px;
    color: #5E82D8;
    margin-bottom: 12px; }
  .telework-machine-item p {
    font-size: 14px;
    line-height: 1.7; }
  .telework-machine-item:before {
    position: absolute;
    left: 0; }

.telework-machine-item + .telework-machine-item {
  margin-top: 50px; }

.telework-machine-lock:before {
  content: url("images/telework-lock.png"); }

.telework-machine-speaker:before {
  content: url("images/telework-speaker.png"); }

.telework-machine-headphone:before {
  content: url("images/telework-headphone.png"); }

.telework-machine-camera:before {
  content: url("images/telework-camera.png"); }

.scene-explanation > span {
  display: block;
  margin-top: -10px;
  margin-bottom: 20px; }

.margin-top-98 {
  margin-top: 98px; }

.introduction-copy + .solution-content-image {
  margin-top: 130px;
  margin-bottom: 54px; }

.scene-introduction {
  width: 100%;
  padding: 32px 0 42px;
  background: #F8F7E2;
  margin-bottom: 20px; }
  .scene-introduction-video {
    display: block;
    width: 317px;
    margin: 24px auto 0; }
  .scene-introduction p {
    font-size: 20px;
    text-align: center; }
  .scene-introduction img {
    height: auto; }

  .scene-introduction iframe {
    display: block;
    margin: 24px auto 0; }

.scene-introduction01 {
    margin-top: 30px;
    background: #ebfae2;
}

.scene-download {
  width: 100%;
  padding: 38px 0 61px;
  background: #F8F7E2; }
  .scene-download p {
    font-size: 20px;
    text-align: center; }

.tag-area {
  margin: 38px 0 52px; }

.type-tag {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; }
  .type-tag li {
    list-style: none;
    line-height: 2;
    padding: 0 15px;
    border-radius: 17px;
    background: #F5FA6D; }

.type-tag + .type-tag {
  margin-top: 23px; }

.download-btn {
  display: block;
  width: 340px;
  height: 58px;
  line-height: 58px;
  background: #000000;
  color: #ffffff;
  margin: 0 auto;
  text-align: center; }
  .download-btn:visited {
    color: #ffffff; }
  .download-btn:link {
    color: #ffffff;
font-size: 150%;}

.opacity-black:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #666;
  top: 0;
  opacity: 0.3; }

.scene-introduction > .annotation-text {
  width: 500px;
  font-size: 10px;
  margin: 20px auto 0;
  text-align: left;
  font-weight: 500; }

.prLink{
    text-align: center;
    margin: 30px auto 100px auto
}

.prLink a{
    background: #5e82d8;
    padding: 20px 40px;
    width: 450px;
    display: block;
    color: #fff;
    font-size: 130%;
    margin: 0 auto;
}

.prLink a:hover{
    opacity: 0.8;;
}


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{/*background:url(images/loading.gif) no-repeat center center;*/}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}
#cboxLoadedContent {
	padding: 0;
	overflow: auto;
	box-shadow: 0px 1px 10px #000000;
}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose , #cboxTitle {top: -30px;}
#colorbox, #cboxOverlay, #cboxWrapper {overflow: visible ;}
#cboxTitle {color: #fff;}