@charset "UTF-8";
.kitato-bg {
  background-color: #fffcec;
}

.kitato-bg img {
  width: 100%;
  height: auto;
}

.kitato-bg a {
  color: #ecb709;
  font-weight: bold;
  text-shadow: 1px 1px 1px #fdffef;
}

.kitato-contents a {
  color: #ecb708;
  font-weight: bold;
}

.kitato-contents a {
  font-weight: bold;
}

.kitato-caption3 {
  font-size: 2rem;
  border-bottom: 3px solid #fcfc60;
  margin-bottom: 10px;
}

.kitato-caption3:first-letter {
  font-size: 3rem;
  font-weight: bold;
  color: #ebba1b;
  padding-right: 5px;
}

/* 沿革用 */
.history {
  position: relative;
  margin: 3em auto;
  padding-bottom: 2em;
}

.history::before {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  content: "";
  background: black;
}

.history .history_year {
  position: relative;
  font-family: serif;
  color: rgba(141, 115, 0, 0.1);
  letter-spacing: 3px;
}

.history .history_year::before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  content: "";
  background: black;
  border-radius: 50%;
}

.history .history_caption {
  font-size: 1.5rem;
  font-weight: bold;
  color: #b4a625;
  margin: 0;
}

.history .history_item {
  margin: 0px 0px 0px 30px;
}

.detail-kitato {
  margin: -33px 0 0 170px;
  font-size: medium;
  font-weight: normal;
  color: #3D3D3D;
}

@media screen and (max-width: 767px) and (min-width: 541px) {
  .detail-kitato {
    margin: 0;
    font-size: medium;
    font-weight: normal;
    color: #3D3D3D;
  }
}
@media screen and (max-width: 540px) {
  .detail-kitato {
    margin: 0;
    font-size: medium;
    font-weight: normal;
    color: #3D3D3D;
  }
}
.ggmp {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  margin-bottom: 5rem;
}

.ggmp iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kitato-dark-bg {
  background-color: #FFF5C3;
  color: #ecb708;
}

.kitato-dark-bg a {
  color: #ecb709;
  font-weight: bold;
  text-shadow: 1px 1px 1px #fdffef;
}

.ul-align-center ul {
  list-style: disc;
}

.ul-align-center li {
  font-size: 1.2rem;
}

/* 992px以上 */
@media screen and (min-width: 991px) {
  /* 沿革 */
  .history::before {
    left: 175px;
  }
  .history .history_year {
    margin-left: 165px;
    font-size: 4rem;
  }
  .history .history_year::before {
    top: 60%;
    left: -26px;
  }
  .history .history_caption {
    margin-top: -50px;
    margin-left: -26px;
  }
}
/* 768～991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* 沿革 */
  .history::before {
    left: 175px;
  }
  .history .history_year {
    margin-left: 165px;
    font-size: 4rem;
  }
  .history .history_year::before {
    top: 60%;
    left: -26px;
  }
  .history .history_caption {
    margin-top: -50px;
    margin-left: -26px;
  }
}
/* 541px～767px */
@media screen and (max-width: 767px) and (min-width: 541px) {
  /* 沿革 */
  .history::before {
    left: 0;
  }
  .history .history_year {
    margin: 0;
    font-size: 2rem;
  }
  .history .history_year::before {
    top: 70%;
    left: -36px;
  }
  .history .history_caption {
    margin-top: -26px;
    margin-left: 10px;
  }
}
/* 540px以下 */
@media screen and (max-width: 540px) {
  /* 沿革 */
  .history::before {
    left: 0;
  }
  .history .history_year {
    margin: 0;
    font-size: 2rem;
  }
  .history .history_year::before {
    top: 70%;
    left: -36px;
  }
  .history .history_caption {
    margin-top: -26px;
    margin-left: 10px;
  }
}
#effort {
  /* Yu Gothic Bold 89px 49.0 1.0 */
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
  color: rgb(44, 48, 167);
  text-align: left;
}

