@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-regular_woff2.woff2) format("woff2"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-regular_woff.woff) format("woff"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-regular_otf.otf) format("opentype"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-regular_ttf.ttf) format("truetype"); }

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-medium_woff2.woff2) format("woff2"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-medium_woff.woff) format("woff"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-medium_otf.otf) format("opentype"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-medium_ttf.ttf) format("truetype"); }

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-bold_woff2.woff2) format("woff2"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-bold_woff.woff) format("woff"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-bold_otf.otf) format("opentype"), url(/-/media/cojp/product/ism/sp/dff/fonts/notosanscjkjp-bold_ttf.ttf) format("truetype"); }

@font-face {
  font-family: 'atlanta';
  font-style: normal;
  font-weight: 500;
  src: url(/-/media/cojp/product/ism/sp/dff/fonts/bratlbs0_woff2.woff2) format("woff2"), url(/-/media/cojp/product/ism/sp/dff/fonts/bratlbs0_woff.woff) format("woff"), url(/-/media/cojp/product/ism/sp/dff/fonts/bratlbs0_otf.otf) format("opentype"), url(/-/media/cojp/product/ism/sp/dff/fonts/bratlbs0_ttf.ttf) format("truetype"); }

.container * {
  color: #2a6490;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.container *:focus {
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

a:hover, a:focus {
  opacity: 1; }

.op1 {
  opacity: 1 !important; }

.container {
  font-family: "Noto Sans JP" !important;
  overflow: hidden; }

span.br {
  display: inline-block; }

.container.zh {
  font-family: "Noto Sans SC" !important; }

.hdg-top {
  position: relative;
  background-image: url(../images/bg_top.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden; }

.hdg-top .hdg-top__txt {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  margin-top: -40px;
  font-size: 60px;
  font-weight: 500;
  text-align: center;
  letter-spacing: .4em;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  @media screen and (max-width: 640px) {
    .hdg-top .hdg-top__txt {
      font-size: 30px; } }
  .hdg-top .hdg-top__txt span {
    color: #fff; }
  .hdg-top .hdg-top__txt .row {
    position: relative;
    display: inline-block;
    line-height: 2; }
    .hdg-top .hdg-top__txt .row:before {
      content: '';
      position: absolute;
      bottom: 14px;
      left: 0;
      display: block;
      width: 0;
      height: 2px;
      background-color: #fff;
      -webkit-box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.3);
      box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.3);
      -webkit-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s; }
      @media screen and (max-width: 640px) {
        .hdg-top .hdg-top__txt .row:before {
          content: none; } }
  @media screen and (max-width: 640px) {
    .hdg-top .hdg-top__txt .row-sp {
      position: relative;
      display: inline-block;
      line-height: 2; }
      .hdg-top .hdg-top__txt .row-sp:before {
        content: '';
        position: absolute;
        bottom: 6px;
        left: -16px;
        display: block;
        width: 0;
        height: 1px;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.3);
        box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.3);
        -webkit-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s; } }
  .hdg-top .hdg-top__txt .small {
    font-size: 48px; }
    @media screen and (max-width: 640px) {
      .hdg-top .hdg-top__txt .small {
        font-size: 24px; } }
  .hdg-top .hdg-top__txt .anim-txt {
    display: block;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    -webkit-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease; }
  .hdg-top .hdg-top__txt.show .row:before {
    width: calc(100% - 20px); }
  @media screen and (max-width: 640px) {
    .hdg-top .hdg-top__txt.show .row-sp:before {
      width: calc(100% + 20px); } }
  .hdg-top .hdg-top__txt.show .anim-txt {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }

@media screen and (max-width: 640px) {
  .hdg-top .hdg-top__txt img {
    max-width: 184px; } }

.hdg-top-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1.3);
  -ms-transform: translate(-50%, -50%) scale(1.3);
  transform: translate(-50%, -50%) scale(1.3);
  margin-top: -50px;
  width: 1600px;
  height: 840px;
  opacity: .6; }

@media screen and (max-width: 640px) {
  .hdg-top-anim {
    margin-top: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.4);
    -ms-transform: translate(-50%, -50%) scale(0.4);
    transform: translate(-50%, -50%) scale(0.4); } }

.hdg-top-anim .ico {
  position: absolute;
  opacity: 0;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }

.hdg-top-anim .ico.show {
  opacity: 1; }

