@charset "UTF-8";
.slick-loading .slick-list {
  background: none;
}
.slick-dots li button::before {
  content: none;
}
.block {
  margin: 80px auto 0;
}
@media screen and (max-width: 767px) {
  .block {
    margin-top: 60px;
  }
}
.block:first-of-type {
  margin-top: 0;
}
.block.area .block_title {
  margin: 0 auto 40px;
}
@media screen and (max-width: 767px) {
  .block.area .block_title {
    margin-bottom: 20px;
  }
}
.block.cat .block_title {
  margin: 0 auto 30px;
}
@media screen and (max-width: 767px) {
  .block.cat .block_title {
    margin-bottom: 20px;
  }
}
.block.reset {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .block.reset {
    margin-top: 20px;
  }
}
.local_nav .item_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.area .local_nav .item_wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.area .local_nav .item {
  border-left: 1px solid #008803;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 80px;
  width: 16.66666667%;
}
@media screen and (max-width: 1359px) {
  .area .local_nav .item {
    margin: 20px 0 0;
    width: 33.33333333%;
  }
}
@media screen and (max-width: 767px) {
  .area .local_nav .item {
    border-bottom: 1px solid #008803;
    margin-top: 0;
    width: 50%;
  }
}
.area .local_nav .item:first-of-type {
  border-left: none;
}
@media screen and (max-width: 1359px) {
  .area .local_nav .item:nth-of-type(-n+3) {
    margin-top: 0;
  }
}
@media screen and (max-width: 1359px) {
  .area .local_nav .item:nth-of-type(3n+1) {
    border-left: none;
  }
}
@media screen and (max-width: 767px) {
  .area .local_nav .item:nth-of-type(3n+1) {
    border-left: 1px solid #008803;
  }
}
@media screen and (max-width: 767px) {
  .area .local_nav .item:nth-of-type(odd) {
    border-left: none;
  }
}
@media screen and (max-width: 767px) {
  .area .local_nav .item:nth-of-type(-n+2) {
    border-top: 1px solid #008803;
  }
}
.area .local_nav .item button {
  background: none;
  background-repeat: no-repeat;
  background-position: 0 center;
  border: none;
  cursor: pointer;
  color: #008803;
  font-weight: 700;
  font-size: 1.3125em;
  letter-spacing: .1em;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0 0 106px;
  width: 100%;
  height: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .area .local_nav .item button {
    font-size: 1.14285714em;
    padding-left: 60px;
  }
}
.area .local_nav .item button:hover {
  background-color: #008803;
  color: #fff;
  text-decoration: none;
}
.area .local_nav .item button.active {
  background-color: #008803;
  color: #fff;
}
.area .local_nav .item button::before {
  content: '';
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  left: 53px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .area .local_nav .item button::before {
    left: 30px;
  }
}
.area .local_nav .item button .en {
  font-size: .61904762em;
  letter-spacing: .1em;
  display: block;
  margin: 10px 0 0;
}
@media screen and (max-width: 767px) {
  .area .local_nav .item button .en {
    font-size: .75em;
    margin-top: 6px;
  }
}
.area .local_nav .item.area01 button:hover::before {
  background-image: url(../images/project/icon_area-aomori-on.svg);
}
.area .local_nav .item.area01 button.active::before {
  background-image: url(../images/project/icon_area-aomori-on.svg);
}
.area .local_nav .item.area01 button::before {
  background-image: url(../images/project/icon_area-aomori.svg);
  width: 50px;
  height: 48px;
}
@media screen and (max-width: 767px) {
  .area .local_nav .item.area01 button::before {
    width: 40px;
  }
}
.area .local_nav .item.area02 button:hover::before {
  background-image: url(../images/project/icon_area-akita-on.svg);
}
.area .local_nav .item.area02 button.active::before {
  background-image: url(../images/project/icon_area-akita-on.svg);
}
.area .local_nav .item.area02 button::before {
  background-image: url(../images/project/icon_area-akita.svg);
  width: 29px;
  height: 48px;
}
@media screen and (max-width: 767px) {
  .area .local_nav .item.area02 button::before {
    width: 23.2px;
  }
}
.area .local_nav .item.area03 button:hover::before {
  background-image: url(../images/project/icon_area-iwate-on.svg);
}
.area .local_nav .item.area03 button.active::before {
  background-image: url(../images/project/icon_area-iwate-on.svg);
}
.area .local_nav .item.area03 button::before {
  background-image: url(../images/project/icon_area-iwate.svg);
  width: 30px;
  height: 48px;
}
@media screen and (max-width: 767px) {
  .area .local_nav .item.area03 button::before {
    width: 24px;
  }
}
.area .local_nav .item.area04 button:hover::before {
  background-image: url(../images/project/icon_area-miyagi-on.svg);
}
.area .local_nav .item.area04 button.active::before {
  background-image: url(../images/project/icon_area-miyagi-on.svg);
}
.area .local_nav .item.area04 button::before {
  background-image: url(../images/project/icon_area-miyagi.svg);
  width: 42px;
  height: 48px;
}
@media screen and (max-width: 767px) {
  .area .local_nav .item.area04 button::before {
    width: 33.6px;
  }
}
.area .local_nav .item.area05 button:hover::before {
  background-image: url(../images/project/icon_area-yamagata-on.svg);
}
.area .local_nav .item.area05 button.active::before {
  background-image: url(../images/project/icon_area-yamagata-on.svg);
}
.area .local_nav .item.area05 button::before {
  background-image: url(../images/project/icon_area-yamagata.svg);
  width: 28px;
  height: 46px;
}
@media screen and (max-width: 767px) {
  .area .local_nav .item.area05 button::before {
    width: 22.4px;
  }
}
.area .local_nav .item.area06 button:hover::before {
  background-image: url(../images/project/icon_area-fukushima-on.svg);
}
.area .local_nav .item.area06 button.active::before {
  background-image: url(../images/project/icon_area-fukushima-on.svg);
}
.area .local_nav .item.area06 button::before {
  background-image: url(../images/project/icon_area-fukushima.svg);
  width: 60px;
  height: 48px;
}
@media screen and (max-width: 767px) {
  .area .local_nav .item.area06 button::before {
    width: 48px;
  }
}
.cat .local_nav {
  text-align: center;
}
.cat .local_nav .item_wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 0 -20px;
  max-width: 1100px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item_wrap {
    margin-left: 0;
  }
}
.cat .local_nav .item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 0 0 20px 20px;
  width: 420px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item {
    margin-bottom: 4px;
    margin-left: 0;
    width: 100%;
  }
}
.cat .local_nav .item.w_half {
  width: 200px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item.w_half {
    width: 100%;
  }
}
.cat .local_nav .item button {
  background: #fff;
  border: 2px solid #ccc;
  cursor: pointer;
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 700;
  font-size: 1.3125em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 60px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button {
    font-size: 1em;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 0 0 0 50px;
    height: 40px;
  }
}
.cat .local_nav .item button::before {
  content: '';
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  margin: 0 14px 0 0;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button::before {
    position: absolute;
    top: 50%;
    left: 10px;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
.cat .local_nav .item button[data-categoryid="震災復興・地震対策"] {
  border-color: #b64c89;
  color: #b64c89;
}
.cat .local_nav .item button[data-categoryid="震災復興・地震対策"]:hover {
  background-color: #b64c89;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="震災復興・地震対策"]:hover::before {
  background-image: url(../images/project/icon-cat01-on.svg);
}
.cat .local_nav .item button[data-categoryid="震災復興・地震対策"].active {
  background-color: #b64c89;
  border: 2px solid #b64c89;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="震災復興・地震対策"].active::before {
  background-image: url(../images/project/icon-cat01-on.svg);
}
.cat .local_nav .item button[data-categoryid="震災復興・地震対策"]::before {
  background-image: url(../images/project/icon-cat01.svg);
  width: 44px;
  height: 32px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button[data-categoryid="震災復興・地震対策"]::before {
    width: 12.57142857%;
    height: 42.66666667%;
  }
}
.cat .local_nav .item button[data-categoryid="河川橋りょう改築"] {
  border-color: #e57998;
  color: #e57998;
}
.cat .local_nav .item button[data-categoryid="河川橋りょう改築"]:hover {
  background-color: #e57998;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="河川橋りょう改築"]:hover::before {
  background-image: url(../images/project/icon-cat02-on.svg);
}
.cat .local_nav .item button[data-categoryid="河川橋りょう改築"].active {
  background-color: #e57998;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="河川橋りょう改築"].active::before {
  background-image: url(../images/project/icon-cat02-on.svg);
}
.cat .local_nav .item button[data-categoryid="河川橋りょう改築"]::before {
  background-image: url(../images/project/icon-cat02.svg);
  width: 40px;
  height: 28px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button[data-categoryid="河川橋りょう改築"]::before {
    width: 11.42857143%;
    height: 37.33333333%;
  }
}
.cat .local_nav .item button[data-categoryid="列車制御・情報通信"] {
  border-color: #6064aa;
  color: #6064aa;
}
.cat .local_nav .item button[data-categoryid="列車制御・情報通信"]:hover {
  background-color: #6064aa;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="列車制御・情報通信"]:hover::before {
  background-image: url(../images/project/icon-cat03-on.svg);
}
.cat .local_nav .item button[data-categoryid="列車制御・情報通信"].active {
  background-color: #6064aa;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="列車制御・情報通信"].active::before {
  background-image: url(../images/project/icon-cat03-on.svg);
}
.cat .local_nav .item button[data-categoryid="列車制御・情報通信"]::before {
  background-image: url(../images/project/icon-cat03.svg);
  width: 31px;
  height: 37px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button[data-categoryid="列車制御・情報通信"]::before {
    width: 8.85714286%;
    height: 49.33333333%;
  }
}
.cat .local_nav .item button[data-categoryid="駅・サービス設備関連"] {
  border-color: #4bac74;
  color: #4bac74;
}
.cat .local_nav .item button[data-categoryid="駅・サービス設備関連"]:hover {
  background-color: #4bac74;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="駅・サービス設備関連"]:hover::before {
  background-image: url(../images/project/icon-cat04-on.svg);
}
.cat .local_nav .item button[data-categoryid="駅・サービス設備関連"].active {
  background-color: #4bac74;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="駅・サービス設備関連"].active::before {
  background-image: url(../images/project/icon-cat04-on.svg);
}
.cat .local_nav .item button[data-categoryid="駅・サービス設備関連"]::before {
  background-image: url(../images/project/icon-cat04.svg);
  width: 31px;
  height: 36px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button[data-categoryid="駅・サービス設備関連"]::before {
    width: 8.85714286%;
    height: 48%;
  }
}
.cat .local_nav .item button[data-categoryid="立体交差化"] {
  border: 2px solid #f89f69;
  color: #f89f69;
}
.cat .local_nav .item button[data-categoryid="立体交差化"]:hover {
  background-color: #f89f69;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="立体交差化"]:hover::before {
  background-image: url(../images/project/icon-cat05-on.svg);
}
.cat .local_nav .item button[data-categoryid="立体交差化"].active {
  background-color: #f89f69;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="立体交差化"].active::before {
  background-image: url(../images/project/icon-cat05-on.svg);
}
.cat .local_nav .item button[data-categoryid="立体交差化"]::before {
  background-image: url(../images/project/icon-cat05.svg);
  width: 44px;
  height: 32px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button[data-categoryid="立体交差化"]::before {
    width: 12.57142857%;
    height: 42.66666667%;
  }
}
.cat .local_nav .item button[data-categoryid="エネルギー・電力システム"] {
  border: 2px solid #87bdeb;
  color: #87bdeb;
}
.cat .local_nav .item button[data-categoryid="エネルギー・電力システム"]:hover {
  background-color: #87bdeb;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="エネルギー・電力システム"]:hover::before {
  background-image: url(../images/project/icon-cat06-on.svg);
}
.cat .local_nav .item button[data-categoryid="エネルギー・電力システム"].active {
  background-color: #87bdeb;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="エネルギー・電力システム"].active::before {
  background-image: url(../images/project/icon-cat06-on.svg);
}
.cat .local_nav .item button[data-categoryid="エネルギー・電力システム"]::before {
  background-image: url(../images/project/icon-cat06.svg);
  width: 31px;
  height: 38px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button[data-categoryid="エネルギー・電力システム"]::before {
    width: 8.85714286%;
    height: 50.66666667%;
  }
}
.cat .local_nav .item button[data-categoryid="新幹線ネットワークプロジェクト"] {
  border: 2px solid #c1a163;
  color: #c1a163;
}
.cat .local_nav .item button[data-categoryid="新幹線ネットワークプロジェクト"]:hover {
  background-color: #c1a163;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="新幹線ネットワークプロジェクト"]:hover::before {
  background-image: url(../images/project/icon-cat07-on.svg);
}
.cat .local_nav .item button[data-categoryid="新幹線ネットワークプロジェクト"].active {
  background-color: #c1a163;
  color: #fff;
}
.cat .local_nav .item button[data-categoryid="新幹線ネットワークプロジェクト"].active::before {
  background-image: url(../images/project/icon-cat07-on.svg);
}
.cat .local_nav .item button[data-categoryid="新幹線ネットワークプロジェクト"]::before {
  background-image: url(../images/project/icon-cat07.svg);
  width: 31px;
  height: 38px;
}
@media screen and (max-width: 767px) {
  .cat .local_nav .item button[data-categoryid="新幹線ネットワークプロジェクト"]::before {
    width: 8.85714286%;
    height: 50.66666667%;
  }
}
.reset .local_nav {
  text-align: center;
}
.reset .local_nav .item_wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 0 -20px;
  max-width: 1100px;
}
@media screen and (max-width: 767px) {
  .reset .local_nav .item_wrap {
    margin-left: 0;
    width: 100%;
  }
}
.reset .local_nav .item {
  margin: 0 0 20px 20px;
  width: 420px;
}
@media screen and (max-width: 767px) {
  .reset .local_nav .item {
    margin-bottom: 0;
    margin-left: 0;
    width: 100%;
  }
}
.reset .local_nav .item button {
  background-color: #fff;
  border: 2px solid #008803;
  cursor: pointer;
  color: #008803;
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 700;
  font-size: 1.3125em;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 60px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .reset .local_nav .item button {
    font-size: 1em;
    height: 40px;
  }
}
.reset .local_nav .item button:hover {
  background-color: #008803;
  color: #fff;
}
.index .projects {
  margin: 100px auto 0;
}
.index .projects .item_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 0 -3.125%;
}
@media screen and (max-width: 1240px) {
  .index .projects .item_wrap {
    margin-left: -3.44827586%;
  }
}
@media screen and (max-width: 767px) {
  .index .projects .item_wrap {
    margin-left: -2.75103164%;
  }
}
@media screen and (max-width: 414px) {
  .index .projects .item_wrap {
    margin-left: 0;
  }
}
.index .projects .item {
  margin: 0 0 100px 3.03030303%;
  width: 30.3030303%;
  position: relative;
}
@media screen and (max-width: 1240px) {
  .index .projects .item {
    margin-left: 3.33333333%;
    width: 46.66666667%;
  }
}
@media screen and (max-width: 767px) {
  .index .projects .item {
    margin-left: 2.67737617%;
    margin-bottom: 80px;
    width: 47.32262383%;
  }
}
@media screen and (max-width: 414px) {
  .index .projects .item {
    margin-left: 0;
    margin-bottom: 40px;
    width: 100%;
  }
}
.index .projects .item:nth-last-of-type(-n+3) {
  margin-bottom: 0;
}
@media screen and (max-width: 1240px) {
  .index .projects .item:nth-last-of-type(-n+3) {
    margin-bottom: 100px;
  }
}
@media screen and (max-width: 1240px) {
  .index .projects .item:nth-last-of-type(-n+2) {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .index .projects .item:nth-last-of-type(-n+2) {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 414px) {
  .index .projects .item:nth-last-of-type(-n+2) {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 414px) {
  .index .projects .item:last-of-type {
    margin-bottom: 0;
  }
}
.index .projects .item .tag {
  width: 100%;
}
.index .projects .item .tag .tag_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.index .projects .item .tag .tag_item {
  background: #ccc;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  word-break: keep-all;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 10px 10px 0;
  padding-left: 7.5px;
  padding-right: 7.5px;
  width: auto;
  height: 30px;
}
@media screen and (max-width: 767px) {
  .index .projects .item .tag .tag_item {
    font-size: .85714286em;
    word-break: normal;
    padding-left: 12px;
    padding-right: 13px;
    height: 28px;
  }
}
.index .projects .item .tag .tag_item:last-of-type {
  margin-right: 0;
}
.index .projects .item .tag .tag_item.area {
  background-color: #008803;
  font-size: .875em;
}
@media screen and (max-width: 767px) {
  .index .projects .item .tag .tag_item.area {
    font-size: .85714286em;
  }
}
.index .projects .item .tag .tag_item.cat::before {
  content: '';
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  margin: 0 10px 0 0;
}
.index .projects .item .thumb {
  background-color: #e6e6e6;
  margin: 0 0 30px;
  padding: 0 0 65%;
  width: 100%;
  height: 0;
  position: relative;
}
@media screen and (max-width: 767px) {
  .index .projects .item .thumb {
    margin-bottom: 14px;
  }
}
@media screen and (max-width: 570px) {
  .index .projects .item .thumb {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.index .projects .item .thumb .item_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.index .projects .item .thumb .thumb_item {
  overflow: hidden;
}
.index .projects .item .thumb img {
  opacity: 0;
  -webkit-transition: opacity .5s .5s;
  transition: opacity .5s .5s;
  width: 100%;
}
.index .projects .item .thumb img.lazyloaded {
  opacity: 1;
}
.index .projects .item .thumb .slick {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.index .projects .item .thumb .slick-dots {
  text-align: right;
  margin: 0 0 7.5px;
  bottom: -30px;
}
.index .projects .item .thumb .slick-dots li {
  margin: 0 0 0 15px;
  width: 15px;
  height: 15px;
}
.index .projects .item .thumb .slick-dots li.slick-active button {
  background-color: #008803;
}
.index .projects .item .thumb .slick-dots li button {
  background-color: #ccc;
  border-radius: 50%;
  padding: 0;
  width: 15px;
  height: 15px;
}
.index .projects .item .title {
  color: #2c394c;
  font-weight: 700;
  font-size: 1.3125em;
  line-height: 1.71428571;
  margin: 14px 0;
}
@media screen and (max-width: 767px) {
  .index .projects .item .title {
    font-size: 1.28571429em;
    margin-top: 0;
    margin-bottom: 10px;
  }
}
.index .projects .item .title span {
  display: inline-block;
}
.index .projects .item .description {
  color: #2c394c;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .index .projects .item .description {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 570px) {
  .index .projects .item .description {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
}
.index .projects .item.w_double {
  width: 63.63636364%;
}
@media screen and (max-width: 1240px) {
  .index .projects .item.w_double {
    width: 100%;
  }
}
.index .projects .item.w_double .thumb {
  padding-bottom: 30.95238095%;
}
.index .projects .item[data-cat="01"] .tag .tag_item.cat {
  background-color: #b64c89;
}
.index .projects .item[data-cat="01"] .tag .tag_item.cat::before {
  background-image: url(../images/project/icon-cat01-on.svg);
  width: 28px;
  height: 20px;
}
.index .projects .item[data-cat="02"] .tag .tag_item.cat {
  background-color: #e57998;
}
.index .projects .item[data-cat="02"] .tag .tag_item.cat::before {
  background-image: url(../images/project/icon-cat02-on.svg);
  width: 25px;
  height: 18px;
}
.index .projects .item[data-cat="03"] .tag .tag_item.cat {
  background-color: #6064aa;
}
.index .projects .item[data-cat="03"] .tag .tag_item.cat::before {
  background-image: url(../images/project/icon-cat03-on.svg);
  width: 20px;
  height: 24px;
}
.index .projects .item[data-cat="04"] .tag .tag_item.cat {
  background-color: #4bac74;
}
.index .projects .item[data-cat="04"] .tag .tag_item.cat::before {
  background-image: url(../images/project/icon-cat04-on.svg);
  width: 20px;
  height: 22px;
}
.index .projects .item[data-cat="05"] .tag .tag_item.cat {
  background-color: #f89f69;
}
.index .projects .item[data-cat="05"] .tag .tag_item.cat::before {
  background-image: url(../images/project/icon-cat05-on.svg);
  width: 28px;
  height: 20px;
}
.index .projects .item[data-cat="06"] .tag .tag_item.cat {
  background-color: #87bdeb;
}
.index .projects .item[data-cat="06"] .tag .tag_item.cat::before {
  background-image: url(../images/project/icon-cat06-on.svg);
  width: 19px;
  height: 23px;
}
.index .projects .item[data-cat="07"] .tag .tag_item.cat {
  background-color: #c1a163;
}
.index .projects .item[data-cat="07"] .tag .tag_item.cat::before {
  background-image: url(../images/project/icon-cat07-on.svg);
  width: 28px;
  height: 20px;
}
.projyectcm .content_header {
  margin: 0 auto 80px;
}
@media screen and (max-width: 767px) {
  .projyectcm .content_header {
    margin-bottom: 40px;
  }
}
.projyectcm .content_header .copy {
  color: #2c394c;
  font-weight: 700;
  font-size: 2.125em;
  letter-spacing: .1em;
  text-align: center;
  margin: 0 0 100px;
}
@media screen and (max-width: 767px) {
  .projyectcm .content_header .copy {
    font-size: 1.42857143em;
    margin-bottom: 40px;
  }
}
.projyectcm .content_header .copy span {
  display: inline-block;
}
.projyectcm .content_body .section_title {
  font-size: 2.25em;
  margin-bottom: 70px;
}
@media screen and (max-width: 767px) {
  .projyectcm .content_body .section_title {
    font-size: 1.71428571em;
    line-height: 1.2;
    margin-bottom: 40px;
  }
}
.projyectcm .section {
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .projyectcm .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.projyectcm .section:nth-of-type(odd) {
  background-color: #f4f5f6;
}
.projyectcm .section#section07,
.projyectcm .section#section04,
.projyectcm .section#section03,
.projyectcm .section#section02,
.projyectcm .section#section01 {
  padding-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .projyectcm .section#section07,
  .projyectcm .section#section04,
  .projyectcm .section#section03,
  .projyectcm .section#section02,
  .projyectcm .section#section01 {
    padding-bottom: 40px;
  }
}
.projyectcm .section#section03 .block .item {
  line-height: 1.55555556;
}
.projyectcm .section#section04 .block {
  padding-top: 50px;
}
.projyectcm .section#section05 {
  padding-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .projyectcm .section#section05 {
    padding-bottom: 40px;
  }
}
.projyectcm .section#section05 .block {
  padding-top: 60px;
}
.projyectcm .section#section07 .block .item {
  line-height: 1.55555556;
}
.projyectcm .content_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 767px) {
  .projyectcm .content_wrap {
    display: block;
  }
}
.projyectcm .content_wrap .block {
  margin-top: 0;
  margin-left: 3.125%;
}
@media screen and (max-width: 767px) {
  .projyectcm .content_wrap .block {
    margin-top: 40px;
    margin-left: 0;
  }
}
.projyectcm .content_wrap .block .item_wrap {
  width: auto;
}
.projyectcm .figure_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.projyectcm .figure_wrap.column1 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}
@media screen and (max-width: 767px) {
  .projyectcm .figure_wrap.column1 {
    width: 100%;
  }
}
.projyectcm .figure_wrap.column1 .item {
  width: 100%;
}
.projyectcm .figure_wrap.column2 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 0 -3.125%;
}
@media screen and (max-width: 767px) {
  .projyectcm .figure_wrap.column2 {
    margin-left: -20px;
  }
}
.projyectcm .figure_wrap.column2 .item {
  margin: 3.03030303% 0 0 3.03030303%;
  width: 46.875%;
}
@media screen and (max-width: 767px) {
  .projyectcm .figure_wrap.column2 .item {
    margin-top: 20px;
    margin-left: 20px;
    width: calc(50% - 20px);
  }
}
.projyectcm .figure_wrap.column2 .item:nth-of-type(-n+2) {
  margin-top: 0;
}
.projyectcm .figure_wrap.column3 {
  margin: 0 0 0 -3.125%;
}
@media screen and (max-width: 767px) {
  .projyectcm .figure_wrap.column3 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-left: -20px;
  }
}
.projyectcm .figure_wrap.column3 .item {
  margin: 0 0 0 3.125%;
  width: 33.33333333%;
}
@media screen and (max-width: 767px) {
  .projyectcm .figure_wrap.column3 .item {
    margin-top: 20px;
    margin-left: 20px;
    width: calc(50% - 20px);
  }
}
@media screen and (max-width: 767px) {
  .projyectcm .figure_wrap.column3 .item:nth-of-type(-n+2) {
    margin-top: 0;
  }
}
.projyectcm .figure_wrap .item img {
  width: 100%;
}
.projyectcm .figure_wrap .item figcaption {
  color: #2c394c;
  margin: 30px 0 0;
}
@media screen and (max-width: 767px) {
  .projyectcm .figure_wrap .item figcaption {
    font-size: .85714286em;
    margin-top: 10px;
  }
}
.projyectcm .block {
  border-top: 1px solid #2c394c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50px;
  padding: 30px 0 0;
}
@media screen and (max-width: 767px) {
  .projyectcm .block {
    display: block;
    margin-top: 40px;
  }
}
.projyectcm .block .item_wrap {
  margin: 0 3.125% 0 0;
  width: 33.33333333%;
}
@media screen and (max-width: 767px) {
  .projyectcm .block .item_wrap {
    margin-right: 0;
    width: auto;
  }
}
.projyectcm .block .item_wrap:last-of-type {
  margin-right: 0;
}
.projyectcm .block .item {
  color: #2c394c;
  font-weight: 500;
  font-size: 1.125em;
  line-height: 1.55555556;
  text-indent: -1.2em;
  margin: 0 0 10px;
  padding: 0 0 0 1.2em;
}
@media screen and (max-width: 767px) {
  .projyectcm .block .item {
    font-size: 1em;
  }
}
.projyectcm .block .item::before {
  content: '';
  background: #008702;
  border-radius: 18px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 .2em 0 0;
  width: 18px;
  height: 18px;
}
@media screen and (max-width: 767px) {
  .projyectcm .block .item::before {
    width: 14px;
    height: 14px;
  }
}
.projyectcm .block .item span {
  text-indent: 0;
  display: inline-block;
}
.technology .content_header {
  margin: 0 auto 100px;
}
@media screen and (max-width: 767px) {
  .technology .content_header {
    margin-bottom: 40px;
  }
}
.technology .content_header .copy {
  color: #2c394c;
  font-size: 1.3125em;
  line-height: 1.80952381;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .technology .content_header .copy {
    font-size: 1em;
  }
}
.technology .content_body .section_title {
  font-size: 2.125em;
  text-align: left;
  letter-spacing: .1em;
  line-height: 1.64705882;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .technology .content_body .section_title {
    font-size: 1.71428571em;
  }
}
.technology .content_body .section_title::after {
  margin-left: 0;
}
.technology .section_header {
  background-color: #d9edd9;
  padding: 70px 0;
}
@media screen and (max-width: 767px) {
  .technology .section_header {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.technology .section_header .section_title {
  color: #2c394c;
  text-align: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .technology .section_header .section_title {
    margin-bottom: 40px;
  }
}
.technology .section_header .section_title::after {
  content: none;
}
.technology .point .item {
  margin: 30px 0 0;
}
@media screen and (max-width: 767px) {
  .technology .point .item {
    margin-top: 20px;
  }
}
.technology .point .item:first-of-type {
  margin-top: 0;
}
.technology .point .item .dt {
  color: #008703;
  font-weight: 700;
  font-size: 2.25em;
  letter-spacing: .2em;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .technology .point .item .dt {
    font-size: 1.28571429em;
    letter-spacing: 0;
  }
}
.technology .point .item .dt span {
  background: #008703;
  color: #fff;
  font-size: .66666667em;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0 20px 0 0;
  padding: 0 10px;
}
@media screen and (max-width: 767px) {
  .technology .point .item .dt span {
    font-size: .77777778em;
    margin-right: 10px;
  }
}
.technology .point .item .dd {
  color: #2c394c;
  font-size: 1.3125em;
  line-height: 1.80952381;
  margin: 10px 0 0;
}
@media screen and (max-width: 767px) {
  .technology .point .item .dd {
    font-size: 1em;
  }
}
.technology .point .figure_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 70px auto 0;
  max-width: 100%;
  width: 85.3125%;
}
@media screen and (max-width: 767px) {
  .technology .point .figure_wrap {
    display: block;
    margin-top: 40px;
    width: auto;
  }
}
.technology .point .description {
  background-color: #b2dbb3;
  color: #2c394c;
  line-height: 2;
  padding: 3.66300366% 5.49450549%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .technology .point .description {
    margin-top: 20px;
    padding: 10px 20px;
  }
}
.technology .point .description::after {
  content: '';
  background: url(../images/project/technology/icon.png) no-repeat 0 0;
  background-size: contain;
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .technology .point .description::after {
    width: 30px;
    height: 30px;
  }
}
.technology .point .figure {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0 6.41025641% 0 0;
  width: 40.10989011%;
}
@media screen and (max-width: 767px) {
  .technology .point .figure {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 438px;
  }
}
.technology .point .figure img {
  width: 100%;
}
.technology .point .figcaption {
  color: #000;
  font-weight: 500;
  font-size: .875em;
  text-align: center;
  text-indent: -9%;
  margin: 10px auto 0;
}
@media screen and (max-width: 767px) {
  .technology .point .figcaption {
    font-size: .85714286em;
  }
}
.technology .block {
  margin-top: 0;
  padding: 110px 0 0;
}
@media screen and (max-width: 767px) {
  .technology .block {
    padding-top: 60px;
  }
}
.technology .block.block01 .image {
  overflow: hidden;
}
.technology .block.block01 .item02 {
  float: right;
  margin: 20px 0 0;
  width: 61.96721311%;
}
.technology .block.block02 .image {
  margin-left: -4.6875%;
  overflow: hidden;
  width: auto;
}
@media screen and (max-width: 767px) {
  .technology .block.block02 .image {
    display: block;
    margin-left: 0;
    margin-top: 40px;
  }
}
.technology .block.block02 .image .item {
  margin: 0 0 0 4.6875%;
}
@media screen and (max-width: 767px) {
  .technology .block.block02 .image .item {
    margin-left: 0;
    margin-top: 20px;
  }
}
@media screen and (max-width: 767px) {
  .technology .block.block02 .image .item:first-of-type {
    margin-top: 0;
  }
}
.technology .block.block04 .image {
  display: block;
  margin-top: 50px;
  width: 84.375%;
}
@media screen and (max-width: 767px) {
  .technology .block.block04 .image {
    margin-top: 40px;
    width: 100%;
  }
}
.technology .block.block04 .image .zoom {
  text-align: right;
  margin: 10px 0 0;
}
.technology .block.block04 .image .zoom img {
  display: inline-block !important;
  min-width: inherit !important;
  width: auto !important;
}
.technology .block.block04 .item {
  margin: 30px auto 0;
}
.technology .block.block04 .item:first-of-type {
  margin-top: 0;
}
.technology .block.block04 .item .dt {
  color: #008703;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 42px;
  text-align: center;
  margin: 0 0 20px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .technology .block.block04 .item .dt {
    font-size: 1.28571429em;
  }
}
.technology .block.block04 .item .dt span {
  background-color: #fff;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .technology .block.block04 .item .dt span {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.technology .block.block04 .item .dt::after {
  content: '';
  background-color: #008703;
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .technology .block.block04 .item .dt::after {
    height: 2px;
  }
}
.technology .block.block04 .item .figure {
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .technology .block.block04 .item .figure {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 767px) {
  .technology .block.block04 .item .figure img {
    min-width: 540px;
  }
}
.technology .block.block05 .figure {
  margin: 30px 0 0;
  max-width: 100%;
  width: 378px;
}
@media screen and (max-width: 767px) {
  .technology .block.block05 .figure {
    margin-left: auto;
    margin-right: auto;
  }
}
.technology .block.block05 .figure img {
  width: 100%;
}
.technology .block.block06 {
  padding-top: 150px;
}
@media screen and (max-width: 767px) {
  .technology .block.block06 {
    padding-top: 100px;
  }
}
.technology .block.block06 .info {
  border: 4px solid #008702;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  padding: 0 80px 50px;
  max-width: 1080px;
}
@media screen and (max-width: 767px) {
  .technology .block.block06 .info {
    border-width: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
  }
}
.technology .block.block06 .info .section_title {
  background: #008702;
  color: #fff;
  font-size: 1.5em;
  line-height: 2.75;
  text-align: center;
  max-width: 658px;
  -webkit-transform: translateY(-50%) skewX(-45deg);
          transform: translateY(-50%) skewX(-45deg);
}
@media screen and (max-width: 767px) {
  .technology .block.block06 .info .section_title {
    font-size: 1.28571429em;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 90%;
    -webkit-transform: translateY(-50%) skewX(-25deg);
            transform: translateY(-50%) skewX(-25deg);
  }
}
.technology .block.block06 .info .section_title .txt_wrap {
  display: inline-block;
  -webkit-transform: skewX(45deg);
          transform: skewX(45deg);
}
@media screen and (max-width: 767px) {
  .technology .block.block06 .info .section_title .txt_wrap {
    -webkit-transform: skewX(25deg);
            transform: skewX(25deg);
  }
}
.technology .block.block06 .info .section_title::after {
  content: none;
}
.technology .block.block06 .info ul {
  text-indent: -1em;
  padding: 0 0 0 1em;
}
.technology .block.block06 .info .note {
  margin: 30px 0 0;
}
.technology .info {
  width: 47.65625%;
}
@media screen and (max-width: 767px) {
  .technology .info {
    width: 100%;
  }
}
.technology .info.align_center {
  width: 100%;
}
.technology .info.align_left {
  float: left;
  margin: 0 4.6875% 0 0;
}
@media screen and (max-width: 767px) {
  .technology .info.align_left {
    float: none;
    margin-right: 0;
  }
}
.technology .info.align_right {
  float: right;
  margin: 0 0 0 4.6875%;
}
@media screen and (max-width: 767px) {
  .technology .info.align_right {
    float: none;
    margin-left: 0;
  }
}
.technology .info .description {
  color: #2c394c;
  line-height: 2;
}
.technology .info .figcaption {
  margin: 30px 0 0;
  line-height: 1.375;
}
.technology .info .figcaption span {
  border: 1px solid #008703;
  color: #008703;
  display: inline-block;
  padding: 0 10px;
}
@media screen and (max-width: 767px) {
  .technology .info .figcaption span {
    font-size: .85714286em;
  }
}
.technology .image {
  width: 47.65625%;
}
@media screen and (max-width: 767px) {
  .technology .image {
    margin: 40px auto 0;
    width: 100%;
  }
}
.technology .image.align_center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 60px auto 0;
  width: 100%;
}
.technology .image.align_center .item {
  width: 100%;
}
.technology .image.align_left {
  float: left;
}
@media screen and (max-width: 767px) {
  .technology .image.align_left {
    float: none;
  }
}
.technology .image.align_right {
  float: right;
}
@media screen and (max-width: 767px) {
  .technology .image.align_right {
    float: none;
  }
}
.technology .image img {
  width: 100%;
}