/* 992px以上 */
@media screen and (min-width: 991px) {
  #effort {
    position: absolute;
    top: 7.5rem;
    left: 5vw;
    right: 0;
    margin: 0 auto;
    font-size: 2vw;
    line-height: 1.45;
  }
}
/* 768～991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #effort {
    position: absolute;
    top: 4.5vw;
    left: 5vw;
    right: 0;
    margin: 0 auto;
    font-size: 2vw;
    line-height: 1.45;
  }
}
/* 541px～767px */
@media screen and (max-width: 767px) and (min-width: 541px) {
  /* KITATOとは */
  #effort {
    position: absolute;
    top: 5vw;
    left: 5vw;
    font-size: 3vw;
    line-height: 1.45;
  }
}
/* 540px以下 */
@media screen and (max-width: 540px) {
  #effort {
    position: absolute;
    top: 5vw;
    left: 5vw;
    right: 0;
    margin: 0 auto;
    font-size: 3vw;
    line-height: 1.45;
  }
}
@media screen and (min-width: 1500px) {
  #effort {
    position: absolute;
    top: 8.5rem;
    left: 5rem;
    right: 0;
    margin: 0 auto;
    font-size: 2rem;
    line-height: 1.45;
  }
}
/* HTとは？ */
.ht-title {
  position: relative;
}

@media screen and (max-width: 1500px) {
  .ht-title h1 {
    position: absolute;
    /* Yu Gothic Bold 89px 49.0 1.0 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: black;
    top: 10vw;
    left: 0;
    font-size: 3.5vw;
    padding-left: 10vw;
  }
  .ht-title h2 {
    position: absolute;
    /* Yu Gothic Bold 89px 49.0 1.0 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: black;
    top: 18vw;
    font-size: 1.5vw;
    padding-right: 10vw;
    right: 0;
    line-height: 2;
  }
}
@media screen and (min-width: 1500px) {
  .ht-title h1 {
    position: absolute;
    /* Yu Gothic Bold 89px 49.0 1.0 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: black;
    top: 10rem;
    left: 0;
    font-size: 3.5rem;
    padding-left: 10rem;
  }
  .ht-title h2 {
    position: absolute;
    /* Yu Gothic Bold 89px 49.0 1.0 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: black;
    top: 20rem;
    font-size: 1.5rem;
    padding-right: 10rem;
    right: 0;
    line-height: 2;
  }
}
/* 992px以上 */
@media screen and (min-width: 991px) {
  .ht-dark-bg, .development-dark-bg {
    padding: 48px 24px 48px 24px;
  }
}
/* 768～991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .kitato-bg, .development-dark-bg, .ht-dark-bg {
    padding: 48px 24px;
  }
}
/* 541px～767px */
@media screen and (max-width: 767px) and (min-width: 541px) {
  .kitato-bg, .development-dark-bg, .ht-dark-bg {
    padding: 48px 24px;
  }
}
/* 540px以下 */
@media screen and (max-width: 540px) {
  .kitato-bg, .development-dark-bg, .ht-dark-bg {
    padding: 48px 10px;
  }
}
.development-bg a[aria-expanded=false]:after, .ht-bg a[aria-expanded=false]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f358";
}

.development-bg a[aria-expanded=true]:after, .ht-bg a[aria-expanded=true]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f35b";
}

.ht-bg {
  background-color: #fff3fc;
}

.ht-dark-bg {
  background-color: rgba(255, 227, 250, 0.88);
  color: #e65fab;
}

.ht-dark-bg a {
  color: #d44797;
}

.ul-align-center ul {
  list-style: disc;
}

.ul-align-center li {
  font-size: 1.2rem;
}

.ht-caption3 {
  font-size: 2rem;
  border-bottom: 3px solid #ffbbdd;
  margin-bottom: 10px;
}

.ht-caption3:first-letter {
  font-size: 3rem;
  font-weight: bold;
  color: #E77CB9;
  padding-right: 5px;
}

.ht-cell {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.945);
  border-collapse: collapse;
  border: solid 1px rgb(156, 156, 156);
  vertical-align: top;
  display: table-cell;
}

.midashi {
  padding: 10px;
  background-color: rgb(238, 238, 238);
  height: 40px;
  border-collapse: collapse;
  border: solid 1px rgb(156, 156, 156);
  display: table-cell;
  text-align: center;
}

/* 541px～767px */
@media screen and (max-width: 767px) and (min-width: 541px) {
  /* HTとは */
  .midashi {
    padding: 10px;
    background-color: rgb(238, 238, 238);
    height: 40px;
    border: solid 1.5px rgb(156, 156, 156);
    display: table-cell;
    vertical-align: middle;
  }
  .ht-cell {
    padding: 10px;
  }
}
ul.merit {
  list-style: none;
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 10px;
}

ul.merit li {
  position: relative;
  padding-left: 10px;
  margin-left: 10px;
}

ul.merit li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f058"; /* アイコンのunicode */
  color: #2fbfa6;
  font-weight: 900;
  left: -10px;
}

ul.demerit {
  list-style: none;
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 10px;
}

ul.demerit li {
  position: relative;
  padding-left: 15px;
  margin-left: 10px;
}

ul.demerit li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: url("/img/what_ht/alert.png");
  /*content: "\F071"; /* アイコンのunicode */
  /*color: #2fbfa6;*/
  font-weight: 900;
  left: -10px;
}

/* 受託開発とは */
.development-bg a[aria-expanded=false]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f358";
}

.development-bg a[aria-expanded=true]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f35b";
}

.development-title {
  position: relative;
}

.development-bg {
  background-color: #EDFDFF;
}

.development-dark-bg {
  background-color: rgba(211, 230, 252, 0.6);
  color: #20AEE5;
}

.development-dark-bg a, .development-contents a {
  color: #20AEE5;
}

.development-caption3 {
  border-bottom: 3px solid #66ccff;
  margin-bottom: 10px;
}

.development-caption3:first-letter {
  font-size: 150%;
  font-weight: bold;
  color: #20AEE5;
  padding-right: 5px;
}

/* 受託開発フローチャート用 */
.dev_flow {
  padding: 0;
  margin: 0;
}

.dev_flow .flow_icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #20AEE5;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height: 50px;
  float: left;
}

