@charset "utf-8";

/* --------------------
/column/iot-service/
-------------------- */
/* 
　セキュモバ特長
-------------------- */
.layout-main .service .white-area .subheadline {
  margin-bottom: 20px;
}

.layout-main .service .white-area .subheadline .text {
  text-align: center;
  font-size: 24px;
}

.service .white-area .feature-area {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 20px;
}

.service .white-area .feature-area .image {
  width: 120px;
}

.service .white-area .feature-area .image img {
  width: 100%;
}

.service .white-area .feature-area .text-area {
  width: calc(100% - 140px);
}

.service .white-area .feature-area:last-child {
  margin-bottom: 0;
}

.service .miniheadline .blue-text {
  color: #2C95BB;
  font-size: 20px;
}

.service .lead .strong.blue-text {
  font-weight: bold;
  color: #2C95BB;
}

@media screen and (min-width: 1600px) {
  .layout-main .service .white-area .subheadline {
    margin-bottom: 1.25vw;
  }

  .layout-main .service .white-area .subheadline .text {
    text-align: center;
    font-size: 1.5vw;
  }

  .service .white-area .feature-area {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    gap: 1.25vw;
    margin-bottom: 1.25vw;
  }

  .service .white-area .feature-area .image {
    width: 7.5vw;
  }

  .service .white-area .feature-area .image img {
    width: 100%;
  }

  .service .white-area .feature-area .text-area {
    width: calc(100% - 7.5vw);
  }

  .service .white-area .feature-area:last-child {
    margin-bottom: 0;
  }

  .service .miniheadline .blue-text {
    color: #2C95BB;
    font-size: 1.25vw;
  }

.service .lead .strong.blue-text {
  font-weight: bold;
  color: #2C95BB;
  }
}

@media screen and (max-width: 767px) {
  .service .white-area .feature-area {
    flex-direction: column;
  }

  .service .white-area .feature-area .image {
    width: auto;
    margin: 0 40px;
  }

  .service .white-area .feature-area .text-area { 
    width:auto;
  }
}

/* 
  サービスの選び方
-------------------- */
.service-choice .sub-section .table .th-service {
  width: 190px;
}

.section .sub-section .table.blue .th-needs,
.service-choice .sub-section .table .th-needs {
  width: 240px;
}

.section .sub-section .table.blue .th-solution {
  width: auto;
}

@media screen and (min-width: 1600px) {
  .service-choice .sub-section .table .th-service {
    width: 11.875vw;
  }

  .section .sub-section .table.blue .th-needs,
  .service-choice .sub-section .table .th-needs {
    width: 15vw;
  }
}

/* 
　ユースケース
-------------------- */
.use-case .sub-section .white-area {
  margin-bottom: 40px;
}

.use-case .flex-layout {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
}

.use-case .flex-layout .image {
  width: 280px;
}

.use-case .flex-layout .image img {
  margin: 0 20px;
  width: calc(100% - 40px);
  display: block;
}

.use-case .flex-layout .image .score-area {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 16px;
}

.use-case .flex-layout .image .score-area .score {
  font-size: 32px;
  font-weight: bold;
  color: #21B9F3;
  padding-right: 4px;
}

.use-case .flex-layout .image .strong.ruby {
  font-size: 12px;
  display: block;
  text-align: center;
  padding-top: 8px;
}

.use-case .flex-layout .miniheadline.block-title {
  display: block;  
}

.use-case .flex-layout .miniheadline.block-title .center {
  text-align: center;
  font-size: 20px;
  padding: 0;
}

.use-case .flex-layout .miniheadline .text {
  font-size: 20px;
}

.use-case .flex-layout .miniheadline.block-title .center .ruby {
  font-size: 12px;
}

.use-case .flex-layout .score-area .text {
  padding-bottom: 6px;
  padding-right: 10px;
}

.use-case .flex-layout .text-area { 
  width: calc(100% - 300px);
  padding-left: 0;
}

.use-case .flex-layout .text-area .arrow {
  width: 48px;
  margin: 0 auto -20px auto;
}

@media screen and (min-width: 1600px) {
  .use-case .sub-section .white-area {
    margin-bottom: 2.5vw;
  }

  .use-case .flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1.25vw;
  }

  .use-case .flex-layout .image {
    width: 17.5vw;
  }

  .use-case .flex-layout .image img {
    margin: 0 1.25vw;
    width: calc(100% - 2.5vw);
    display: block;
  }

  .use-case .flex-layout .image .score-area {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 1vw;
  }

  .use-case .flex-layout .image .score-area .score {
    font-size: 2vw;
    font-weight: bold;
    color: #21B9F3;
    padding-right: 0.25vw;
  }

  .use-case .flex-layout .image .strong.ruby {
    font-size: 0.75vw;
    display: block;
    text-align: center;
    padding-top: 0.5vw;
  }

  .use-case .flex-layout .miniheadline.block-title {
    display: block;  
  }

  .use-case .flex-layout .miniheadline.block-title .center {
    text-align: center;
    font-size: 1.25vw;
    padding: 0;
  }

  .use-case .flex-layout .miniheadline .text {
    font-size: 1.25vw;
  }

  .use-case .flex-layout .miniheadline.block-title .center .ruby {
    font-size: 0.75vw;
  }

  .use-case .flex-layout .score-area .text {
    padding-bottom: 0.375vw;
    padding-right: 0.625vw;
  }

  .use-case .flex-layout .text-area { 
    width: calc(100% - 18.75vw);
    padding-left: 0;
  }

  .use-case .flex-layout .text-area .arrow {
    width: 3vw;
    margin: 0 auto 1.25vw auto;
  }
}

@media screen and (max-width: 767px) {
  .use-case .flex-layout {
    flex-direction: column;
  }

  .use-case .flex-layout .image {
    width: auto;
  }

  .use-case .flex-layout .text-area {
    width: auto;
    padding-top: 0;
  }
}

/* 
  キャンペーン
-------------------- */
.campaign .flex-layout {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;
  gap: 20px;
}

.campaign .flex-layout .image {
  width: calc(50% - 10px);
  display: block;
}

.campaign .flex-layout .image .click-area img {
  transition: all 0.2s ease-in-out;
}

.campaign .flex-layout .image .click-area:hover img {
  opacity: 0.8;
}

.campaign .flex-layout .lead {
  width: calc(50% - 10px);
  display: block;
}

@media screen and (min-width: 1600px) {
  .campaign .flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: row;
    gap: 1.25vw;
  }

  .campaign .flex-layout .image {
    width: calc(50% - 0.625vw);
    display: block;
  }

  .campaign .flex-layout .image .click-area img {
    transition: all 0.2s ease-in-out;
  }

  .campaign .flex-layout .image .click-area:hover img {
    opacity: 0.8;
  }

  .campaign .flex-layout .lead {
    width: calc(50% - 0.625vw);
    display: block;
  }  
}

@media screen and (max-width: 767px) {
  .campaign .flex-layout {
    flex-direction: column;
    gap: 0;
  }

  .campaign .flex-layout .image { 
    width: auto;
  }

  .campaign .flex-layout .lead {
    width: auto;
  }
}