.hdg-top-anim .ico .circle {
  fill: none;
  stroke: #fff; }

.hdg-top-anim .ico img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.hdg-top-anim .ico:after {
  content: '';
  display: block;
  position: absolute;
  background-color: #fff; }

.hdg-top-anim .ico.is-tablet {
  top: 134px;
  left: 288px;
  width: 230px;
  height: 230px; }

.hdg-top-anim .ico.is-shirt {
  top: 0px;
  left: 640px;
  width: 150px;
  height: 150px; }

.hdg-top-anim .ico.is-cloud {
  top: 195px;
  left: 1005px;
  width: 235px;
  height: 235px; }

.hdg-top-anim .ico.is-cloud img {
  margin-top: -4px; }

.hdg-top-anim .ico.is-sm1 {
  top: 10px;
  left: 80px;
  width: 150px;
  height: 150px; }

.hdg-top-anim .ico.is-sm1 img {
  width: 120px; }

.hdg-top-anim .ico.is-sm2 {
  top: 60px;
  left: 1290px;
  width: 145px;
  height: 145px; }

.hdg-top-anim .ico.is-sm2 img {
  width: 110px;
  margin-top: 5px; }

.hdg-top-anim .ico.is-pc {
  top: 580px;
  left: 810px;
  width: 150px;
  height: 150px; }

.hdg-top-anim .ico.is-sm1-2 {
  top: 470px;
  left: 1290px;
  width: 230px;
  height: 230px; }

.hdg-top-anim .ico.is-shirt-2 {
  top: 690px;
  left: 1100px;
  width: 140px;
  height: 140px; }

.hdg-top-anim .ico.is-shirt-2 img {
  margin-top: -2px; }

.hdg-top-anim .ico.is-sm2-2 {
  top: 600px;
  left: 340px;
  width: 240px;
  height: 240px; }

.hdg-top-anim .ico.is-sm2-2 img {
  margin-left: -6px; }

.hdg-top-anim canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0.3; }

.scroll {
  position: absolute;
  bottom: 60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 84px;
  height: 84px;
  cursor: pointer; }

@media screen and (max-width: 640px) {
  .scroll {
    bottom: 20px;
    width: 42px;
    height: 42px; } }

.scroll:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 100%;
  opacity: .45;
  -webkit-box-shadow: 0px 0px 20px 2px #ffffff;
  box-shadow: 0px 0px 20px 2px #ffffff; }

.scroll:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  background-color: #fff;
  border-radius: 100%; }

@media screen and (max-width: 640px) {
  .scroll:after {
    width: 29px;
    height: 29px; } }