/* 992px以上 */
@media screen and (min-width: 991px) {
  .development-dark-bg {
    padding: 48px 24px 48px 24px;
  }
  table.reizo {
    width: 40%;
  }
  /* 導入の流れ */
  .dev_flow .flow_icon {
    margin-top: 15px;
    margin-right: 15px;
  }
  .dev_flow .flow_title {
    position: relative;
    width: 100px;
    min-height: 80px;
    height: 100%;
    max-height: 150px;
    background: #20AEE5;
    text-align: center;
    vertical-align: middle;
    float: left;
    color: white;
    margin-right: 15px;
  }
  .dev_flow .flow_title::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -10px;
    left: 0;
    border-style: solid;
    border-color: #20AEE5 transparent transparent transparent;
    border-width: 10px 50px 0 50px;
    z-index: 1;
  }
  .flow_item:last-child > .flow_title::after {
    display: none;
  }
  .flow_title span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    text-align: center; /*一応BOX内の文字も中央寄せ*/
  }
  .flow_text {
    float: left; /* 要素を右に回り込ませる */
    width: calc(100% - 200px); /* 文字の箱の大きさ調整 */
  }
  .dev_flow .flow_item {
    margin-bottom: 10px;
  }
}
/* 768～991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .kitato-bg, .development-dark-bg {
    padding: 48px 24px;
  }
  /* 導入の流れ */
  .dev_flow .flow_icon {
    margin-top: 15px;
    margin-right: 15px;
  }
  .dev_flow .flow_title {
    position: relative;
    width: 100px;
    min-height: 80px;
    height: 100%;
    max-height: 150px;
    background: #20AEE5;
    text-align: center;
    vertical-align: middle;
    float: left;
    color: white;
    margin-right: 15px;
  }
  .dev_flow .flow_title::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -10px;
    left: 0;
    border-style: solid;
    border-color: #20AEE5 transparent transparent transparent;
    border-width: 10px 50px 0 50px;
    z-index: 1;
  }
  .flow_item:last-child > .flow_title::after {
    display: none;
  }
  .flow_title span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    text-align: center; /*一応BOX内の文字も中央寄せ*/
  }
  .flow_text {
    float: left; /* 要素を右に回り込ませる */
    width: calc(100% - 200px); /* 文字の箱の大きさ調整 */
  }
  .dev_flow .flow_item {
    margin-bottom: 10px;
  }
  table.reizo {
    width: 50%;
  }
}
/* 541px～767px */
@media screen and (max-width: 767px) and (min-width: 541px) {
  .kitato-bg, .development-dark-bg {
    padding: 48px 24px;
  }
  /* 受託開発フローチャート */
  .dev_flow .flow_icon {
    margin-top: 10px;
    margin-right: 10px;
  }
  .dev_flow .flow_title {
    position: relative;
    color: #20AEE5;
    font-size: 1.125rem;
    font-weight: 300;
    height: 70px;
    z-index: 0;
  }
  .flow_title span {
    position: absolute;
    top: 50%;
    z-index: 0;
    transform: translate(0, -50%);
  }
  .flow_text {
    float: left;
  }
  .dev_flow .flow_item {
    position: relative;
    margin-bottom: 50px;
  }
  .dev_flow .flow_item::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -45px;
    left: calc(50% - 50px);
    border-style: solid;
    border-color: #66CCFF transparent transparent transparent;
    border-width: 20px 50px 0 50px;
    z-index: 1;
  }
  .dev_flow .flow_item:last-child::after {
    display: none;
  }
  table.reizo {
    width: 100%;
  }
  .wd {
    width: 30%;
  }
  .detail {
    line-height: 2;
  }
}
/* 540px以下 */
@media screen and (max-width: 540px) {
  .kitato-bg, .development-dark-bg {
    padding: 48px 10px;
  }
  table.reizo {
    width: 100%;
  }
  /* 受託開発フローチャート */
  .dev_flow .flow_icon {
    margin-top: 10px;
    margin-right: 10px;
  }
  .dev_flow .flow_title {
    position: relative;
    color: #20AEE5;
    font-size: 1.125rem;
    font-weight: 300;
    height: 70px;
    z-index: 0;
  }
  .flow_title span {
    position: absolute;
    top: 50%;
    z-index: 0;
    transform: translate(0, -50%);
  }
  .flow_text {
    float: left;
  }
  .dev_flow .flow_item {
    position: relative;
    margin-bottom: 50px;
  }
  .dev_flow .flow_item::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -45px;
    left: calc(50% - 50px);
    border-style: solid;
    border-color: #66CCFF transparent transparent transparent;
    border-width: 20px 50px 0 50px;
    z-index: 1;
  }
  .dev_flow .flow_item:last-child::after {
    display: none;
  }
}
@media screen and (max-width: 1500px) {
  .development-title h1 {
    position: absolute;
    /* Yu Gothic Bold 89px 49.0 1.0 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: black;
    top: 10vw;
    left: 0;
    font-size: 3.5vw;
    padding-left: 10vw;
  }
  .development-title h2 {
    position: absolute;
    /* Yu Gothic Bold 89px 49.0 1.0 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: black;
    top: 18vw;
    font-size: 1.5vw;
    padding-right: 10vw;
    right: 0;
    line-height: 2;
  }
}
@media screen and (min-width: 1499px) {
  .development-title h1 {
    position: absolute;
    /* Yu Gothic Bold 89px 49.0 1.0 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: black;
    top: 10rem;
    left: 0;
    font-size: 3rem;
    padding-left: 10rem;
  }
  .development-title h2 {
    position: absolute;
    /* Yu Gothic Bold 89px 49.0 1.0 */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: black;
    top: 20rem;
    font-size: 1.5rem;
    padding-right: 10rem;
    right: 0;
    line-height: 2;
  }
}
/* 冷蔵庫でも使える？ */
table.reizo {
  border-collapse: collapse;
  border: solid 1.5px rgb(156, 156, 156);
}

table.reizo th {
  padding: 10px;
  background-color: rgb(238, 238, 238);
  height: 40px;
  border: solid 1.5px rgb(156, 156, 156);
  text-align: center;
}

table.reizo td {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.945);
  border: solid 1.5px rgb(156, 156, 156);
  vertical-align: top;
  display: table-cell;
}