@charset 'UTF-8';
/*================================================

home.css

================================================*/
.home-container {
  margin-bottom: -40px;/* invalidate footer margin */
}

.home-container .l-side {
  margin-top: -388px;
  margin-bottom: 40px;
}

/* m-attention-box (sysstat info) */
.m-attention-box {
  list-style: none;
  margin-top: 24px;
  padding: 20px 16px 20px 24px;
  border: 3px solid transparent;
}
.m-attention-box + .m-attention-box {
  margin-top: 12px;
}

.m-attention-box > li {
  position: relative;
  padding-left: 16px;
}
.m-attention-box > li:before {
  box-sizing: border-box;
  position: absolute;
  top: 8px;
  left: 0;
  transform: rotate(45deg);
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
  border-color: currentColor;
  content: "";
}
.m-attention-box a {
  position: relative;
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}
.m-attention-box a:hover {
  color: inherit;
  text-decoration: underline;
}
.m-attention-box.none {
  border-color: #8eb6d6;
  background-color: #f0f4f7;
  color: #2599e3;
}
.m-attention-box.verifying {
  border-color: #ffdb6c;
  background-color: #fff3cc;
  color: #f60;
}
.m-attention-box.during {
  border-color: #fec7cc;
  background-color: #fae4e6;
  color: #ce0010;
}
.m-attention-box.restoration {
  border-color: #8ed6a2;
  background-color: #ebfbf0;
  color: #58b471;
}
.m-attention-box.final {
  border-color: #d6d7d9;
  background-color: #f9f9f9;
  color: #333;
}

/* m-maintenance-box */
.m-maintenance-box {
  margin-top: 44px;
  padding: 24px 48px;
  background: #ffeec5;
}

.m-maintenance-box li {
  position: relative;
  padding-left: 16px;
}

.m-maintenance-box li+li {
  margin-top: 8px;
}

.m-maintenance-box li:before {
  box-sizing: border-box;
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  width: 8px;
  height: 8px;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 2px solid #279ae3;
  border-right: 2px solid #279ae3;
}

.m-maintenance-box li a {
  font-weight: bold;
  text-decoration: none;
}

.m-maintenance-box li a:hover {
  text-decoration: underline;
}

/* m-information-box */
.m-information-box {
  margin-top: 44px;
  padding: 24px 48px;
  background: #ebeeff;
}

.m-information-box li {
  position: relative;
  padding-left: 16px;
}

.m-information-box li+li {
  margin-top: 8px;
}

.m-information-box li:before {
  box-sizing: border-box;
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  width: 8px;
  height: 8px;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 2px solid #279ae3;
  border-right: 2px solid #279ae3;
}

.m-information-box li a {
  font-weight: bold;
  text-decoration: none;
}

.m-information-box li a:hover {
  text-decoration: underline;
}

/* m-keyvisual */
.m-keyvisual {
  box-shadow: 0 0 28px 12px rgba(49, 57, 66, 0.04);
}

.m-keyvisual .list-img img {
  min-width: 1280px;
  min-height: 310px;
}

/* l-home-section  */
.l-home-section {
  position: relative;
}

.l-home-section .m-ttl-main,
.l-home-section .m-txt-description {
  text-align: center;
}

/* home-service-box  */
.home-service-box {
  padding: 52px 0 80px;
}

.home-service-list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-top: 20px;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.home-service-list li {
  margin-top: 16px;
}

.home-service-list li a {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  overflow: hidden;
  width: 396px;
  text-decoration: none;
  box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.1);
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

.home-service-list li a:hover {
  text-decoration: none;
  background: #edf2f2;
}

.home-service-list li .tag {
  font-weight: bold;
  line-height: 197px;
  position: absolute;
  top: -64px;
  left: -64px;
  width: 108px;
  height: 108px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
}

.home-service-list li .tag-fxneo {
  background: #e6a82e;
}

.home-service-list li .tag-kabu {
  background: #69c;
}

.home-service-list li .tag-fxop {
  background: #da981c;
}

.home-service-list li .tag-cfd {
  font-size: 16px;
  background: #202497;
}

.home-service-list li .icon {
  display: block;
  width: 128px;
  text-align: center;
}

.home-service-list li .txt-box {
  width: 264px;
  padding: 28px 28px 20px 0;
}

.home-service-list li .ttl {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.4;
  color: #10a5d0;
}

.home-service-list li .txt {
  line-height: 1.6;
  margin-top: 16px;
}

.home-service-list li .link {
  font-size: 15px;
  font-weight: bold;
  margin-top: 16px;
  white-space: nowrap;
}

.home-service-list li .link:before {
  box-sizing: border-box;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  margin-right: 8px;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: middle;
  border-top: 2px solid #0088de;
  border-right: 2px solid #0088de;
}

/* home-reason-box  */
.home-reason-box {
  padding: 40px 0;
}

.home-reason-box:after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  display: block;
  width: 300%;
  height: 100%;
  margin-left: -150%;
  content: '';
  background: url(/assets-home/images/bg-reason.png) no-repeat right center #cbe2fa;
  -webkit-background-size: 74% auto;
  background-size: 74% auto;
}

.home-reason-box .btn-area {
  margin-top: 24px;
  text-align: center;
}

/* home-demo-menu  */
.home-demo-menu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: 86px 28px 86px 0;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.home-demo-menu .txt-area {
  padding-left: 36px;
}

.home-demo-menu .txt-area p {
  font-size: 20px;
  font-weight: bold;
}

.home-demo-menu .txt-area .m-ttl-main {
  line-height: 1.2;
  margin-top: 16px;
  text-align: left;
}

.home-demo-menu .menu {
  width: 280px;
  border-bottom: 1px solid #e5e5e5;
}

.home-demo-menu .menu li {
  border-top: 1px solid #e5e5e5;
}

.home-demo-menu .menu li a {
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 16px;
  text-decoration: none;
}

.home-demo-menu .menu li a:before {
  box-sizing: border-box;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-right: 16px;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: middle;
  border-top: 2px solid #0088de;
  border-right: 2px solid #0088de;
}

.home-demo-menu .menu li a:hover {
  text-decoration: none;
  background: #f6f9fa;
}

/* home-gmo-service */
.home-gmo-service {
  padding: 80px 0 100px;
}

.home-gmo-service:after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  display: block;
  width: 500%;
  height: 100%;
  margin-left: -250%;
  content: '';
  background: #f8fbfb;
}

.home-gmo-service .m-ttl-main {
  font-size: 32px;
}

.home-gmo-service .service-menu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-top: 40px;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.home-gmo-service .service-menu li {
  overflow: hidden;
  width: 184px;
  border-radius: 4px;
  box-shadow: 0 6px 32px 0 rgba(0, 0, 0, 0.1);
}

.home-gmo-service .service-menu li a {
  display: block;
  text-decoration: none;
}

.home-gmo-service .service-menu li .icon {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  height: 120px;
  text-align: center;
  background: #fff;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

.home-gmo-service .service-menu li p {
  line-height: 48px;
  height: 48px;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  text-align: center;
  color: #fff;
  border-bottom: 2px solid #005da1;
  background: #0074c9;
}

.home-gmo-service .service-menu li a:hover p {
  background: #04a0e1;
}

.home-gmo-service .news-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-top: 90px;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

*+.news-box {
  margin-top: 40px;
}

.home-gmo-service .news-in {
  width: 388px;
}

.home-gmo-service .ttl-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.home-gmo-service .ttl-box .m-ttl-second {
  font-weight: normal;
  width: 75%;
  margin-bottom: 0;
  color: #10a6d1;
}

.home-gmo-service .ttl-box .link-list {
  text-decoration: none;
}

.home-gmo-service .ttl-box .link-list:hover {
  text-decoration: underline;
}

.home-gmo-service .ttl-box .link-list:before {
  box-sizing: border-box;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: -2px;
  margin-right: 8px;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: middle;
  border-top: 2px solid #0088de;
  border-right: 2px solid #0088de;
}

.home-gmo-service .list-news {
  margin-top: 16px;
  border-bottom: 1px solid #e5e5e5;
}

.home-gmo-service .list-news li {
  border-top: 1px solid #e5e5e5;
}

.home-gmo-service .list-news li a {
  position: relative;
  display: block;
  width: 100%;
  min-height: 72px;
  padding: 16px 40px 16px 20px;
  text-decoration: none;
}

.home-gmo-service .list-news li a:hover {
  text-decoration: none;
  background: #edf2f2;
}

.home-gmo-service .list-news li a:after {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: middle;
  border-top: 2px solid #0088de;
  border-right: 2px solid #0088de;
}

.home-gmo-service .list-news li dt {
  font-size: 12px;
  color: #999;
}

.home-gmo-service .list-news li .tag-important {
  font-size: 11px;
  margin-left: 4px;
  padding: 1px 4px 0;
  text-align: center;
  color: #fff;
  background: #ce0010;
}

.home-gmo-service .m-topics-box {
  margin-top: 60px;
}

.home-gmo-service .m-topics-box dt {
  font-size: 22px;
}

.m-icon-campaign {
  position: absolute;
  top: -10px;
  left: -130px;
}

.m-icon-campaign a:hover {
  opacity: 0.8;
}

/* m-reason-list */
.m-reason-list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-top: 24px;
  margin-top: 20px;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

.m-reason-list li {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 132px;
  height: 132px;
  margin: 0 16px;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

.m-reason-list li:before,
.m-reason-list li:after {
  position: absolute;
  display: block;
  content: '';
  border-radius: 100%;
}

.m-reason-list li:before {
  top: -6px;
  left: -6px;
  width: 144px;
  height: 144px;
  background: rgba(167, 197, 208, 0.3);
}

.m-reason-list li:after {
  top: 0;
  left: 0;
  width: 132px;
  height: 132px;
  background: #fff;
}

.m-reason-list li p {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.35;
  position: relative;
  z-index: 1;
  text-align: center;
  color: #005bac;
}

.m-reason-list .btn-area {
  width: 240px;
  margin: 30px auto 0;
}