.scroll i {
  color: #2a6490;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 36px; }

@media screen and (max-width: 640px) {
  .scroll i {
    font-size: 18px; } }

.intro {
  padding: 100px 0 105px;
  background-image: url(../images/bg_intro.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center; }
  @media screen and (max-width: 640px) {
    .intro {
      padding: 45px 15px; } }
  .intro .wrap-txt {
    opacity: 0; }

.intro__hdg {
  margin-bottom: 15px;
  font-size: 40px;
  letter-spacing: .1em;
  font-weight: 500; }
  @media screen and (max-width: 640px) {
    .intro__hdg {
      font-size: 20px; } }

.intro__txt {
  margin-bottom: 30px;
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 3; }
  @media screen and (max-width: 640px) {
    .intro__txt {
      margin-bottom: 25px;
      font-size: 14px;
      letter-spacing: 0;
      line-height: 1.8;
      text-align: left; } }

.intro__copy {
  font-size: 24px;
  letter-spacing: .1em; }
  .intro__copy .bold {
    font-weight: bold; }
  @media screen and (max-width: 640px) {
    .intro__copy {
      font-size: 18px;
      letter-spacing: 0;
      line-height: 1.8;
      text-align: left; } }

.intro-list {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 0; }

.intro-list li {
  display: inline-block;
  width: 33.333333%;
  vertical-align: top;
  opacity: 0; }

.intro-list li .wrap {
  width: 246px;
  margin: 0 auto; }

@media screen and (max-width: 640px) {
  .intro-list {
    text-align: left; }
  .intro-list li {
    width: 50%; }
  .intro-list li .wrap {
    width: auto;
    padding: 0 10px; }
  .intro-list li:nth-child(n+3) {
    margin-top: 40px; } }

.intro-list__img {
  margin-bottom: 25px; }

@media screen and (max-width: 640px) {
  .intro-list__img {
    margin-bottom: 15px;
    text-align: center; }
  .intro-list__img img {
    max-width: 198px;
    width: 100%; } }

.intro-list__hdg {
  margin-bottom: 25px;
  font-size: 24px; }

@media screen and (max-width: 640px) {
  .intro-list__hdg {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: bold;
    text-align: center; } }

.intro-list__txt {
  font-size: 16px;
  text-align: left;
  line-height: 1.8; }

@media screen and (max-width: 640px) {
  .intro-list__txt {
    font-size: 14px; } }

.example {
  -webkit-box-shadow: 0px 0px 20px 2px rgba(49, 49, 49, 0.16);
  box-shadow: 0px 0px 20px 2px rgba(49, 49, 49, 0.16); }

@media screen and (max-width: 640px) {
  .maintenance .example__contents {
    padding-bottom: 0; } }

.example__hdg {
  position: relative;
  padding: 60px 0 80px;
  text-align: center;
  background-image: url(../images/bg_lead.jpg); }
  @media screen and (max-width: 640px) {
    .example__hdg {
      padding: 30px 0 40px; } }
  .example__hdg .txt {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    color: #fff;
    font-size: 30px;
    font-weight: normal;
    line-height: 2;
    letter-spacing: .4em; }
    .example__hdg .txt span {
      color: #fff; }
    @media screen and (max-width: 640px) {
      .example__hdg .txt {
        margin-bottom: 15px;
        font-size: 15px; } }
    .example__hdg .txt:after {
      content: '';
      display: block;
      width: 0;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: -11px;
      background-color: #fff;
      -webkit-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s; }
      @media screen and (max-width: 640px) {
        .example__hdg .txt:after {
          height: 1px; } }
    .example__hdg .txt .anim-txt {
      display: block;
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
      -webkit-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s;
      -webkit-transition-timing-function: ease;
      -o-transition-timing-function: ease;
      transition-timing-function: ease;
      -webkit-transition-delay: .4s;
      -o-transition-delay: .4s;
      transition-delay: .4s; }
    .example__hdg .txt.lineanim:after {
      width: calc(100% + 14px); }
    .example__hdg .txt.lineanim .anim-txt {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
  .example__hdg .pair {
    position: relative; }
    .example__hdg .pair:before, .example__hdg .pair:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 60px;
      height: 3px;
      -webkit-transform-origin: center;
      -ms-transform-origin: center;
      transform-origin: center;
      background-color: #fff; }
      @media screen and (max-width: 640px) {
        .example__hdg .pair:before, .example__hdg .pair:after {
          width: 40px;
          height: 2px; } }
    .example__hdg .pair:before {
      -webkit-transform: translate(-50%, -50%) rotate(-45deg);
      -ms-transform: translate(-50%, -50%) rotate(-45deg);
      transform: translate(-50%, -50%) rotate(-45deg); }
    .example__hdg .pair:after {
      -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
      transform: translate(-50%, -50%) rotate(45deg); }
  .example__hdg .img {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    letter-spacing: .05em; }
    @media screen and (max-width: 640px) {
      .example__hdg .img {
        width: 94px;
        font-size: 12px; } }
    .example__hdg .img:first-child {
      margin-right: 154px; }
      @media screen and (max-width: 640px) {
        .example__hdg .img:first-child {
          margin-right: 78px; } }
    .example__hdg .img img {
      display: block;
      margin-bottom: 12px; }
      @media screen and (max-width: 640px) {
        .example__hdg .img img {
          width: 100%; } }
  .example__hdg .arrow {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -39px;
    width: 78px;
    height: 78px;
    cursor: pointer; }
    @media screen and (max-width: 640px) {
      .example__hdg .arrow {
        bottom: -20px;
        width: 40px;
        height: 40px; } }
    .example__hdg .arrow i {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 36px;
      z-index: 1; }
      @media screen and (max-width: 640px) {
        .example__hdg .arrow i {
          font-size: 20px; } }
    .example__hdg .arrow:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-color: #2a6490;
      border-radius: 100%;
      opacity: .6;
      -webkit-box-shadow: 0px 0px 20px 2px #ffffff;
      box-shadow: 0px 0px 20px 2px #ffffff; }
    .example__hdg .arrow:after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 58px;
      height: 58px;
      background-color: #2a6490;
      border-radius: 100%; }
      @media screen and (max-width: 640px) {
        .example__hdg .arrow:after {
          bottom: -20px;
          width: 29px;
          height: 29px; } }

.example__contents {
  padding: 120px 0;
  text-align: center;
  background-color: #eeebe0; }
  @media screen and (max-width: 640px) {
    .example__contents {
      padding: 90px 0 45px; } }
  .example__contents .wrap {
    position: relative;
    max-width: 1110px;
    margin: 0 auto; }
  .example__contents .before,
  .example__contents .after {
    position: relative;
    opacity: 0; }
  .example__contents .before {
    margin-bottom: 78px; }
    @media screen and (max-width: 640px) {
      .example__contents .before {
        margin-bottom: 60px; } }
    .example__contents .before .hdg {
      background-image: url(../images/bg_example_hdg_before.jpg); }
    .example__contents .before .txt {
      padding: 230px 0 80px;
      background-image: url(../images/bg_example_before.png); }
      @media screen and (max-width: 640px) {
        .example__contents .before .txt {
          padding: 290px 15px 50px;
          background-image: url(../images/bg_example_before_sp.png); } }
      .example__contents .before .txt p {
        font-size: 20px;
        color: #44453e; }
        @media screen and (max-width: 640px) {
          .example__contents .before .txt p {
            font-size: 14px; } }
  .example__contents .after .hdg {
    background-image: url(../images/bg_example_hdg_after.jpg); }
  .example__contents .after .txt {
    padding: 230px 0 50px;
    background-image: url(../images/bg_example_after.png); }
    @media screen and (max-width: 640px) {
      .example__contents .after .txt {
        padding: 290px 15px 30px;
        text-align: left; } }
    .example__contents .after .txt p {
      position: relative;
      display: inline-block;
      padding-left: 90px;
      color: #fff;
      font-size: 22px; }
      .example__contents .after .txt p .icon {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        display: inline-block; }
      @media screen and (max-width: 640px) {
        .example__contents .after .txt p {
          padding-left: 50px;
          font-size: 14px; }
          .example__contents .after .txt p .icon {
            width: 38px;
            top: 2px;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0); } }
  .example__contents .hdg {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 10px 0 13px;
    width: 222px;
    color: #fff;
    font-size: 35px;
    font-weight: normal;
    letter-spacing: .05em;
    font-family: "atlanta";
    text-align: center;
    line-height: 1;
    border-radius: 30px; }
    @media screen and (max-width: 640px) {
      .example__contents .hdg {
        width: 124px;
        padding: 8px 0 10px;
        left: 8px;
        font-size: 21px; } }
  @media screen and (max-width: 640px) {
    .example__contents .img {
      padding: 0 15px; } }
  .example__contents .img p {
    display: inline-block;
    max-width: 490px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 20px 2px rgba(49, 49, 49, 0.16);
    box-shadow: 0px 0px 20px 2px rgba(49, 49, 49, 0.16); }
    .example__contents .img p img {
      width: 100%;
      vertical-align: top; }
    .example__contents .img p:first-child {
      margin-right: 20px; }
      @media screen and (max-width: 640px) {
        .example__contents .img p:first-child {
          margin-right: 0;
          margin-bottom: 12px; } }
  .example__contents .txt {
    margin-top: -190px;
    letter-spacing: .05em;
    line-height: 1.8;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    border-radius: 10px; }
    @media screen and (max-width: 640px) {
      .example__contents .txt {
        margin-top: -270px;
        border-radius: 0; } }

.merit-iot__hdg {
  position: relative;
  padding: 90px 0; }
  @media screen and (max-width: 640px) {
    .merit-iot__hdg {
      padding: 45px 0; } }
  .merit-iot__hdg h2 {
    font-size: 50px;
    font-weight: 500;
    letter-spacing: .1em;
    text-align: center; }
    @media screen and (max-width: 640px) {
      .merit-iot__hdg h2 {
        font-size: 25px;
        letter-spacing: .05em; } }
  .merit-iot__hdg .bold {
    font-weight: bold; }
  .merit-iot__hdg .scroll {
    bottom: -44px;
    z-index: 1; }
    @media screen and (max-width: 640px) {
      .merit-iot__hdg .scroll {
        bottom: -21px; } }

.merit-iot__content {
  position: relative;
  padding: 120px 0;
  text-align: center;
  background-image: url(../images/bg_top.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  @media screen and (max-width: 640px) {
    .merit-iot__content {
      padding: 60px 15px 45px; } }
  .merit-iot__content .hdg {
    position: relative;
    display: inline-block;
    margin-bottom: 50px;
    color: #fff;
    font-size: 65px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .1em;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    @media screen and (max-width: 640px) {
      .merit-iot__content .hdg {
        margin-bottom: 25px;
        font-size: 32px; } }
    .merit-iot__content .hdg:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: -18px;
      display: block;
      width: 0;
      height: 2px;
      background-color: #fff;
      -webkit-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s; }
      @media screen and (max-width: 640px) {
        .merit-iot__content .hdg:before {
          left: -11px; } }
    .merit-iot__content .hdg span {
      color: #fff; }
    .merit-iot__content .hdg .small {
      font-size: 48px; }
      @media screen and (max-width: 640px) {
        .merit-iot__content .hdg .small {
          font-size: 24px; } }
    .merit-iot__content .hdg .iot {
      font-size: 78px;
      font-weight: bold; }
      @media screen and (max-width: 640px) {
        .merit-iot__content .hdg .iot {
          font-size: 39px; } }
    .merit-iot__content .hdg .anim-txt {
      display: block;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
      -webkit-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s;
      -webkit-transition-timing-function: ease;
      -o-transition-timing-function: ease;
      transition-timing-function: ease;
      -webkit-transition-delay: .4s;
      -o-transition-delay: .4s;
      transition-delay: .4s; }
    .merit-iot__content .hdg.lineanim:before {
      width: calc(100% + 40px); }
      @media screen and (max-width: 640px) {
        .merit-iot__content .hdg.lineanim:before {
          width: calc(100% + 20px); } }
    .merit-iot__content .hdg.lineanim .anim-txt {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      opacity: 1; }
  .merit-iot__content .wrap {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 0;
    opacity: 0; }
  .merit-iot__content .txt {
    display: inline-block;
    width: 50%;
    text-align: left;
    vertical-align: middle; }
    @media screen and (max-width: 640px) {
      .merit-iot__content .txt {
        display: block;
        width: 100%;
        margin-bottom: 15px; } }
    .merit-iot__content .txt h3 {
      margin-bottom: 30px;
      color: #fff;
      font-size: 33px;
      font-weight: normal;
      letter-spacing: 0;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
      @media screen and (max-width: 640px) {
        .merit-iot__content .txt h3 {
          margin-bottom: 15px;
          font-size: 17px; } }
    .merit-iot__content .txt p {
      color: #fff;
      font-size: 16px;
      line-height: 2.2; }
      @media screen and (max-width: 640px) {
        .merit-iot__content .txt p {
          font-size: 14px; } }
      .merit-iot__content .txt p .bold {
        color: #fff;
        font-weight: bold; }
  .merit-iot__content .img {
    display: inline-block;
    width: 50%;
    vertical-align: middle; }
    @media screen and (max-width: 640px) {
      .merit-iot__content .img {
        display: block;
        width: 100%; } }
    .merit-iot__content .img img {
      vertical-align: top; }
      @media screen and (max-width: 640px) {
        .merit-iot__content .img img {
          width: 100%; } }

.merit-iot__slider {
  padding: 80px 0;
  background-image: url(../images/bg_merit_slider.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media screen and (max-width: 640px) {
    .merit-iot__slider {
      padding: 40px 0 35px; } }
  .merit-iot__slider .hdg {
    margin-bottom: 60px;
    font-size: 34px;
    font-weight: 500;
    text-align: center; }
    @media screen and (max-width: 640px) {
      .merit-iot__slider .hdg {
        margin-bottom: 15px;
        font-size: 17px; } }
  .merit-iot__slider ul {
    opacity: 0; }
  .merit-iot__slider li {
    width: 660px;
    padding: 0 50px; }
    @media screen and (max-width: 640px) {
      .merit-iot__slider li {
        padding: 0 15px; } }
    .merit-iot__slider li .box-slider {
      max-width: 800px;
      margin: 0 auto; }
    .merit-iot__slider li .img {
      position: relative;
      height: 350px;
      background-color: #fff;
      border-radius: 0 0 10px 10px; }
      @media screen and (max-width: 640px) {
        .merit-iot__slider li .img {
          height: 200px;
          padding: 16px 0 20px;
          border-radius: 0 0 5px 5px; } }
      .merit-iot__slider li .img img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin-top: 4px;
        height: 86%;
        max-width: 600px;
        margin: 0 auto;
        -webkit-box-shadow: 0px 0px 20px 8px rgba(49, 49, 49, 0.1);
        box-shadow: 0px 0px 20px 8px rgba(49, 49, 49, 0.1); }
        @media screen and (max-width: 640px) {
          .merit-iot__slider li .img img {
            height: 80%; } }
    .merit-iot__slider li .title {
      padding: 18px 0;
      color: #fff;
      font-size: 24px;
      letter-spacing: .1em;
      text-align: center;
      background-color: #2a6490;
      border-radius: 10px 10px 0 0; }
      @media screen and (max-width: 640px) {
        .merit-iot__slider li .title {
          padding: 8px 0;
          font-size: 12px;
          border-radius: 5px 5px 0 0; } }

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  display: block;
  width: 60px;
  height: 60px;
  font-size: 38px;
  background-color: #fff;
  border-radius: 30px;
  -webkit-box-shadow: 0px 0px 20px 8px rgba(49, 49, 49, 0.1);
  box-shadow: 0px 0px 20px 8px rgba(49, 49, 49, 0.1);
  cursor: pointer;
  z-index: 99;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s; }
  .slider-prev:before,
  .slider-next:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  @media screen and (max-width: 640px) {
    .slider-prev,
    .slider-next {
      width: 28px;
      height: 28px;
      font-size: 18px; } }

.slider-prev {
  left: 316px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  @media screen and (min-width: 1433px) {
    .slider-prev {
      left: 50%;
      margin-left: -400px; } }
  @media screen and (max-width: 1200px) {
    .slider-prev {
      left: 230px; } }
  @media screen and (max-width: 640px) {
    .slider-prev {
      left: 15px; } }
  .slider-prev:before {
    margin-left: -2px; }
    @media screen and (max-width: 640px) {
      .slider-prev:before {
        margin-left: 0; } }
  .slider-prev:hover {
    left: 310px; }
    @media screen and (min-width: 1433px) {
      .slider-prev:hover {
        left: 50%;
        margin-left: -406px; } }
    @media screen and (max-width: 1200px) {
      .slider-prev:hover {
        left: 224px; } }
    @media screen and (max-width: 640px) {
      .slider-prev:hover {
        left: 15px; } }

.slider-next {
  right: 316px;
  -webkit-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
  transform: translate(50%, -50%); }
  @media screen and (min-width: 1433px) {
    .slider-next {
      right: 100%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      margin-left: 400px; } }
  @media screen and (max-width: 1200px) {
    .slider-next {
      right: 230px; } }
  @media screen and (max-width: 640px) {
    .slider-next {
      right: 15px; } }
  .slider-next:before {
    margin-left: 2px; }
    @media screen and (max-width: 640px) {
      .slider-next:before {
        margin-left: 0; } }
  .slider-next:hover {
    right: 310px; }
    @media screen and (min-width: 1433px) {
      .slider-next:hover {
        right: 100%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin-left: 406px; } }
    @media screen and (max-width: 1200px) {
      .slider-next:hover {
        right: 224px; } }
    @media screen and (max-width: 640px) {
      .slider-next:hover {
        right: 15px; } }

.contact {
  padding: 100px 0 110px;
  letter-spacing: .05em;
  background-image: url(../images/bg_contact.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media screen and (max-width: 640px) {
    .contact {
      padding: 30px 15px 45px; } }
  .contact .wrap {
    max-width: 1000px;
    margin: 0 auto 50px;
    font-size: 0;
    text-align: center; }
    @media screen and (max-width: 640px) {
      .contact .wrap {
        margin-bottom: 25px; } }

.contact__hdg {
  margin-bottom: 30px;
  color: #fff;
  font-size: 60px;
  text-align: center;
  font-family: "atlanta" !important;
  text-shadow: 0 0 18px rgba(47, 110, 152, 0.3); }
  @media screen and (max-width: 640px) {
    .contact__hdg {
      margin-bottom: 5px;
      font-size: 30px; } }

.contact__hdg-sub {
  max-width: 1000px;
  margin: 0 auto 60px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  letter-spacing: .05em;
  line-height: 2; }
  @media screen and (max-width: 640px) {
    .contact__hdg-sub {
      margin: 0 auto 30px;
      font-size: 14px;
      text-align: left; }
      .contact__hdg-sub + .contact__hdg-sub {
        margin-top: 10px;
        margin-bottom: 30px; } }

.column {
  position: relative;
  display: inline-block;
  width: calc(50% - 10px);
  height: 435px;
  padding-top: 45px;
  background-color: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 20px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 20px 5px rgba(0, 0, 0, 0.2);
  vertical-align: top;
  opacity: 0;
  background-color: #dbebf0; }
  @media screen and (max-width: 640px) {
    .column {
      display: block;
      width: 100%;
      height: auto;
      padding: 28px 0 25px;
      overflow: hidden;
      border-radius: 5px; }
      .column:before {
        border-radius: 5px 5px 0 0; } }
  .column + .column {
    margin-left: 19px; }
    @media screen and (max-width: 640px) {
      .column + .column {
        margin-left: 0;
        margin-top: 15px; } }
  .column .column__txt {
    margin-bottom: 20px;
    color: #2a6490;
    font-size: 20px;
    text-align: center; }
    @media screen and (max-width: 640px) {
      .column .column__txt {
        margin-bottom: 12px;
        font-size: 14px; } }
  .column ul {
    padding: 0 35px; }
    @media screen and (max-width: 640px) {
      .column ul {
        padding: 0 15px; } }
  .column li {
    position: relative;
    padding-left: 22px;
    color: #44453e;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    list-style: none;
    letter-spacing: .05em; }
    @media screen and (max-width: 640px) {
      .column li {
        padding-left: 15px;
        font-size: 14px; } }
    .column li + li {
      margin-top: 5px; }
    .column li:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 7px;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      background-color: #44453e; }
      @media screen and (max-width: 640px) {
        .column li:before {
          top: 7px;
          width: 9px;
          height: 9px; } }

.contact__btn {
  position: relative;
  width: calc(100% - 50px);
  margin: 0 auto;
  height: 108px;
  display: block;
  padding: 25px 0 25px 112px;
  margin-bottom: 30px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 75px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  background-image: url(/-/media/cojp/product/ism/sp/iot/images/bg_btn-contact.jpg);
  background-size: cover;
  background-position: center;
  border-color: #dbebf0; }
  @media screen and (max-width: 640px) {
    .contact__btn {
      display: block;
      width: calc(100% - 30px);
      height: 64px;
      position: relative;
      padding: 13px 0 14px;
      margin-bottom: 15px; } }
  .contact__btn:after {
    content: '\f105';
    position: absolute;
    top: 50%;
    right: 35px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff;
    font-size: 24px;
    font-family: "FontAwesome" !important; }
    @media screen and (max-width: 640px) {
      .contact__btn:after {
        right: 18px;
        font-size: 14px; } }
  .contact__btn:hover {
    opacity: .7; }
  .contact__btn .ico {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 10px; }
    @media screen and (max-width: 640px) {
      .contact__btn .ico {
        width: 46px;
        left: 9px; }
        .contact__btn .ico img {
          width: 100%; } }
  .contact__btn .txt {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    padding-right: 70px;
    color: #fff;
    font-size: 20px;
    line-height: 1.4; }
    @media screen and (max-width: 640px) {
      .contact__btn .txt {
        padding: 0;
        font-size: 12px; } }

.contact__txt {
  max-width: 860px;
  margin: 0 auto;
  color: #fff;
  font-size: 16px; }
  @media screen and (max-width: 640px) {
    .contact__txt {
      font-size: 14px; } }

.lineup {
  padding: 100px 0;
  text-align: center;
  background-color: #eeebe0; }
  @media screen and (max-width: 640px) {
    .lineup {
      padding: 50px 15px; } }
  .lineup a {
    position: relative;
    display: block;
    max-width: 1000px;
    height: 218px;
    margin: 0 auto;
    -webkit-box-shadow: 0px 0px 20px 2px rgba(49, 49, 49, 0.16);
    box-shadow: 0px 0px 20px 2px rgba(49, 49, 49, 0.16);
    background-image: url(../images/bg_lineup_bnr.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; }
    @media screen and (max-width: 640px) {
      .lineup a {
        height: 135px;
        background-image: url(../images/bg_lineup_bnr_sp.jpg); } }
    .lineup a .title {
      margin-top: 35px;
      margin-bottom: 24px;
      color: #fff;
      font-size: 35px;
      font-style: italic;
      letter-spacing: .1em;
      line-height: 1.2;
      text-shadow: 0 0 12px rgba(255, 255, 255, 0.5); }
      @media screen and (max-width: 640px) {
        .lineup a .title {
          margin-top: 9px;
          margin-bottom: 8px;
          font-size: 22px; } }
    .lineup a .btn {
      position: relative;
      width: 360px;
      padding: 3px 0;
      margin: 0 auto;
      color: #fff;
      font-size: 20px;
      letter-spacing: .1em;
      border: 1px solid #fff;
      border-radius: 25px;
      -webkit-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s; }
      .lineup a .btn:after {
        content: '\f105';
        position: absolute;
        right: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #fff;
        font-size: 20px;
        font-family: "FontAwesome" !important;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s; }
      @media screen and (max-width: 640px) {
        .lineup a .btn {
          padding: 2px 0;
          width: 200px;
          font-size: 14px; }
          .lineup a .btn:after {
            margin-top: -1px;
            right: 12px;
            font-size: 16px; } }
    .lineup a:hover .btn {
      color: #2a6490;
      background-color: #fff; }
      .lineup a:hover .btn:after {
        color: #2a6490; }

.box-bnr {
  padding: 120px 0;
  max-width: 1000px;
  margin: 0 auto; }

@media screen and (max-width: 640px) {
  .box-bnr {
    padding: 35px 15px 40px; } }

.box-bnr .bnr {
  display: block;
  position: relative;
  height: 218px;
  padding-top: 20px;
  text-align: center;
  text-decoration: none;
  background-image: url(../images/bg_bnr.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s; }

@media screen and (max-width: 640px) {
  .box-bnr .bnr {
    padding-top: 12px;
    height: 135px; } }

.box-bnr .bnr:hover {
  opacity: .6;
  -webkit-box-shadow: 0px 1px 20px 0px #949c9e;
  box-shadow: 0px 1px 20px 0px #949c9e; }

.box-bnr .bnr:hover .read-more:after {
  right: -10px; }

.box-bnr .bnr__fukidasi {
  position: relative;
  width: 150px;
  margin: 0 auto 8px;
  padding: 15px 0;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border-radius: 35px; }

.box-bnr .bnr__fukidasi:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 10px 0 10px;
  border-color: #ffffff transparent transparent transparent; }

@media screen and (max-width: 640px) {
  .box-bnr .bnr__fukidasi {
    width: 75px;
    margin: 0 auto 12px;
    padding: 8px 0;
    font-size: 11px; }
  .box-bnr .bnr__fukidasi:after {
    border-style: solid;
    border-width: 7px 6px 0 6px;
    border-color: #ffffff transparent transparent transparent; } }

.box-bnr .bnr__hdg {
  color: #fff;
  font-size: 72px;
  letter-spacing: .1em; }

@media screen and (max-width: 640px) {
  .box-bnr .bnr__hdg {
    font-size: 36px;
    line-height: 1; } }

.box-bnr .read-more {
  position: absolute;
  display: block;
  bottom: 12px;
  right: 20px;
  padding-right: 25px; }

@media screen and (max-width: 640px) {
  .box-bnr .read-more {
    right: initial;
    left: 50%;
    bottom: 8px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding-right: 10px;
    font-size: 11px; } }

.box-bnr .read-more img {
  width: 70px;
  height: auto;
  vertical-align: middle; }

@media screen and (max-width: 640px) {
  .box-bnr .read-more img {
    width: 40px; } }

.box-bnr .read-more:after {
  content: '\f105';
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  font-family: "FontAwesome" !important;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s; }

@media screen and (max-width: 640px) {
  .box-bnr .read-more:after {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1; } }

.box-bnr__txt {
  margin-bottom: 40px;
  font-size: 18px;
  text-align: center;
  letter-spacing: .05em; }

@media screen and (max-width: 640px) {
  .box-bnr__txt {
    margin-bottom: 28px;
    font-size: 14px; } }

.bnr-cv {
  position: fixed;
  padding: 28px 0;
  top: 50%;
  margin-top: -208px;
  right: 0;
  width: 115px;
  height: 380px;
  opacity: 1;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  text-align: center;
  background-image: url(/-/media/cojp/product/ism/sp/iot/images/bg_btn-cv.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 20px 0 0 20px;
  -webkit-box-shadow: 0px 1px 20px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 20px 5px rgba(0, 0, 0, 0.2); }
  .bnr-cv img {
    width: 76px; }
  .bnr-cv p {
    margin-top: 20px; }
    .bnr-cv p img {
      width: auto;
      height: 165px; }
  .bnr-cv:hover {
    opacity: .7; }
  @media screen and (max-width: 640px) {
    .bnr-cv {
      display: none; } }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@media screen and (max-width: 640px) {
  .only-pc {
    display: none; } }

.only-sp {
  display: none; }

@media screen and (max-width: 640px) {
  .only-sp {
    display: block; } }

.box-note {
  padding: 10px;
  font-size: 12px;
  background-color: #eeebe0; }

@media screen and (max-width: 640px) {
  .box-note {
    font-size: 10px; } }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }