@charset "utf-8";

@font-face {
  font-family: Roboto;
  src: url(../../common/font/Roboto/Roboto-Regular.ttf) format("truetype");
}

@font-face {
  font-family: Roboto bold;
  src: url(../../common/font/Roboto/Roboto-Bold.ttf) format("truetype");
}

@font-face {
  font-family: Roboto thin;
  src: url(../../common/font/Roboto/Roboto-Thin.ttf) format("truetype");

}

body {
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  font-size: 14px;
  overflow-x: hidden;
  line-height: 1.5;
}

.scroll_adjust.act {
  margin-top: -80px !important;
  padding-top: 80px !important;
  display: block;
}

.scroll_adjust {
  margin-top: -245px !important;
  padding-top: 245px !important;
  display: block;
}

@media screen and (min-width: 640px) {
  .br_pc {
    display: block;
  }

  .br_sp {
    display: none;
  }
}

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

  .br_sp {
    display: block;
  }

  .sp_w100 {
    width: 100%;
  }
}

/*動画埋め込み 190529追記ここから*/
.responsive_video {
  position: relative;
  padding-bottom: 56.25%;
  margin-top: 20px;
}

.responsive_video video,
.responsive_video iframe,
.responsive_video object,
.responsive_video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*190529追記ここまで*/

.graph_wrap {
  background: url(../../common/img/top/bg_graph.jpg) no-repeat center -160px;
  background-size: 1920px;
}

.graph_wrap .inner {
  width: 1000px;
  margin: 30px auto;
  padding: 0 0 30px
}

.graph_wrap ul {
  overflow: hidden;
  padding: 0 0 50px;
}

#toppage section#information {
  background: none;
  padding: 0 0 50px;
}

.graph_wrap li {
  list-style: none;
  color: #666;
  width: 50%;
  margin: 0 auto;
  /*float: left;*/
  text-align: center;
  padding: 10px 0;
  transition: all .5s;
  border: 1px solid #999;
}


/*    .graph_wrap li:first-child{
      margin: 0 6% 0 0;
    }
    .graph_wrap li.active{
      background: rgba(255,255,255,.18);
    }
    .graph_wrap li:hover{
        background: rgba(255,255,255,.25);
    } */

.graph_wrap dl.cleanly_returned_water {
  color: #666;
  text-align: center;
  padding: 0 0 160px;
}

.graph_wrap dl.cleanly_returned_water dt {
  font-size: 18px;
}

.graph_wrap dl.cleanly_returned_water dd {
  font-size: 150%;
}

.graph_wrap em {
  font-style: normal;
  font-size: 55px;
  color: #0075c2;
}

.graph_wrap em#countup2,
.graph_wrap em#countup1 {
  font-size: 38px;
}

.graph_wrap h2 {
  color: #666;
  text-align: center;
  font-size: 18px;
}

#graph2,
#graph3 {
  display: none;
}

#naviSP {
  display: none;
  position: fixed;
  top: 40px;
  z-index: 50000;
  width: 100%;
  height: calc(100vh - 40px);
  bottom: 0;
  overflow-y: auto;
}

#naviSP .naviIn {
  background: #fff;
}

#gray_bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  position: fixed;
  z-index: 990;
  display: none;
}

#gray_bg.active {
  display: block;
}

#naviSP li {
  border-top: solid 1px #ccc;
}

#naviSP li em {
  text-decoration: none;
  font-size: 13px;
  color: #333 !important;
  padding: 15px;
  display: block;
  line-height: 1;
  text-align: left !important;
  background-size: auto;
  background-size: auto;
  background-size: 5px auto;
  margin-left: 15px;
  padding: 15px 15px 15px 30px !important;
  font-weight: bold;
}

#naviSP>li a {
  font-weight: bold;
}

#naviSP li a {
  text-decoration: none;
  font-size: 13px;
  color: #333 !important;
  padding: 15px;
  display: block;
  line-height: 1;
  text-align: left !important;
  background: url(/common_sp/jigyoubu/img/icn_link2.gif) no-repeat 15px center #FFF;
  background-size: auto;
  background-size: auto;
  background-size: 5px auto;
  margin-left: 15px;
  padding: 15px 15px 15px 30px !important;
}

#toppage #cmn_part {
  padding: 100px 0 0 0;
}

.only_noslider {
  display: none;
}

a#header_contact {
  right: 154px;
}

#side_fix {
  display: block;
}

#sp_foot_fix {
  display: none;
}

.swiper-container {
  display: none;
}

#water_bg {
  background: url(../../solution/img/waterbg.jpg) no-repeat center 70px;
  padding: 200px 0 0;
}

.pdfBtn {
  width: 345px;
  margin: 40px auto 0;
}

.pdfBtn.mb60 {
  margin: 20px auto 60px;
}

.pdfBtn a {
  background: url(../../product/img/ic_pdf.png) no-repeat 20px center #2e008b;
  font-size: 16px;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  display: block;
}

.fadeInDown {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInleft {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: slideInleft;
  animation-name: slideInleft;
  visibility: visible !important;
}

@-webkit-keyframes slideInleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes slideInleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInright {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: slideInright;
  animation-name: slideInright;
  visibility: visible !important;
}

@-webkit-keyframes slideInright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes slideInright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

#toppage .nav_top,
#solution_index .nav_solution,
#solution_about .nav_solution,
#episode .nav_solution,
#processing_unit .nav_product,
#oilseparator .nav_product,
#module .nav_product,
#data .nav_product,
#case .nav_case,
#csr .nav_csr,
#faq .nav_faq {
  background: #5968AC;
}

#toppage #csr .image_bg {
  height: 853px;
}

#toppage #csr>h3 {
  font-size: 80px;
  text-align: center;
  color: #00a6d8;
  font-family: 'Roboto bold', sans-serif;
  font-weight: 700;
  padding: 0;
  margin: -50px 0 20px;
  text-shadow: 1px 1px 10px #fff, -1px 1px 10px #fff, 1px -1px 10px #fff, -1px -1px 10px #fff;
}

#toppage #csr>h3 span {
  color: #3d62ad;
}

.globalNavi>ul>li>a:hover {
  background: #0A3790;
}

.globalNavi>ul>li {
  position: relative;
}

.globalNavi>ul>li .child {
  position: absolute;
  z-index: 55;
  background: rgba(18, 40, 137, 1);
  width: 240px;
  top: 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.globalNavi>ul>li ul.active {
  top: 40px;
  opacity: 1;
  visibility: visible;
  transition: 0.3s;
}

.globalNavi>ul>li .child li {
  border-top: 1px solid #7287BE;
}

.globalNavi>ul>li .child li a {
  text-align: left;
  padding: 13px 15px 10px;
  display: block;
}

.globalNavi>ul>li .child li a:hover {
  background: #3A62A7;
}

.globalNavi>ul>li {
  width: 16.66%;
  float: left;
  box-sizing: border-box;
  color: #fff;
  border-right: 1px solid #7287BE;
  position: relative;
  z-index: 60;
}

.globalNavi>ul>li:first-child {
  border-left: 1px solid #7287BE;
}

.globalNavi>ul>li a {
  color: #fff;
  padding: 12px 0 9px;
  display: block;
  text-align: center;
  font-size: 12px;
  font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', sans-serif;
}

#side_fix {
  position: fixed;
  right: -170px;
  top: 50%;
  margin: -100px 0 0 0;
  background: #fff;
  padding: 10px 0 10px 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  z-index: 999;
  transition: all 0.5s;
}

#side_fix.on {
  right: 0;
}

#side_fix a {
  display: block;
  margin: 0;
  line-height: 0;
}

a.read_more_onSlide:hover {
  background: rgba(255, 255, 255, .2);
}

a.read_more_onSlide {
  display: block;
  margin: 20px 0 0 0;
  width: 95%;
  max-width: 190px;
  border: solid 1px rgba(255, 255, 255, .75);
  background: none;
  padding: 10px 0 10px 19px;
  text-align: left;
  color: #fff;
  line-height: 1;
  transition: all 0.3;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.3em;
  position: relative;
  z-index: 50;
  font-weight: normal;
  font-size: 15px;
}

a.read_more_onSlide::after {
  content: url(../img/btn_arrow.png);
  position: absolute;
  right: 13px;
  top: 16%;
}

a.read_more {
  display: block;
  margin: 70px auto 0;
  width: 95%;
  max-width: 350px;
  border: solid 1px #fff;
  background: url(../img/btn_bg.jpg) no-repeat left center;
  padding: 24px 0;
  text-align: center;
  color: #fff;
  line-height: 1;
  transition: all 0.3;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.15em;
  position: relative;
  z-index: 50;
}

a.read_more:after {
  content: url(../img/btn_arrow.png);
  position: absolute;
  right: 30px;
  top: 30%;
}

a.read_more:hover {
  opacity: 0.8;
}

#main_visual {
  text-align: center;
}

#lede {
  padding: 0 !important;
}

#lede p {
  font-size: 18px;
  text-align: center;
  color: #3d62ad;
  line-height: 1.9;
  padding: 50px 0;
}

#lede2 {
  padding: 0 !important;
}

#lede2 p {
  font-size: 18px;
  text-align: center;
  color: #3d62ad;
  line-height: 1.9;
  padding: 50px 0;
}

#main_visual h3 {
  background: url(../img/delta_blue.png) no-repeat left bottom #fff;
  font-size: 30px;
  color: #3d62ad;
  display: inline-block;
  padding: 0 0 0 100px;
  margin: 130px 0 0 0;
  font-weight: normal;
  position: relative;
  overflow: hidden;
}

#main_visual h3 em {
  background: url(../img/delta_sky.png) no-repeat right top;
  padding: 13px 100px 13px 0;
  display: block;
}

.cmn_back {
  overflow: hidden;
  margin: 30px 0 0 0;
}

.col4 li:first-child {
  margin: 0 0 0;
}

.col4 li {
  width: 220px;
  float: left;
  margin: 0 0 0 23px;
  position: relative;
}

.col5 li {
  width: 30%;
  float: left;
  margin: 0 0 40px 5%;
  position: relative;
  min-height: 180px;
}

.col5 li:first-child {
  margin: 0 0 40px 18%;
}

.col5 li:nth-child(3) {
  margin: 0 0 40px 0;
}

.col7>li {
  width: 22.5%;
  float: left;
  margin: 0 0 40px 3.3%;
  position: relative;
  min-height: 275px;
}

.col7>li em {
  display: inline-block;
  background: url(../../product/img/module_ic01.png) no-repeat 10px center #2e008b;
  color: #fff;
  width: 80%;
  margin: 10px auto 0;
  padding: 7px 0 7px 60px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
}

.col7>li em:hover {
  opacity: 0.8;
}

.col7>li:first-child dt {
  margin: -20px 0 10px 0;
}

.col7>li:first-child dt span {
  font-size: 14px;
}

.col7>li:first-child {
  margin: 0 0 40px;
}

.col7>li:nth-child(1) em {
  margin: 20px auto 0;
}

.col7>li:nth-child(4) em,
.col7>li:nth-child(6) em {
  margin: 30px auto 0;
}

.col7>li:nth-child(5) {
  margin: 0 0 40px 13%;
}

.cmn_back li::before {
  content: "";
  width: 40px;
  height: 120px;
  background: #fff;
  position: absolute;
  left: -15px;
  top: -50px;
  transform: rotate(53.5deg);
}

.cmn_back li:nth-child(odd) dt {
  color: #0075c2;
}

.cmn_back li:nth-child(odd) {
  background-color: #EBF4FA;
  background-repeat: no-repeat;
  background-position: right top;
  overflow: hidden;
}

.cmn_back li:nth-child(even) dt {
  color: #06b4ea;
}

.cmn_back li:nth-child(even) {
  background-color: #E1F6FC;
  background-repeat: no-repeat;
  background-position: right top;
  overflow: hidden;
}

.cmn_back li dl {
  padding: 40px 15px 30px;
}

.cmn_back li dl dt {
  text-align: center;
  margin: 0 0 15px;
  font-size: 22px;
  font-weight: bold;
}

#main_visual {
  min-height: 330px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}

#oilseparator #main_visual {
  min-height: 330px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
}

#main_visual:before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  border-right: 1px solid #fff;
  height: 40px;
  bottom: 0px;
}

#main_visual:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  border-right: 1px solid #3d62ad;
  height: 40px;
  bottom: -40px;
}

h4.cmn_heading01 {
  background: #B2D5ED;
  overflow: hidden;
  padding: 10px 0;
  margin: 0 0 20px;
}

h4.cmn_heading01 span {
  background: #0075C2;
  color: #fff;
  font-weight: normal;
  padding: 15px 60px 15px 20px;
  font-size: 19px;
  position: relative;
}

h4.cmn_heading01 span:after {
  background: #0075C2;
  content: "";
  width: 50px;
  height: 150px;
  -webkit-transform: rotate(53.5deg);
  -moz-transform: rotate(53.5deg);
  -ms-transform: rotate(53.5deg);
  -o-transform: rotate(53.5deg);
  transform: rotate(53.5deg);
  position: absolute;
  top: -55px;
  right: -40px;
}

.table_wrap {
  width: 100%;
  overflow-x: auto;
}

table.cmn_table {
  width: 100%;
  border-collapse: collapse;
  margin: 50px 0 20px;
}

table.cmn_table th {
  background: #f2f8fc;
  border: #CFD3DC solid 1px;
  font-weight: normal;
  padding: 10px;
}

table.cmn_table td {
  border: #CFD3DC solid 1px;
  padding: 10px;
  text-align: center;
}

table.cmn_table thead th {
  background: #0075c2;
  border: #fff solid 1px;
  padding: 10px;
  color: #fff;
  text-align: center;
}

table.cmn_table caption {
  text-align: left;
  color: #3d62ad;
  font-size: 16px;
  margin: 0 0 15px;
}

.img_center {
  text-align: center;
  margin: 0;
  width: 100%;
}

.img_center img {
  max-width: 100%;
}

#cmn_part .bnr {
  overflow: hidden;
}

#cmn_part .bnr li {
  float: left;
  width: 50%;
}

#cmn_part .bnr li a {
  width: 100%;
  min-height: 290px;
  display: block;
}

#cmn_part .bnr li a:hover {
  background: rgba(255, 255, 255, .2);
  opacity: 1 !important;
}

#cmn_part .bnr li:first-child {
  background: url(../img/cmn_bnrbg01.jpg) no-repeat center center / cover;
}

#cmn_part .bnr li:last-child {
  background: url(../img/cmn_bnrbg02.jpg) no-repeat center center / cover;
}

#cmn_part .bnr li .title {
  padding: 30px 0 20px;
}

#cmn_part .bnr li .title.pad {
  padding: 60px 0 20px;
}

#cmn_part .bnr li .title * {
  text-align: center;
  color: #fff;
}

#cmn_part .bnr li:last-child .title dt {
  font-size: 30px;
  padding: 11px 0 0;
  height: 59px
}

#cmn_part .bnr li .title dd {
  color: #fff;
}

#cmn_part .bnr li .link {
  width: 90%;
  max-width: 355px;
  margin: 0 auto;
  padding: 25px 0 50px;
  position: relative;
}

#cmn_part .bnr li .link.vanish {
  padding: 10px 0 50px;
}

#cmn_part .bnr li:first-child .link {
  border-top: #849ac1 1px solid;
  border-bottom: #849ac1 1px solid;
  background: rgba(7, 59, 146, .7);
}

#cmn_part .bnr li:last-child .link {
  border-top: #bcd8eb 1px solid;
  border-bottom: #bcd8eb 1px solid;
  background: rgba(3, 120, 187, .7);
}

#cmn_part .bnr li .link dt {
  font-size: 16px;
  text-align: center;
  color: #fff;
}

#cmn_part .bnr li .link dd {
  position: absolute;
  left: 50%;
  margin: 0 0 0 -110px;
  bottom: -32px;
  width: 220px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.05em;
  border: #fff solid 1px;
  padding: 20px 0;
  font-family: 'Roboto', sans-serif;
  color: #083b92;
}

#cmn_part .bnr li .link dd:after {
  content: url(../img/cmn_arrow.png);
  position: absolute;
  top: 20px;
  right: 25px;
}

#cmn_part .bnr li:first-child .link dd {
  background: -moz-linear-gradient(bottom left, #dee7ff, #FFF);
  background: -webkit-linear-gradient(bottom left, #dee7ff, #FFF);
  background: linear-gradient(to top right, #dee7ff, #FFF);
}

#cmn_part .bnr li:first-child a:hover .link dd {
  background: -moz-linear-gradient(bottom left, #FFF, #dee7ff);
  background: -webkit-linear-gradient(bottom left, #FFF, #dee7ff);
  background: linear-gradient(to top right, #FFF, #dee7ff);
}

#cmn_part .bnr li:last-child .link dd {
  background: -moz-linear-gradient(bottom left, #dbffff, #FFF);
  background: -webkit-linear-gradient(bottom left, #dbffff, #FFF);
  background: linear-gradient(to top right, #dbffff, #FFF);
}

#cmn_part .bnr li:last-child a:hover .link dd {
  background: -moz-linear-gradient(bottom left, #FFF, #dbffff);
  background: -webkit-linear-gradient(bottom left, #FFF, #dbffff);
  background: linear-gradient(to top right, #FFF, #dbffff);
}

#cmn_part .button {
  width: 95%;
  max-width: 950px;
  margin: 0 auto;
  overflow: hidden;
  padding: 40px 0 60px 0;
}

#cmn_part .button li {
  width: 47%;
  float: left;
  border: solid 4px #0075c2;
  padding: 1px;
  margin: 0 6% 0 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#cmn_part .button li:last-child {
  margin: 0;
}

#cmn_part .button li a {
  display: block;
  background: #e5f1f9;
}

#cmn_part .button li dl {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#cmn_part .button li dl:after {
  content: url(../img/cmn_arrow.png);
  position: absolute;
  top: 50%;
  right: 3%;
  margin: -10px 0 0 0;
}

#cmn_part .button li dt {
  width: 90px;
  background: #0075c2;
  text-align: center;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#cmn_part .button li dd {
  width: 360px;
  font-size: 17px;
  text-align: center;
  line-height: 1.5;
  font-weight: bold;
  color: #0075c2;
}

#main_visual h3 br {
  display: none;
}

.table_wrap {
  overflow: auto;
  /*tableをスクロールさせる*/
  white-space: nowrap;
  /*tableのセル内にある文字の折り返しを禁止*/
}

.table_wrap::-webkit-scrollbar {
  /*tableにスクロールバーを追加*/
  height: 5px;
}

.table_wrap::-webkit-scrollbar-track {
  /*tableにスクロールバーを追加*/
  background: #F1F1F1;
}

.table_wrap::-webkit-scrollbar-thumb {
  /*tableにスクロールバーを追加*/
  background: #BCBCBC;
}

#over_wrap {
  background-position: center 30px;
  background-repeat: no-repeat;
  width: 100%;
}

#oilseparator .lyt01 {
  float: left;
  width: 50%;
  padding: 30px 0 0;
}

#oilseparator .lyt01 dd {
  float: left;
  padding: 100px 2% 0;
  width: 46%;
}

#oilseparator .lyt01 dt {
  float: left;
  text-align: center;
  width: 50%;
}

#oilseparator .wrap_lyt01 {
  overflow: hidden;
}

#oilseparator .lyt02 {
  overflow: hidden;
}

#oilseparator .lyt02 figure {
  width: 40%;
  float: left;
  text-align: center;
  margin: 50px 0 0 0;
}

#oilseparator .lyt02 .lyt03 figure {
  width: 100%;
  float: none;
  margin: 0 0 0 0;
}

#oilseparator .lyt02 .table_wrap {
  width: 55%;
  float: left;
}

#oilseparator .lyt03 {
  padding: 0 0 50px;
  overflow: hidden;
  clear: both;
}

#oilseparator .lyt03 li {
  float: left;
  width: 33.333%;
}

#oilseparator .lyt03 li img {
  width: 100%;
}

#oilseparator .lyt03 li dt {
  text-align: center;
}

#toppage section {
  padding: 100px 0 100px;
}

#toppage section .hgroup {
  margin: 0 0 80px;
}

#toppage #solution .solution01 dd br {
  display: none;
}

#toppage section .hgroup .icon {
  text-align: center;
  width: 100%;
}

#toppage section .hgroup h2 {
  font-size: 30px;
  margin: 25px 0 20px;
  text-align: center;
  letter-spacing: 0.3em;
}

#toppage section.graph_wrap .hgroup h2 {
  font-size: 30px;
  margin: 25px 0 0;
  text-align: center;
  letter-spacing: 0.3em;
}

#toppage section .hgroup h3 {
  font-size: 12px;
  font-family: 'Roboto thin', sans-serif;
  font-weight: 100;
  text-align: center;
}

#toppage section .inBox {
  width: 950px;
  margin: 0 auto;
}

#toppage section#information {
  background: none;
  padding: 10px 0 80px;
}

#toppage section#solution {
  background: url(../img/top/solution_bg.jpg) repeat-x bottom center;
  padding: 50px 0 350px;
}

#toppage #information ul {
  overflow: hidden;
}

#toppage #information li:first-child {
  margin: 0;
}

#toppage #information li {
  width: 22%;
  margin: 0 0 0 4%;
  float: left;
}

#toppage #information span {
  font-size: 12px;
  color: #fff;
  background: #0075c2;
  padding: 4px 12px 3px;
  margin: 0 2px 0 0;
  display: inline-block;
}

#toppage #information span.new {
  background: #ec6d74;
}

#toppage #information .category {
  display: block;
  margin: 0 0 15px;
}

#toppage #information dt {
  font-size: 12px;
  color: #fff;
  background: #b5b5b5;
  padding: 3px 12px 2px;
  display: inline-block;
  margin: 17px 0 15px;
}

#toppage #information dd {
  line-height: 1.5;
}

#toppage #solution figure {
  text-align: center;
  width: 100%;
}

#toppage #solution .solution01 dt {
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  width: 95%;
  max-width: 585px;
  color: #036888;
  letter-spacing: 0.2em;
  line-height: 1.5;
  margin: 40px auto 20px;
  padding: 25px 0 0 0;
}

#toppage #solution .solution01 dd {
  width: 100%;
  font-size: 16px;
  color: #fff;
  background: url(../img/top/top_x_bg.png) no-repeat center center;
  margin: 0 auto;
  padding: 7px 0 5px;
  text-align: center;
  position: relative;
  height: 87px;
}

#toppage #solution .solution01 dd p {
  position: absolute;
  font-size: 55px;
  color: #fff;
}

#toppage #solution .solution01 dd p span {
  font-size: 45px;
}

#toppage #solution .solution01 dd p.leftIn {
  left: 50%;
  margin: 0 0 0 -400px;
  top: -3px;
}

#toppage #solution .solution01 dd p.rightIn {
  right: 50%;
  margin: 0 -440px 0 0;
  top: -3px;
}

#toppage #solution p {
  text-align: center;
  line-height: 1.8;
  margin: 30px 0;
}

#toppage #solution .solution02 {
  width: 888px;
  background: rgba(61, 98, 173, .1);
  margin: 100px auto 30px;
  position: relative;
  padding: 50px 0 0 0;
  height: 400px;
  z-index: 5;
}

#toppage #solution .solution02::before {
  content: "";
  width: 888px;
  background: rgba(61, 98, 173, .1);
  position: absolute;
  top: 10px;
  left: 10px;
  height: 400px;
  z-index: -1;
}

#toppage #solution .solution02 p {
  font-size: 18px;
  line-height: 1.6;
}

#toppage #solution .solution02 dl {
  width: 720px;
  text-align: center;
  margin: 0 0 0 -360px;
  padding: 15px 0;
  border-bottom: solid 4px #0075c2;
  background: #fff;
  position: absolute;
  top: -80px;
  left: 50%;
}

#toppage #solution .solution02 dl:after {
  content: url(../img/delta.png);
  position: absolute;
  left: 48%;
  bottom: -30px;
}

#toppage #solution .solution02 dl dt {
  font-size: 48px;
  text-align: center;
  color: #0075c2;
  margin: 20px 0 0 0;
  font-weight: bold;
}

#toppage #solution .solution02 dl dd {
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}

#toppage #solution .solution02 .list01 {
  display: flex;
  align-items: center;
  width: 700px;
  margin: 0 auto 15px;
}

#toppage #solution .solution02 .list01 li {
  background: #06b4ea;
  color: #fff;
  font-size: 24px;
  width: 220px;
  text-align: center;
  padding: 25px 0;
  -webkit-box-shadow: 0 0 5px 0 #fff;
  -moz-box-shadow: 0 0 5px 0 #fff;
  box-shadow: 0 0 5px 0 #fff;
  margin: 0 20px 0 0;
}

#toppage #solution .solution02 .list01 li:first-child {
  background: url(../img/top/bg_solution01.jpg) no-repeat left bottom #06b4ea;
}

#toppage #solution .solution02 .list01 li:nth-child(2) {
  background: url(../img/top/bg_solution02.jpg) no-repeat left bottom #06b4ea;
}

#toppage #solution .solution02 .list01 li:nth-child(3) {
  background: url(../img/top/bg_solution03.jpg) no-repeat left bottom #06b4ea;
  margin: 0;
}

#toppage #solution .solution02 .list02 {
  display: flex;
  align-items: center;
  width: 610px;
  padding: 0 0 15px;
  margin: 15px auto 0;
}

#toppage #solution .solution02 .list02 li {
  background: #fff;
  color: #06b4ea;
  font-size: 18px;
  width: 190px;
  text-align: center;
  padding: 20px 0;
  margin: 0 20px 0 0;
}

#toppage #solution .solution02 .list02 li:nth-child(3) {
  margin: 0;
}

#toppage #solution .whiteBg {
  width: 95%;
  margin: 15px auto 0;
  max-width: 380px;
  padding: 15px 0;
  background: #fff;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.2em;
}

#toppage #product_info {
  position: relative;
}

#toppage #product_info:before {
  content: "";
  width: 2200px;
  background: #fff;
  height: 800px;
  transform: rotate(10deg);
  position: absolute;
  left: 50%;
  margin: -460px 0 0 -1100px;
  z-index: 0;
}

#toppage #all {
  max-width: 100%;
  overflow: hidden;
}

#toppage .slider {
  margin: 0;
  padding: 0;
  border: none !important;
}

#toppage #product_info .content_wrap {
  position: relative;
  z-index: 50;
  margin: -300px 0 0 0;
}

#toppage #product_info .product_info01 .bg-box {
  width: 65%;
  background: url(../img/top/bg_product_info01.jpg) no-repeat center center / cover;
  height: 370px;
}

#toppage #product_info .product_info01 .inner {
  float: right;
}

#toppage #product_info .product_info02 .bg-box {
  width: 65%;
  background: url(../img/top/bg_product_info02.jpg) no-repeat center center / cover;
  height: 370px;
  float: right;
}

#toppage #product_info .inner {
  width: 500px;
  background: rgba(255, 255, 255, .8);
}

#toppage #product_info .product_info02 {
  margin: 100px 0 0 0;
  overflow: hidden;
}

#toppage #product_info .product_info02 .inner {
  border-top: solid 1px #06b4ea;
  margin: -150px 0 0 0;
  float: left;
}

#toppage #product_info .product_info01 .inner {
  border-top: solid 1px #3d62ad;
  margin: -150px 0 0 0;
}

#toppage #product_info .product_info01 h4 {
  font-size: 24px;
  color: #3d62ad;
  padding: 25px 0 18px;
  text-align: center;
  line-height: 1.5;
}

#toppage #product_info .product_info01 li {
  float: right;
  width: 95%;
  position: relative;
}

#toppage #product_info .product_info01 li:after {
  content: url(../img/arrow04.png);
  position: absolute;
  right: 0;
  top: 50%;
  margin: -15px 0 0 0;
}

#toppage #product_info .product_info02 p a {
  position: relative;
}

#toppage #product_info .product_info02 p a:after {
  content: url(../img/arrow05.png);
  position: absolute;
  right: 0;
  top: 50%;
  margin: -15px 0 0 0;
}

#toppage #product_info .product_info01 li a {
  display: block;
  background: #3d62ad;
  color: #fff;
  padding: 12px 0;
  line-height: 1.5;
  text-align: center;
  font-size: 13px;
}

#toppage #product_info .product_info02 h4 {
  font-size: 24px;
  color: #06b4ea;
  padding: 25px 0;
  text-align: center;
  line-height: 1.5;
}

#toppage #product_info .product_info02 a {
  display: block;
  background: #06b4ea;
  color: #fff;
  padding: 15px 0;
  line-height: 1.5;
  text-align: center;
  width: 95%;
}

#toppage #result {
  background: url(../img/top/bg_intro.jpg) no-repeat center center / 1920px auto;
  padding: 400px 0;
  margin: -170px 0 0 0;
  position: relative;
}

#toppage .graph_wrap {
  padding: 30px 0 0;
}

#toppage .graph_wrap .hgroup {
  margin: 0 0 5px;
}

#toppage .graph_wrap p.date {
  color: #666;
  text-align: center;
  font-size: 17px;
  margin: 0 0 50px;
}

#toppage #result .hgroup h2 {
  color: #fff;
}

#toppage #result .hgroup h3 {
  color: #fff;
}

#toppage #result h4 {
  font-size: 18px;
  color: #fff;
  text-align: center;
  margin: 0 0 50px;
  letter-spacing: 0.2em;
}

#toppage #result p {
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 1.8;
}

#toppage #result:before {
  content: "";
  width: 2200px;
  background: #fff;
  height: 800px;
  transform: rotate(10deg);
  position: absolute;
  left: 50%;
  margin: -900px 0 0 -1100px;
  z-index: 0;
}

#toppage #result:after {
  content: "";
  width: 2200px;
  background: #fff;
  height: 800px;
  transform: rotate(10deg);
  position: absolute;
  bottom: -480px;
  left: 50%;
  margin: -460px 0 0 -1250px;
  z-index: 0;
}

#toppage #csr {
  position: relative;
  z-index: 20;
  margin: -300px 0 0 0;
  height: 1500px;
}

#toppage #csr .image_bg {
  position: relative;
}

#toppage #csr .image_bg figure {
  position: absolute;
  bprder: solid 1px #fff;
}

#toppage #csr .image_bg figure:nth-child(1) {
  left: 50%;
  margin: 0 0 0 -192px;
  top: -5px;
  z-index: 0;
}

#toppage #csr .image_bg figure:nth-child(2) {
  left: 50%;
  margin: 0 0 0 -481px;
  top: 132px;
  z-index: 0;
}

#toppage #csr .image_bg figure:nth-child(3) {
  right: 50%;
  margin: 0 -640px 0 0;
  top: 309px;
  z-index: 0;
}

#toppage #csr .image_bg figure:nth-child(4) {
  left: 50%;
  margin: 0 0 0 -640px;
  top: 404px;
  z-index: 20;
}

#toppage #csr .image_bg figure:nth-child(5) {
  left: 50%;
  margin: 0 0 0 -330px;
  top: 650px;
  z-index: 30;
}

#toppage #csr h4 {
  font-size: 18px;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.2em;
  font-weight: bold;
  margin: 0 0 60px;
}

#toppage #csr .image_bg p {
  width: 270px;
  line-height: 1.5;
  position: relative;
  left: 50%;
  margin: 0 0 0 -477px;
}

#toppage #csr .image_bg dl {
  width: 390px;
  margin: 286px auto;
}

#toppage #csr .sp-image {
  display: none;
}

#toppage #csr .image_bg dl dt {
  font-size: 21px;
  text-align: center;
  margin: 0 0 22px;
  background: #0075c2;
  color: #fff;
  padding: 9px 0;
  position: relative;
  left: 3px;
  font-weight: bold;
  border-bottom: solid 4px #06b4ea;
}

#toppage #csr .image_bg dl dd {
  line-height: 1.5;
  font-size: 13px;
  padding: 0 36px;
}

#toppage #csr .image_bg dl dd img {
  display: block;
  margin: 20px auto;
}

#toppage .scroll {
  display: block;
  width: 80px;
  height: 80px;
  margin: -40px auto 0;
  background: #fff;
  position: relative;
  z-index: 500;
  text-align: center;
  color: #2e008b;
  font-size: 12px;
  font-family: 'Roboto bold', sans-serif;
  font-weight: 700;
  padding: 10px 0 0 0;
  cursor: pointer;
}

#toppage .scroll:after {
  content: "";
  border-left: solid #2e008b 1px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 30px;
}

#year2021,
#year2020,
#year2019,
#year2018,
#year2017,
#ank1,
#ank2,
#ank3 {
  margin: -50px 0 0 0;
  padding: 50px 0 30px 0;
}

#csr #csr_main {
  position: relative;
}

#csr #csr_main .bg_images {
  position: absolute;
}

#csr #csr_main .bg_images:nth-child(1) {
  top: 100px;
  right: 50%;
  margin: 0 -313px 0 0;
}

#csr #csr_main .bg_images:nth-child(2) {
  top: 134px;
  left: 50%;
  margin: 0 0 0 -510px;
}

#csr #csr_main .bg_images:nth-child(3) {
  top: 179px;
  right: 50%;
  margin: 0 -666px 0 0;
}

#csr #csr_main .bg_images:nth-child(4) {
  top: 364px;
  left: 50%;
  margin: 0 0 0 -654px;
}

#csr #csr_main .bg_images:nth-child(5) {
  top: 474px;
  left: 50%;
  margin: 0 0 0 -565px;
}

#csr #csr_main .bg_images:nth-child(6) {
  top: 541px;
  right: 50%;
  margin: 0 -586px 0 0;
}

#csr #csr_main .bg_images:nth-child(7) {
  top: 685px;
  left: 50%;
  margin: 0 0 0 -360px;
}

#csr #csr_main .bg_images:nth-child(8) {
  top: 684px;
  right: 50%;
  margin: 0 -160px 0 0;
}

#csr #csr_main .bg_images:nth-child(9) {
  top: 726px;
  right: 50%;
  margin: 0 -368px 0 0;
}

#csr #csr_main h2 {
  font-size: 100px;
  text-align: center;
  color: #00a6d8;
  font-family: 'Roboto bold', sans-serif;
  font-weight: 700;
  padding: 320px 0 0;
  text-shadow: 1px 1px 10px #fff, -1px 1px 10px #fff, 1px -1px 10px #fff, -1px -1px 10px #fff;
}

#csr #csr_main h2 span {
  color: #3d62ad;
}

#csr #csr_main h3 {
  font-size: 24px;
  text-align: center;
  padding: 0 0 30px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.15em;
}

#csr #csr_main p {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}

#csr #over_wrap {
  background-repeat: no-repeat;
  background-position: center 100px;
}

#csr #csr_wave {
  background: url(../../csr/img/wave_bg.png) no-repeat center top;
  position: relative;
  top: 80px;
  z-index: -1;
}

#csr #csr_wave dt em {
  font-size: 16px;
  color: #00a6d8;
  margin: 0 0 5px;
}

#csr #csr_wave .inner {
  width: 950px;
  margin: 0 auto;
  padding: 200px 0 150px 0;
  overflow: hidden;
}

#csr #csr_wave .inner figure {
  float: right;
  margin: 70px 0 0 0;
}

#csr #csr_wave .inner dl {
  float: left;
  width: 550px;
}

#csr #csr_wave .inner dt {
  font-size: 24px;
  color: #00a6d8;
  padding: 0 0 25px 0;
}

#csr #csr_wave .inner dd {
  line-height: 1.5;
}

#csr .topic-path {
  width: 950px;
  margin: 0 auto;
  padding: 8px 0 10px;
}

#csr #works {
  background: linear-gradient(#c7e1f1, #F0F7FB);
  margin: -30px 0 3px;
  overflow: hidden;
  padding: 0 0 200px;
  position: relative;
}

#csr #works .inner {
  width: 950px;
  margin: 0 auto;
  padding: 70px 0 0 0;
}

#csr #works ol li:nth-child(odd) {
  position: relative;
  padding: 120px 0 0 0;
  height: 520px;
}

#csr #works ol li:nth-child(even) {
  position: relative;
  padding: 80px 0 0 0;
  height: 670px;
}

#csr #works .text {
  background: #fff;
  width: 570px;
  position: absolute;
  z-index: 3;
}

#csr #works .text dl {
  padding: 60px 35px 10px;
}

#csr #works .text dl dt p.heading {
  color: #3b60ac;
  font-size: 24px;
  padding: 0;
  font-weight: normal;
  background: none;
}

#csr #works .text dl dt p {
  font-weight: bold;
  padding: 25px 0 25px 45px;
}

#csr #works .text dl dd p {
  padding: 0 0 15px;
}

#csr #works ol li dl dd {
  line-height: 1.5;
}

#csr #works ol li h2 {
  background: #3d62ad;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  position: absolute;
  left: -15px;
  top: -40px;
  text-align: center;
  color: #fff;
  padding: 10px 0 0 0;
  line-height: 1.3;
}

#csr #works ol li h2:after {
  content: url(../../csr/img/bg_circle.jpg);
  position: absolute;
  bottom: -3px;
  right: 2px;
}

#csr #works ol li h2 span {
  font-size: 20px;
}

#csr #works ol li:nth-child(1) dl dt p {
  background: url(../../csr/img/flag01.png) no-repeat left center;
}

#csr #works ol li:nth-child(2) dl dt p {
  background: url(../../csr/img/flag02.png) no-repeat left center;
}

#csr #works ol li:nth-child(3) dl dt p {
  background: url(../../csr/img/flag03.png) no-repeat left center;
}

#csr #works ol li .img {
  position: absolute;
  left: 505px;
  top: 80px;
  z-index: 2;
}

#csr #works ol li .icon {
  position: absolute;
  left: 580px;
  top: 410px;
  z-index: 2;
}

#csr #works ol li:nth-child(2) .text {
  background: #fff;
  width: 570px;
  position: absolute;
  z-index: 3;
  left: 380px;
}

#csr #works ol li:nth-child(2) .img {
  position: absolute;
  left: 0;
  top: 220px;
  z-index: 2;
}

#csr #works ol li:nth-child(2) .icon {
  position: absolute;
  left: 455px;
  top: 448px;
  z-index: 2;
}

#csr #works #blueBg {
  width: 4000px;
  background: linear-gradient(90deg, #429bd0, #1765a7);
  height: 4000px;
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  margin: 0 0 -1500px -1500px;
  transform-origin: top left;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#solution_about #over_wrap {
  background-position: center 220px;
}

#solution_about #solution_main h2 {
  text-align: center;
  padding: 30px 0 80px;
}

#solution_about #solution_main p {
  line-height: 2;
  text-align: center;
  padding: 0 0 60px;
  font-size: 14px;
}

#solution_about #solution_main p#bold {
  font-size: 24px;
  letter-spacing: 0.3em;
  padding: 0;
  line-height: 1;
  text-align: center;
}

#solution_about #solution_main h3 {
  background: #0075c2;
  color: #fff;
  font-size: 20px;
  width: 460px;
  margin: 0 auto 40px;
  text-align: center;
  padding: 10px 0 8px;
  position: relative;
  letter-spacing: 0.05em;
}

#solution_about #solution_main h3:after {
  content: url(../../solution/img/delta.png);
  position: absolute;
  left: 48%;
  bottom: -20px;
}

#solution_about #solution_main .center_main dt {
  font-size: 48px;
  font-weight: 600;
  text-align: center;
  color: #0075c2;
  margin: 0 0 30px;
  letter-spacing: 0.15em;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 10px #fff, -1px 1px 10px #fff, 1px -1px 10px #fff, -1px -1px 10px #fff;
}

#solution_about #solution_main .center_main dd {
  font-size: 20px;
  text-align: center;
  line-height: 1.8;
}

#solution_about #solution_main .circle {
  overflow: hidden;
  padding: 20px 0 90px;
}

#solution_about #solution_main .circle li {
  width: 280px;
  height: 280px;
  float: left;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(6, 180, 234, .5);
  margin: 0 0 0 26px;
  position: relative;
  background: #fff;
  padding: 5px;
}

#solution_about #solution_main .circle li:nth-child(1):before {
  content: url(../../solution/img/ic01.png);
  position: absolute;
  top: 20px;
  left: 50%;
  margin: 0 0 0 -37px;
}

#solution_about #solution_main .circle li:nth-child(2):before {
  content: url(../../solution/img/ic02.png);
  position: absolute;
  top: 20px;
  left: 50%;
  margin: 0 0 0 -37px;
}

#solution_about #solution_main .circle li:nth-child(3):before {
  content: url(../../solution/img/ic03.png);
  position: absolute;
  top: 20px;
  left: 50%;
  margin: 0 0 0 -37px;
}

#solution_about #solution_main .circle li:nth-child(2) {
  margin: 70px 0 0 26px;
}

#solution_about #solution_main .circle dl {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  border: solid 1px rgba(6, 180, 234, .3);
}

#solution_about #solution_main .circle dt {
  font-size: 30px;
  color: #06b4ea;
  text-align: center;
  margin: 110px 0 15px 0;
  font-weight: bold;
}

#solution_about #solution_main .circle dd {
  width: 180px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 16px;
}

#solution_about #solution_main figure {
  text-align: center;
  margin: 15px 0 10px
}

#solution_about #solution_main .squre {
  overflow: hidden;
  width: 1000px;
  margin: 0 auto;
}

#solution_about #solution_main .squre li {
  width: 292px;
  float: left;
  margin: 0 0 0 37px;
  border: solid 1px #d7e1ed;
  padding: 23px 20px 20px 20px;
}

#solution_about #solution_main .squre li:first-child {
  margin: 0;
}

#solution_about #solution_main .squre li dt {
  font-size: 24px;
  color: #06b4ea;
  margin: 0 0 15px;
  position: relative;
  padding: 0 0 0 40px;
  text-align: center;
}

#solution_about #solution_main .squre li:nth-child(1) dt::before {
  content: url(../../solution/img/ic04.png);
  position: absolute;
  top: -10px;
  left: 50%;
  margin: 0 0 0 -80px;
}

#solution_about #solution_main .squre li:nth-child(2) dt:before {
  content: url(../../solution/img/ic05.png);
  position: absolute;
  top: -10px;
  left: 50%;
  margin: 0 0 0 -60px;
}

#solution_about #solution_main .squre li:nth-child(3) dt:before {
  content: url(../../solution/img/ic06.png);
  position: absolute;
  top: -10px;
  left: 50%;
  margin: 0 0 0 -100px;
}

#solution_about #solution_main .squre li dd {
  font-size: 15px;
}

#solution_about .after {
  width: 600px;
  margin: 0 auto 100px;
  border: solid 1px #d7e1ed;
  padding: 23px 0 18px;
}

#solution_about #solution_main .after dt {
  font-size: 24px;
  text-align: center;
  margin: 0 0 15px;
}

#solution_about #solution_main .after dd {
  font-size: 16px;
  text-align: center;
}

#solution_about .video {
  margin: 0 auto 100px;
}

#solution_about #flow {
  background: linear-gradient(#c7e1f1, #F0F7FB);
}

#solution_about #flow h2 {
  width: 450px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0 25px;
  position: relative;
  z-index: 1;
  font-size: 18px;
}

#solution_about #flow h2:after {
  position: absolute;
  width: 450px;
  height: 120px;
  top: -60px;
  left: 50%;
  z-index: -1;
  margin: 0 0 0 -225px;
  content: "";
  background: linear-gradient(35deg, transparent 50px, #fff 50px), linear-gradient(325deg, transparent 50px, #fff 50px);
  background-position: bottom left, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

#solution_about .inner {
  width: 950px;
  margin: 0 auto;
}

#solution_about #flow ul {
  overflow: hidden;
  padding: 100px 0 0 0;
}

#solution_about #flow li {
  width: 440px;
  float: left;
  margin: 0 0 80px;
  padding: 40px 35px 20px;
  position: relative;
  background: linear-gradient(215.5deg, transparent 40px, #fff 40px);
  background-position: top right;
  background-repeat: no-repeat;
}

#solution_about #flow li:nth-child(even) {
  margin: 72px 0 70px 70px;
}

#solution_about #flow li:nth-child(odd):after {
  position: absolute;
  content: url(../img/arrow06.png);
  right: -53px;
  bottom: -6px;
  transform: rotate(30deg);
}

#solution_about #flow li:nth-child(even):after {
  position: absolute;
  content: url(../img/arrow06.png);
  left: -59px;
  bottom: -10px;
  transform: rotate(150deg);
}

#solution_about #flow li:nth-child(8):after {
  display: none;
}

#solution_about #flow li:nth-child(odd) {
  margin: -70px 0 100px 0;
}

#solution_about #flow li dt {
  font-size: 24px;
  color: #3d62ad;
  margin: 0 0 10px;
}

#solution_about #flow li dd {
  font-size: 16px;
  line-height: 1.5;
}

#solution_about #flow li span {
  display: inline-block;
  background: url(../../solution/img/bg_slush.png) no-repeat right center #3d62ad;
  color: #fff;
  font-size: 20px;
  font-family: 'Roboto thin', sans-serif;
  font-weight: 100;
  padding: 0 40px 0 10px;
  position: absolute;
  left: 20px;
  top: -15px;
}

#solution_about .demonstration {
  border-top: #00a6d8 1px solid;
}

#solution_about .demonstration .right-demon .demon-tbl03 td.small {
  font-size: 0.75em;
  line-height: 1.4;
  letter-spacing: -0.05em;
}

#solution_about .demonstration div.strong {
  width: 100%;
  background: #2293bc;
  padding: 10px 0;
  text-align: center;
  font-size: 1.7em;
  color: #fff;
  clear: both;
  margin: 10px 0 0 0;
  letter-spacing: 0.1em;
}

#solution_about .demonstration div.strong2 {
  width: 88%;
  background: #2293bc;
  padding: 10px 0;
  text-align: center;
  font-size: 1.7em;
  color: #fff;
  clear: both;
  margin: 10px 0 0 0;
  letter-spacing: 0.1em;
  float: right;
}

#solution_about .demonstration h2 {
  background: #00a6d8;
  font-size: 18px;
  width: 150px;
  text-align: center;
  font-weight: normal;
  color: #fff;
  padding: 5px 0;
  margin: -20px auto 0;
}

#solution_about .demonstration h3 {
  text-align: center;
  font-size: 24px;
  color: #2293bc;
  margin: 50px 0 70px 0;
  line-height: 1.5;
  font-weight: bold;
}

#solution_about .demonstration h5 {
  position: absolute;
  font-size: 16px;
  color: #fff;
  background: #2293bc;
  top: -17px;
  left: 0;
  padding: 5px 15px;
  z-index: 10;
}

#solution_about .demonstration h5:after {
  content: '';
  background: url(../../solution/img/shadow.png) no-repeat 0 0;
  width: 17px;
  height: 17px;
  position: absolute;
  background-size: contain;
  right: -17px;
  top: 0;
  z-index: -1;
}

#content_wp2 {
  overflow: hidden;
  width: 950px;
  margin: 0 auto;
  padding-top: 8px;
  font-size: 13px;
  line-height: 180%;
}

#solution_about .demonstration .border {
  border: #ccc solid 1px;
  box-sizing: border-box;
  padding: 40px;
  margin: 30px 0 70px 0;
  position: relative;
  background: #fff;

}

#solution_about .demonstration .downerBox {
  margin: 50px 0 0 0;
  overflow: hidden;
}

#solution_about .demonstration .downerBox .left-demon {
  float: left;
  width: 48%;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 {
  width: 100%;
  border-bottom: 1px solid #2293bc;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 th {
  border-bottom: 1px solid #2293bc;
  border-right: 1px solid #ccc;
  text-align: center;
  color: #2293bc;
  vertical-align: middle;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 th:first-child {
  width: 40%;
  -moz-text-align-last: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
  padding: 5px 20px;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 td:first-child {
  -moz-text-align-last: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
  padding: 5px 20px;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 th:last-child {
  width: 40%;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 tr th:last-child {
  border-right: none;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 tr td:last-child {
  border-right: none;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 tr:last-child td {
  border-bottom: 1px solid #2293bc;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  padding: 5px 0;
  vertical-align: middle;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 td.up {
  font-size: 1.3em;
  color: #2293bc;
  letter-spacing: 0.05em;
  text-indent: -2em;
  background: url(../../solution/img/ic_up.jpg) no-repeat center right / auto 95%;
}

#solution_about .demonstration .downerBox .left-demon .demon-tbl02 td.down {
  font-size: 1.3em;
  color: #2293bc;
  letter-spacing: 0.05em;
  text-indent: -2em;
  background: url(../../solution/img/ic_down.jpg) no-repeat center right / auto 95%;
}

#solution_about .demonstration .downerBox .right-demon .demon-tbl03 {
  width: 100%;
}

#solution_about .demonstration .downerBox .right-demon {
  float: right;
  width: 48%;
}

#solution_about .demonstration h6.flow-heading {
  color: #fff;
  text-align: center;
  padding: 5px 0;
  background: #7CBFD7;
  margin: 30px 0 0 0;
}

#solution_about .demonstration .demon-flow {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
  padding: 15px 0 0;
}

#solution_about .demonstration .demon-flow li {
  height: 60px;
  width: 20%;
}

#solution_about .demonstration .demon-flow li p {
  height: 100%;
  border: solid 1px #2293bc;
  text-align: center;
  box-sizing: border-box;
  padding: 18px 0;
  margin: 0 0 10px;
  position: relative;
}

#solution_about .demonstration .demon-flow li p.doubleLine {
  padding: 14px 0;
  line-height: 1.2;
}

#solution_about .demonstration .demon-flow li p.threeLine {
  padding: 9px 0;
  line-height: 1.2;
}

#solution_about .demonstration .demon-flow li.doubleheight {
  height: 130px;
  line-height: 1.2;
}

#solution_about .demonstration .demon-flow li.doubleheight p {
  padding: 60px 0;
}

#solution_about .demonstration .demon-tbl01 {
  width: 100%;
}

#solution_about .demonstration .demon-tbl01 th {
  border-bottom: solid 1px #c9caca;
  width: 30%;
  padding: 7px 0;
  -moz-text-align-last: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
}

#solution_about .demonstration .demon-tbl01 td {
  border-bottom: solid 1px #c9caca;
  padding: 7px 0;
  text-align: right;
}

#solution_about .demonstration .upperBox {
  overflow: hidden;
}

#solution_about .demonstration .upperBox .left-demon {
  float: left;
  width: 40%;
}

#solution_about .demonstration .upperBox .right-demon {
  float: right;
  width: 55%;
}

#solution_about .demonstration .upperBox .right-demon img {
  width: 100%;
}

#solution_about .demonstration .border .inBox {
  overflow: hidden;
}

#solution_about .demonstration .right-demon .demon-tbl03 {
  width: 100%;
  border-bottom: 1px solid #2293bc;
}

#solution_about .demonstration .right-demon .demon-tbl03 th {
  border-bottom: 1px solid #2293bc;
  border-right: 1px solid #ccc;
  text-align: center;
  color: #2293bc;
  vertical-align: middle;
  padding: 5px 0;
}

#solution_about .demonstration .right-demon .demon-tbl03 td {
  border-bottom: 1px solid #2293bc;
  border-right: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
  width: 25%;
}

#solution_about .demonstration .upperBox .right-demon .demon-tbl03 {
  margin: 40px 0 0 0;
  width: 88%;
  float: right;
}

#solution_about .demonstration .right-demon .demon-tbl03 th:first-child {
  width: 47%;
}

#solution_about .demonstration .right-demon .demon-tbl03 th:last-child {
  width: 35%;
}

#solution_about .demonstration .right-demon .demon-tbl03 tr th:last-child {
  border-right: none;
}

#solution_about .demonstration .right-demon .demon-tbl03 tr td:last-child {
  border-right: none;
}

#solution_about .demonstration .right-demon .demon-tbl03 tr td:last-child {
  text-align: right;
}

#solution_about .demonstration .right-demon .demon-tbl03 tr td.after {
  color: #2293bc;
  font-size: 1.3em;
}

#solution_about .demonstration .right-demon .demon-tbl03 tr td.justy {
  -moz-text-align-last: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
  padding: 0 15px;
}

#solution_about .demonstration .right-demon .demon-tbl03 tr td.totals {
  color: #2293bc;
  letter-spacing: 1em;
}

#solution_about .demonstration .right-demon .demon-tbl03 tr td.total span {
  color: #595757;
}

#solution_about .demonstration .right-demon .demon-tbl03 tr td.after-total {
  color: #2293bc;
  font-size: 1.6em;
}

#solution_about .demonstration .demon-flow01 li p:after {
  content: "▲";
  color: #2293bc;
  position: absolute;
  right: -18px;
  top: 30%;
  transform: rotate(90deg);
}

#solution_about .demonstration .demon-flow01 li p.doubleLine:after {
  top: 34%;
}

#solution_about .demonstration .demon-flow01 li p.threeLine:after {
  top: 14%;
}

#solution_about .demonstration .demon-flow01 li:last-child p:after {
  display: none;
}



#solution_about .demonstration .demon-flow02 li {
  width: 25%;
}

#solution_about .demonstration .demon-flow02 li:last-child {
  width: 30%;
}

#solution_about .demonstration .demon-flow02 li p:before,
#solution_about .demonstration .demon-flow02 li p:after {
  content: "▲";
  position: absolute;
}

#solution_about .demonstration .demon-flow02 li p:before {
  right: -25px;
}

#solution_about .demonstration .demon-flow02 li p:after {
  right: -23px;
}

#solution_about .demonstration .demon-flow02 li p:before {
  color: #2293bc;
  transform: rotate(270deg);
}

#solution_about .demonstration .demon-flow02 li p:after {
  color: #2293bc;
  transform: rotate(90deg);
}

#solution_about .demonstration .demon-flow02 li:first-child p:before {
  top: 16%;
}

#solution_about .demonstration .demon-flow02 li:nth-child(2) p:before {
  bottom: 10%;
}

#solution_about .demonstration .demon-flow02 li:last-child p:before {
  display: none;
}

#solution_about .demonstration .demon-flow02 li:first-child p:after {
  bottom: 16%;
}

#solution_about .demonstration .demon-flow02 li:nth-child(2) p:after {
  top: 10%;
}

#solution_about .demonstration .demon-flow02 li:last-child p:after {
  display: none;
}





#processing_unit #content_wp section {
  padding: 0 0 100px;
}

#processing_unit #content_wp2 section {
  padding: 0 0 100px;
}

#processing_unit h5 {
  font-weight: normal;
  font-size: 16px;
  color: #0075c2;
  margin: 40px 0 10px 0;
}

#processing_unit .col3-1 {
  overflow: overflow: hidden;
  clear: both;
}

#processing_unit .col3-1 {
  overflow: hidden;
  margin: 30px 0 0 0;
}

#processing_unit figure.border {
  border-bottom: 1px solid #ccc;
}

#processing_unit .col3-1 li {
  width: 33%;
  float: left;
  border-left: dotted 1px #999;
}

#processing_unit .col3-1 li dl {
  padding: 0 20px 0 0;
}

#processing_unit .col3-1 li dt {
  padding: 0 0 10px 30px;
  font-size: 16px;
  position: relative;
}

#processing_unit .col3-1 li dt:before {
  content: "■";
  position: absolute;
  color: #3d62ad;
  left: 10px;
  top: 0;
}

#processing_unit .col3-1 li dd {
  padding: 0 0 0 30px;
}

#processing_unit .col4-2 {
  overflow: overflow: hidden;
  clear: both;
}

#processing_unit .col4-2 {
  overflow: hidden;
  margin: 30px 0 0 0;
}

#processing_unit .col4-2 li {
  width: 24.5%;
  float: left;
  border-left: dotted 1px #999;
}

#processing_unit .col4-2 li dl {
  padding: 0 20px 0 0;
}

#processing_unit .col4-2 li dt {
  padding: 0 0 10px 30px;
  font-size: 16px;
  position: relative;
}

#processing_unit .col4-2 li dt:before {
  content: "■";
  position: absolute;
  color: #3d62ad;
  left: 10px;
  top: 0;
}

#processing_unit .col4-2 li dd {
  padding: 0 0 0 30px;
}

#processing_unit .img_wrap01 {
  border: #CFD3DC solid 1px;
  max-width: 750px;
  width: 100%;
  margin: 30px auto 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#processing_unit .img_wrap01 img {
  max-width: 100%;
  margin: 40px auto;
  display: block;
}

#processing_unit .img_wrap01 dt {
  background: #CFD3DC;
  font-size: 16px;
  padding: 12px 40px 12px 15px;
  display: inline-block;
  text-align: left;
  overflow: hidden;
  position: relative;
}

#processing_unit .img_wrap01 dt:after {
  position: absolute;
  content: "";
  background: #fff;
  width: 40px;
  height: 100px;
  -webkit-transform: rotate(53.5deg);
  -moz-transform: rotate(53.5deg);
  -ms-transform: rotate(53.5deg);
  -o-transform: rotate(53.5deg);
  transform: rotate(53.5deg);
  top: -10px;
  right: 0;
  z-index: 10;
}

#processing_unit .img_wrap02 {
  background: #F0F3FA;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  padding: 25px 0 50px;
}

#processing_unit .img_wrap02 img {
  max-width: 100%;
}

#processing_unit .img_wrap02 dt {
  font-size: 16px;
  color: #3d62ad;
  background: #fff;
  padding: 10px 25px;
  display: inline-block;
  margin: 0 0 20px;
}

#module .box {
  overflow: hidden;
}

#module .box p {
  width: 390px;
  float: left;
}

#module .box figure {
  float: right;
  position: relative;
}

#module .box figcaption {
  color: #e9415d;
  font-size: 13px;
  text-align: center;
}

#module article {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 20px 0;
  margin: 50px 0;
  text-align: center;
}

#module .wrap_lyt01 {
  overflow: hidden;
  padding: 0 0 40px;
  margin: 0 0 40px;
  border-bottom: solid #999 1px;
}

#module .wrap_lyt01 figure {
  width: 380px;
  float: left;
  position: relative;
}

#module .wrap_lyt01 figcaption {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  padding: 7px 20px;
  z-index: 5;
  font-size: 18px;
}

#module .wrap_lyt01 figcaption:after {
  position: absolute;
  left: 0;
  bottom: -25px;
  content: url(../../product/img/w_delta.png);
}

#module .wrap_lyt01 div {
  width: 520px;
  float: left;
  margin: 0 0 0 50px;
}

#module .wrap_lyt01 div dt {
  font-size: 16px;
  padding: 0 0 0 20px;
  background: url(../../product/img/module_ic02.jpg) no-repeat center left;
  margin: 20px 0 5px;
}

#module .wrap_lyt01 div dd {
  padding: 0 0 0 20px;
}

#module .wrap_lyt01 div a {
  display: inline-block;
  background: url(../../product/img/module_ic03.jpg) no-repeat 10px center #122889;
  color: #fff;
  padding: 7px 10px 7px 35px;
  margin: 10px 0 0 20px;
}

#module #overlay {
  position: fixed;
  background: rgba(0, 53, 103, .8);
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}

@media screen and (min-width:769px) {
  #module .data1.data_detail {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    height: 430px;
  }

  #module .data2.data_detail {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    height: 510px;
  }

  #module .data3.data_detail {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    height: 330px;
  }

  #module .data4.data_detail {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    height: 530px;
  }

  #module .data5.data_detail {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    height: 530px;
  }

  #module .data6.data_detail {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    height: 440px;
  }

  #module .data7.data_detail {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    height: 530px;
  }

  #module .data8.data_detail {
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    height: 480px;
  }
}

#module .data_detail {
  display: none;
  width: 620px;
  background: #fff;
  z-index: 1000;
  padding: 20px 30px;
  position: fixed;
  top: 200px;
  left: 50%;
  margin: 0 0 0 -310px;
}

#module .data_detail .closed {
  content: url(../../product/img/module_data_icon_close.jpg);
  position: absolute;
  right: -10px;
  top: -20px;
  cursor: pointer;
}

#module .data_detail dt {
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  padding: 2px 0 5px 30px;
  margin: 0 0 20px;
  position: relative;
}

#module .data_detail dt:before {
  content: url(../../product/img/module_data_icon.jpg);
  position: absolute;
  left: 0;
  top: 5px;
}

#module .data_detail dt span {
  font-size: 16px;
}

#module .data_detail dt em {
  font-size: 20px;
  display: inline-block;
  border-left: 1px solid #ccc;
  padding: 2px 0 2px 10px;
  margin: 0 0 0 10px;
}

#module .data_detail dd {
  margin: 0 0 15px;
}

#module .data_detail figure {
  width: auto;
  margin: 0 auto;
  display: block;
}

#module .data_detail figure img {
  width: 100%;
}

#module .data_detail figure figcaption {
  font-size: 16px;
  position: relative;
  margin: 0 0 10px;
}

#module .data_detail figure figcaption span {
  color: #0075c2;
  margin: 0 5px 0 0;
}

#module .data2.data_detail figure {
  width: 394px;
}

#module .data3.data_detail figure {
  width: 464px;
}

#module .data4.data_detail figure {
  width: 368px;
}

#module .data5.data_detail figure {
  width: 558px;
}

#module .data6.data_detail figure {
  width: 397px;
}

#module .data7.data_detail figure {
  width: 466px;
}

#module .data8.data_detail figure {
  width: 560px;
}

#csr .topic-path,
#solution_about .topic-path {
  padding: 8px 0 0;
}

#info .topic-path {
  padding: 0px 0 70px;
}

#info aside {
  width: 210px;
  float: right;
}

#info aside h2 {
  background: linear-gradient(145deg, transparent 25px, #073b92 26px);
  background-position: top left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  padding: 5px 0 3px;
  color: #fff;
}

#info aside ul {
  background: #eff7fb;
  padding: 10px 0 20px;
}

#info aside ul a {
  display: block;
  padding: 5px 20px;
}

#info aside ul a:hover {
  text-decoration: underline;
}

#info main {
  width: 700px;
  float: left;
}

#info main dt span.news {
  background: #ec6d74;
}

#info main dt span {
  font-size: 12px;
  color: #fff;
  background: #0075c2;
  padding: 3px 12px 2px;
  margin: 0 5px 0 0;
}

#info main dd span.press {
  font-size: 12px;
  color: #fff;
  background: #b5b5b5;
  padding: 1px 12px 0px;
  display: inline-block;
  margin: 10px 0 10px;
}

#info main dl {
  padding: 0 0 25px;
  margin: 0 0 25px;
  border-bottom: solid 1px #ccc;
}

#info main dl a:hover dd {
  text-decoration: underline;
}

#info main dl dd {
  line-height: 1.5;
}

#info main ul {
  padding: 0 0 40px;
}

#info main .page_nation {
  padding: 0 0 60px;
  text-align: center;
}

#info main .page_nation a {
  display: inline-block;
  width: 30px;
  text-align: center;
  background: #d4d4d4;
  margin: 0 0 0 -1px;
  padding: 3px 0;
}

#info main .page_nation a.active {
  display: inline-block;
  width: 30px;
  text-align: center;
  background: #000;
  color: #fff;
}

#info main .page_nation a:hover {
  background: #073b92;
  color: #fff;
}

#info.detail main dl {
  padding: 0 0 25px;
  margin: 0;
  border-bottom: none;
}

#info.detail main h3 {
  font-size: 20px;
  line-height: 1.5;
  padding: 0 0 30px;
  margin: 0 0 40px;
  border-bottom: solid 1px #ccc;
}

#info.detail main h4 {
  font-size: 18px;
  line-height: 1.5;
  padding: 0 0 30px;
}

#info.detail main p {
  padding: 0 0 40px;
  overflow: hidden;
}

#info.detail main .left img {
  width: 48%;
  float: left;
  margin: 0 2% 0 0;
}

#info.detail main .right img {
  width: 48%;
  float: right;
  margin: 0 0 0 2%;
}

#info.detail main .right {
  text-align: left !important;
}

#info.detail main .image1 {
  padding: 0 0 30px;
}

#info.detail main .image1 img {
  max-width: 100%;
}

#info.detail main .image2 {
  overflow: hidden;
  padding: 0 0 30px;
}

#info.detail main .image2 figure {
  width: 48%;
  margin: 0 0 0 4%;
  float: left;
}

#info.detail main .image2 figure img {
  width: 100%;
}

#info.detail main .image2 figure:first-child {
  margin: 0;
}

#info.detail main .image3 {
  overflow: hidden;
  padding: 0 0 30px;
}

#info.detail main .image3 figure {
  width: 32%;
  margin: 0 0 0 2%;
  float: left;
}

#info.detail main .image3 figure img {
  width: 100%;
}

#info.detail main .image3 figure:first-child {
  margin: 0;
}

#info.detail p {
  line-height: 1.5;
}

#info.detail .content_wrap {
  padding: 0 0 70px;
  margin: 0 0 70px;
  border-bottom: #ccc solid 1px;
}

#info.detail .back {
  display: inline-block;
  background: linear-gradient(90deg, #3d62ad, #4b79c5);
  padding: 8px 40px 6px 20px;
  margin: 0 auto 140px;
  position: relative;
  color: #fff;
}

#info.detail .back:after {
  content: url(../../information/img/arrow.png);
  position: absolute;
  right: 13px;
  top: 12%;
}

#info.detail div.button {
  display: block;
  background: none;
  border: none;
  text-align: center;
}

#solution_index section {
  padding: 0 0 70px;
}

#solution_index .topic-path {
  padding: 0px 0 70px;
}

#solution_index ol dl {
  overflow: hidden;
  margin: 10px 0;
}

#solution_index ol dt {
  float: left;
  width: 180px;
  padding: 10px 0 10px 40px;
  position: relative;
  background: #fff;
  font-size: 18px;
  color: #3d62ad;
  z-index: 5;
}

#solution_index ol dd {
  float: left;
  margin: 0 0 0 15px;
  padding: 10px 0;
}

#solution_index ol li dt em {
  position: relative;
  background: #fff;
  display: inline-block;
  z-index: 50;
  padding: 0 15px 0 0;
}

#solution_index ol li dt:after {
  content: "";
  border-top: solid 1px #ccc;
  z-index: 0;
  top: 50%;
  right: 0;
  width: 50%;
  position: absolute;
  z-index: 0;
}

#solution_index ol li dt:before {
  position: absolute;
  background: #3d62ad;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  left: 0;
  font-size: 18px;
  padding: 3px 0 0 0;
  box-sizing: border-box;
  top: 7px;
}

#solution_index ol li:nth-child(1) dt:before {
  content: "1";
}

#solution_index ol li:nth-child(2) dt:before {
  content: "2";
}

#solution_index ol li:nth-child(3) dt:before {
  content: "3";
}

#solution_index ol li:nth-child(4) dt:before {
  content: "4";
}

#solution_index .border {
  border: 1px solid #ccc;
  padding: 30px 40px;
  overflow: hidden;
  margin: 30px 0;
}

#solution_index .title01 {
  float: left;
  width: 500px;
}

#solution_index .title01 dt {
  text-align: left;
  color: #3d62ad;
  font-size: 18px;
  padding: 30px 0 10px;
}

#solution_index .title01 dd {
  text-align: left;
  margin: 0 0 30px;
}

#solution_index .inBox1 {
  overflow: hidden;
  width: 330px;
  float: right;
}

#solution_index .inBox1 figure {
  float: left;
  margin: 0 10px 0 0;
  width: 570px;
}

#solution_index .inBox1 figure img {
  max-width: 100%;
}

#solution_index .inBox1 p {
  float: right;
  width: 280px;
}

#solution_index .inBox2 {
  float: right;
  width: 370px;
}

#solution_index figure {
  float: left;
  margin: 0 20px 0 0;
  width: 470px;
}

#solution_index figure img {
  max-width: 100%;
}

#solution_index .inBox2 p {
  color: #e8835c;
  margin: 25px 0 0 0;
}

#solution_index .inBox2 dl {
  overflow: hidden;
  margin: 10px 0 0;
}

#solution_index .inBox2 dl dt {
  font-weight: bold;
  float: left;
  width: 90px;
}

#solution_index .inBox2 dl dd {
  float: left;
  width: 280px;
}

#solution_index .fig figcaption {
  background: #e5eff8;
  text-align: center;
  color: #e95c25;
  font-weight: bold;
  padding: 10px 0 8px;
  line-height: 1.5;
}

#solution_index .inBox3 {
  width: 240px;
  float: left;
  margin: 0 0 0 20px;
}

#solution_index .fig {
  width: 470px;
  float: left;
  margin: 0 20px 0 60px;
  line-height: 0;
}

#solution_index .inBox3 dl {
  padding: 70px 0 0;
}

#solution_index .inBox3 dt {
  font-size: 14px;
  color: #3d62ad;
  padding: 0 0 10px;
  border-bottom: 1px solid #ccc;
  margin: 0 0 15px;
}

#solution_index .inBox3 dd {
  margin: 0 0 5px;
  padding: 0 0 0 18px;
  position: relative;
}

#solution_index .inBox3 dd.first:before {
  content: "①";
  position: absolute;
  left: 0;
}

#solution_index .inBox3 dd.second:before {
  content: "②";
  position: absolute;
  left: 0;
}

#faq .topic-path {
  padding: 8px 0 0 0;
}

#faq #lede .color {
  color: #000;
}

#faq #lede .color a {
  color: #3d62ad;
}

#faq #lede .color a:hover {
  text-decoration: underline;
}

#faq section dt {
  font-size: 16px;
  border-bottom: solid 1px #ccc;
  padding: 14px 0 12px 60px;
  position: relative;
  font-weight: bold;
}

#faq section dt:before {
  content: "Q";
  position: absolute;
  top: 10px;
  left: 15px;
  background: #2ca6d8;
  width: 30px;
  height: 30px;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  box-sizing: border-box;
  text-align: center;
  padding: 3px 0 0 0;
}

#faq section dd {
  border-bottom: solid 1px #ccc;
  background: #f6f8fb;
  padding: 18px 20px 16px 60px;
  margin: 0 0 35px;
  position: relative;
}

#faq section dd:before {
  content: "A";
  position: absolute;
  top: 15px;
  left: 15px;
  background: #0378bb;
  width: 30px;
  height: 30px;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  box-sizing: border-box;
  text-align: center;
  padding: 3px 0 0 0;
}

#pagelinks {
  background: #e5f1f9;
  text-align: center;
  padding: 30px 0;
  margin: 0 0 60px;
}

#pagelinks a {
  display: inline-block;
  background: #fff;
  color: #0075c2;
  padding: 10px 20px 8px 55px;
  margin: 0 0 0 20px;
  position: relative;
  overflow: hidden;
}

#pagelinks a::before {
  position: absolute;
  left: -5px;
  top: -4px;
  background: #0075c2;
  padding: 12px 20px 8px 14px;
  content: url(../../faq/img/arrow.png);
  transform: rotate(-90deg);
  width: -5px;
  margin: 0 0 0 2px;
}

#episode #all {
  min-height: calc(100vh - 143px);
  min-width: 100%;
  overflow-x: hidden;
}

#episode .topic-path {
  padding: 8px 0 0 0;
}

#episode .color {
  color: #000;
}

#episode .inner {
  width: 950px;
  margin: 0 auto;
  position: relative;
}

#episode .inner dl {
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}

#episode .inner dt {
  font-size: 24px;
  line-height: 1.5;
  padding: 0 0 30px;
}

#episode .inner dd {
  line-height: 1.7;
}

#episode .bg {
  background: url(../../solution/episode/img/bg.jpg) repeat 0 0;
}

#episode #episode1 {
  position: relative;
}

#episode #episode1 figure {
  position: absolute;
  right: 0;
  z-index: -1;
}

#episode #episode1 h4 {
  position: absolute;
  left: -50px;
  top: 0;
}

#episode #episode1 dl {
  position: relative;
  width: 550px;
  padding: 30px 30px 30px 0;
  top: 105px;
  margin: 0 0 216px;
}

#episode #episode1 .bg {
  height: 330px;
  position: absolute;
  bottom: -180px;
  left: 50%;
  width: 100%;
  margin: 0 0 0 -166px;
  z-index: -10;
}

#episode #episode2 {
  position: relative;
  top: 114px;
  height: 730px;
}

#episode #episode2 h4 {
  position: absolute;
  right: -50px;
  top: -20px;
}

#episode #episode2 dl {
  position: absolute;
  width: 500px;
  padding: 30px 0 30px 30px;
  top: 85px;
  right: 0;
}

#episode #episode2 .bg {
  height: 330px;
  position: absolute;
  bottom: 160px;
  right: 50%;
  width: 100%;
  z-index: -1;
  margin: 0 -170px 0 0;
}

#episode #episode3 {
  position: relative;
}

#episode #lede2 {
  padding: 285px 0 0 0 !important;
}

#episode #episode3 figure {
  position: absolute;
  top: 187px;
  right: 0;
  z-index: 1;
}

#episode #episode3 h4 {
  position: absolute;
  left: -100px;
  top: 0;
}

#episode #episode3 dl {
  position: relative;
  width: 565px;
  padding: 30px 30px 30px 0;
  top: 90px;
  margin: 0 0 216px;
}

#episode #episode3 .bg {
  height: 300px;
  position: absolute;
  top: 90px;
  left: 50%;
  width: 100%;
  margin: 0 0 0 214px;
  z-index: -1;
}

#episode #episode4 {
  position: relative;
}

#episode #episode4 figure {
  position: relative;
  top: 0;
  right: 0;
  z-index: 0;
}

#episode #episode4 h4 {
  position: absolute;
  right: -30px;
  top: 310px;
  z-index: 5;
}

#episode #episode4 dl {
  position: absolute;
  width: 750px;
  padding: 30px;
  top: 330px;
  right: 0;
}

#episode #episode4 .bg {
  height: 550px;
  position: absolute;
  top: 190px;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: -1;
}



#data table {
  width: 100%;
  margin: 0 0 140px;
}

#data table th {
  background: #ededed;
  padding: 15px 25px;
  text-align: left;
}

#data table tr th:first-child {
  border-right: #fff solid 1px;
}

#data table tr td:last-child,
#data table tr th:last-child {
  position: relative;
}

#data table tr th:last-child:after {
  content: "";
  background: #ededed;
  height: 50%;
  width: 10px;
  position: absolute;
  left: -5px;
  top: 0;
}

#data table tr td:last-child:after {
  content: "";
  background: #fff;
  height: 50%;
  width: 10px;
  position: absolute;
  left: -5px;
  top: 0;
}

#data table tr td:first-child {
  border-right: #ededed solid 1px;
}

#data table td {
  border-bottom: 1px solid #ededed;
  padding: 15px 15px;
  text-align: left;
}

#data table a {
  display: inline-block;
  background: url(../../product/img/icon_pdf.jpg) no-repeat right center;
  padding: 0 30px 0 0;
  text-decoration: underline;
  line-height: 1.5;
}

#data table a:hover {
  text-decoration: none;
}

/* #case */
#case .topic-path {
  padding: 8px 0 0 0;
}

#case .br_pc {
  display: block;
}
#case .br_sp {
  display: none;
}
#case .case_filter {
  width: 100%;
  margin: 0 auto 78px;
  padding: 35px 0 30px;
  background-color: #e5f1f9;
}
#case .case_filter .case_filter_inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
#case .case_filter .case_filter_txt {
  margin-bottom: 18px;
  font-size: 16px;
  text-align: center;
}
#case .case_filter .case_filter_box {
  background-color: #fff;
}
#case .case_filter .case_filter_box_ttl {
  padding: 12px;
  background-color: #3d62ad;
  font-size: 17px;
  text-align: center;
  color: #fff;
  line-height: 1;
}
#case .case_filter .case_filter_list {
  width: 630px;
  margin: 0 auto;
  padding: 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between
}
#case .case_filter .case_filter_item {
  position: relative;
  width: 110px;
}
#case .case_filter .case_filter_item input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
#case .case_filter .case_filter_item label {
  display: block;
  width: 100%;
  padding: 12px 5px;
  border: 1px solid #cfd3dc;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  transition: all linear 0.2s;
}
#case .case_filter .case_filter_item input:checked + label,
#case .case_filter .case_filter_item label:hover {
  border: 1px solid #06b4ea;
  background-color: #06b4ea;
  color: #fff;
}
#case .case_filter .case_filter_reset {
  padding-top: 20px;
  text-align: center;
}
#case .case_filter .case_filter_reset button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  color: #666666;
  background-color: transparent;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 50;
  width: 500px;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: all linear 0.3s;
}
#case .case_filter .case_filter_reset button::before {
  display: block;
  width: 10px;
  height: 10px;
  background-image: url(../../case/img/ico_reset.png);
  background-size: cover;
  content: '';
}
#case .case_filter .case_filter_reset button:hover {
  opacity: 0.7;
}

#case #case_content_wp {
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 15px 10px;
}

#case #case_content_wp .case_content {
  margin-bottom: 90px;
}
#case #case_content_wp .case_content_none {
  display: none;
  text-align: center;
  margin-bottom: 90px;
  font-size: 20px;
}

#case #case_content_wp .case_content_heading01 {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 18px 22px;
  background-color: #0075c2;
}

#case #case_content_wp .case_content_heading01 ._main {
  position: relative;
  font-size: 22px;
  color: #fff;
}
@media screen and (max-width:1024px) {
  #case #case_content_wp .case_content_heading01._small ._main {
    font-size: 18px;
  }
}

#case #case_content_wp .case_content_heading01 ._main::before {
  position: absolute;
  top: 0;
  right: -25px;
  width: 1px;
  height: 100%;
  background-color: #fff;
  content: '';
}

#case #case_content_wp .case_content_heading01 ._sub {
  font-size: 13px;
  color: #cbe0ee;
}

#case #case_content_wp .case_content_inner {
  border: #ccc solid 1px;
  box-sizing: border-box;
  padding: 30px 0 0;
}

#case #case_content_wp .case_content_heading02 {
  margin-bottom: 30px;
  padding: 0 40px;
  text-align: center;
  font-size: 25px;
}

#case #case_content_wp .case_content_heading02 strong {
  color: #0075c2;
}

#case #case_content_wp .case_content_box {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding: 0 40px 30px;
}

#case #case_content_wp .case_content_box .case_content_txtbox {
  width: 55%;
}
#case #case_content_wp .case_content_box .case_content_txtbox._full {
  width: 100%;
}

#case #case_content_wp .case_content_box .case_content_txtbox ul li:not(:first-of-type) {
  margin: 15px 0 0 0;
  padding: 0 0;
}

#case #case_content_wp .case_content_box .case_content_txtbox dt {
  letter-spacing: 0.1em;
  background: #28a4d6;
  padding: 2px;
  width: 80px;
  margin: 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}

#case #case_content_wp .case_content_box .case_content_txtbox dd {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
}

#case #case_content_wp .case_content_box .case_content_imgbox {
  width: 41%;
}

#case #case_content_wp .case_content_box .case_content_imgbox figure {
  width: 100%;
}

#case #case_content_wp .case_content_box .case_content_imgbox figure img {
  width: 100%;
  height: auto;
}

#case #case_content_wp button.read_more_btn {
  display: block;
  margin: -30px auto 0;
  translate: 0 50%;
  padding: 10px 30px 10px 30px;
  background-color: #2e008b;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.3em;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 50;
  width: 500px;
  border: 2px solid #2e008b;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: all linear 0.3s;
}

#case #case_content_wp button.read_more_btn:hover {
  background-color: #4700c2;
}

#case #case_content_wp button.read_more_btn:before {
  width: 14px;
  height: 12px;
  content: '';
  background-image: url(../../case/img/arrow_more.png);
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: 80px -50%;
  transition: all linear 0.3s;
}

#case #case_content_wp button.read_more_btn.active {
  border: 2px solid #e8ecf4;
  background-color: #fff;
  color: #2e008b;
}

#case #case_content_wp button.read_more_btn.active:hover {
  background-color: #eee;
}

#case #case_content_wp button.read_more_btn.active:before {
  width: 14px;
  height: 12px;
  background-image: url(../../case/img/arrow_close.png);
  top: 50%;
  left: 50%;
  translate: 100px -50%;
}

#case #case_content_wp .hide_contents {
  display: none;
  padding: 0 40px 30px;
  background-color: #e5f1f9;
  text-align: center;
}

#case #case_content_wp .hide_contents img {
  margin: 50px 0 0;
}
/* // #case */

@media screen and (max-width:1024px) {
  #module .data_detail {
    display: none;
    width: 620px;
    background: #fff;
    z-index: 1000;
    padding: 20px 30px;
    position: fixed;
    top: 100px;
    left: 50%;
    margin: 0 0 0 -310px;
  }

}

@media screen and (max-width:950px) {
  #cmn_part .button {
    max-width: 455px;
    margin: 0 auto;
  }

  #cmn_part .button li {
    width: 455px;
    float: none;
    padding: 1px;
    margin: 0 0 30px 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

}

@media screen and (max-width:768px) {
  .graph_wrap li dl {
    overflow: hidden;
  }

  #solution_about .demonstration div.strong {
    width: 100%;
    background: #2293bc;
    padding: 10px 0;
    text-align: center;
    font-size: 1.5em;
    color: #fff;
    clear: both;
    margin: 10px 0 0 0;
    letter-spacing: 0.1em;
  }

  #solution_about .demonstration .right-demon .demon-tbl03 tr td.justy {
    padding: 0 5px;
  }

  #solution_about .demonstration div.strong2 {
    width: 100%;

    float: none;
  }

  #solution_about .demonstration .border {
    width: 95%;
    margin: 0 auto 50px;
  }

  #solution_about .demonstration .upperBox .left-demon {
    float: none;
    width: 100%;
  }

  #solution_about .demonstration .upperBox .right-demon .demon-tbl03 {
    margin: 40px 0 0 0;
    width: 100%;
    float: none;
  }

  #solution_about .demonstration .upperBox .right-demon {
    float: none;
    width: 100%;
    margin: 30px 0 0;
  }

  #solution_about .demonstration .downerBox .left-demon {
    float: none;
    width: 100%;
    margin: 0 0 40px;
  }

  #solution_about .demonstration .downerBox .right-demon {
    float: none;
    width: 100%;
  }


  #content_wp2 {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding-top: 8px;
    font-size: 13px;
    line-height: 180%;
  }

  #solution_about #solution_main .squre li dt::before {
    top: -3px !important;
  }

  #faq #content_wp {
    padding-top: 0 !important;
  }

  #faq #content_wp2 {
    padding-top: 0 !important;
  }

  #module .wrap_lyt01 figure {
    width: 45%;
    float: left;
    position: relative;
  }

  h4.cmn_heading01 {
    background: #B2D5ED;
    overflow: hidden;
    padding: 10px 0;
    margin: 30px 0 20px;
  }

  #faq h4.cmn_heading01 {
    margin: 0 0 20px;
  }

  #module .wrap_lyt01 div {
    width: 45%;
    float: left;
    margin: 0 0 0 10%;
  }

  .col5 li {
    min-height: 240px;
  }

  .col7>li {
    width: 48%;
    float: left;
    margin: 0 0 40px 3.3%;
    position: relative;
    min-height: 275px;
  }

  .col7>li:nth-child(odd) {
    margin: 0 0 40px 0;
  }

  .col4 li:nth-child(3) {
    margin: 0 0 10px;
  }

  #solution_about .inner {
    width: 95%;
    margin: 0 auto;
  }

  .demonstration img {
    width: 100%;
  }

  #solution_about #flow li:nth-child(odd) {
    margin: -70px 0 100px 2%;
  }

  #solution_about #flow li {
    width: 44%;
  }

  #solution_about #solution_main .squre li {
    width: 32%;
    margin: 0 0 0 2%;
    padding: 15px;
  }

  #solution_about #solution_main .circle dt {
    margin: 90px 0 15px 0;
  }

  #solution_about #solution_main .circle li:last-child {
    width: 280px;
    height: 280px;
    float: none;
    border-radius: 50%;
    box-shadow: 0 0 13px rgba(6, 180, 234, .5);
    margin: 0 auto;
    position: relative;
    background: #fff;
    clear: both;
  }

  .graph_wrap dl.cleanly_returned_water {
    padding: 0 0 30px;
  }

  #solution_about #solution_main .circle li:nth-child(2) {
    margin: 0 20px 0 26px;
    float: right;
  }

  #toppage .graph_wrap p.date {
    margin: 0 0 20px;
  }

  .graph_wrap {
    background: url(../../common/img/top/bg_graph.jpg) no-repeat center 30px;
    background-size: cover;
  }

  #toppage section.graph_wrap .hgroup h2 {
    font-size: 24px;
    margin: 25px auto 0;
    text-align: center;
    letter-spacing: 0.3em;
  }

  #toppage #csr .image_bg dl dd {
    line-height: 1.5;
    font-size: 13px;
    padding: 0 6px;
  }

  .graph_wrap li {
    list-style: none;
    color: #666;
    width: 95%;
    float: none;
    margin: 0 auto 0;
    text-align: center;
    padding: 10px 0;
    transition: all .5s;
    cursor: pointer;
    border: none;
  }

  .graph_wrap li:first-child {
    margin: 0 auto 0;
  }

  .graph_wrap li dl {
    display: flex;
    align-items: center;
  }

  .graph_wrap li dt {
    width: 50%;
    text-align: left;
    margin: 0 0 0 0;
  }

  .graph_wrap li dd {
    width: 50%;
    font-size: 20px;
    text-align: right;
  }

  .graph_wrap em {
    font-style: normal;
    font-size: 35px;
  }

  .graph_wrap em#countup2,
  .graph_wrap em#countup1 {
    font-size: 26px;
  }

  #toppage section .hgroup {
    margin: 0 0 50px;
  }

  #toppage .scroll {
    display: none;
  }

  #side_fix {
    display: none;
  }

  #toppage #footer_part {
    height: 210px;
  }

  .only_noslider {
    display: block;
    width: 100%;
    padding: 37px 0 0;
  }

  .only_noslider img {
    width: 100%;
  }

  #naviBlock {
    top: 39px !important;
    border-top: solid 1px #ccc;
    display: none !important;
  }

  .globalNavi .nav_solution>a,
  .globalNavi .nav_product>a {
    background: none;
  }

  .globalNavi .nav_solution>a:hover,
  .globalNavi .nav_product>a:hover {
    background: none;
  }

  .globalNavi ul .nav_solution .child a,
  .globalNavi ul .nav_product .child a {
    text-decoration: none;
    font-size: 13px;
    color: #333 !important;
    padding: 15px;
    display: block;
    line-height: 1;
    text-align: left !important;
    background: url(/common_sp/jigyoubu/img/icn_link2.gif) no-repeat 15px center #FFF;
    background-size: auto;
    background-size: 5px auto;
    margin-left: 15px;
    padding: 15px 15px 15px 30px !important;
  }

  .globalNavi ul .nav_solution .child a:hover,
  .globalNavi ul .nav_product .child a:hover {
    text-decoration: none;
    font-size: 13px;
    color: #333 !important;
    padding: 15px;
    display: block;
    line-height: 1;
    text-align: left !important;
    background: url(/common_sp/jigyoubu/img/icn_link2.gif) no-repeat 15px center #FFF;
    background-size: auto;
    background-size: 5px auto;
    margin-left: 15px;
    padding: 15px 15px 15px 30px !important;
  }

  .image_bg .bg_images {
    display: none;
  }

  #module .data_detail {
    width: 90%;
    background: #fff;
    z-index: 1000;
    padding: 10px 15px;
    position: fixed;
    top: 80px;
    left: 5%;
    margin: 0;
  }

  #module .data_detail dd {
    line-height: 1.5;
    font-size: 13px;
  }

  #module .data_detail figure {
    width: 100% !important;
  }

  #module .data_detail dt span {
    font-size: 14px;
  }

  #module .data_detail dt em,
  #module .data_detail dt {
    font-size: 16px;
  }

  .col7>li em {
    display: inline-block;
    background: url(../../product/img/module_ic01.png) no-repeat 33% center #2e008b;
    color: #fff;
    width: 80%;
    margin: 10px auto 0;
    padding: 7px 0 7px 15px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    display: block;
  }

  .footer_inner {
    padding: 0 0 70px;
  }

  .main_slider {
    display: none;
  }

  .swiper-container {
    display: block;
  }

  #toppage #all {
    max-width: 100%;
    overflow-x: hidden;
  }

  #toppage section#information {
    background: none;
    padding: 30px 0 70px;
    width: 100%;
    margin: 0 auto;
  }

  #toppage section .inBox {
    width: 90%;
    margin: 0 auto;
  }

  a.read_more {
    margin: 30px auto 0;
    width: 90%;
  }

  #toppage #information li {
    width: 100%;
    margin: 0 0 15px !important;
    float: none;
    padding: 15px 0 0;
    border-top: solid 1px #ccc;
  }

  #toppage section#solution {
    width: 100%;
    margin: 0 auto;
    background: url(../img/top/solution_bg.jpg) repeat-x bottom center;
    padding: 50px 0 350px;
  }

  #toppage section#solution figure img {
    max-width: 100%;
  }

  #toppage #solution .solution02 .list02 {
    display: block;
    align-items: center;
    width: 95%;
    padding: 0 0 15px;
    margin: 15px auto 0;
  }

  #toppage #solution .solution02 .list02 li {
    background: #fff;
    color: #06b4ea;
    font-size: 18px;
    width: 94%;
    text-align: center;
    padding: 20px 0;
    margin: 0 auto 20px auto;
  }

  #toppage #solution .solution02 .list02 li:nth-child(3) {
    margin: 0 auto 20px auto;
    ;
  }

  #toppage #product_info .product_info01 .bg-box {
    width: 97%;
    background: url(../img/top/bg_product_info01.jpg) no-repeat center center / cover;
    height: 260px;
  }

  #toppage #product_info .product_info02 .bg-box {
    width: 97%;
    background: url(../img/top/bg_product_info02.jpg) no-repeat center center / cover;
    height: 260px;
    float: right;
  }

  #toppage #solution .solution01 dt {
    font-size: 21px;
  }

  #toppage #product_info .product_info01 li {
    float: none;
    width: 90%;
    margin: 0 0 15px 5%;
    position: relative;
  }

  #toppage #product_info .product_info01 .inner {
    border-top: solid 1px #3d62ad;
    margin: -20px auto 0;
    float: none;
    width: 90%;
  }

  #toppage #solution figure {
    margin: 0 auto;
    width: 85%;
  }

  #toppage #solution .solution01 dd br {
    display: inline;
  }

  #toppage #solution .solution01 dd {
    line-height: 1.5;
  }

  #toppage #solution .solution02 dl dd {
    font-size: 4vw;
  }

  #toppage #solution .solution02 dl dt {
    font-size: 6.5vw;
  }

  #toppage section .hgroup h2 {
    font-size: 24px;
    margin: 25px auto 20px;
    width: 95%;
    letter-spacing: 0.1em;
  }

  #toppage #solution p {
    margin: 30px auto;
    width: 90%;
    text-align: left;
  }

  #toppage #solution p br {
    display: none;
  }

  #toppage #product_info .product_info02 p a {
    font-size: 15px;
  }

  #toppage #product_info .product_info01 li a {
    font-size: 15px;
  }

  #toppage #product_info .product_info02 {
    margin: 50px 0 0 0;
  }

  #toppage #product_info .product_info02 a {
    width: 90%;
    margin: 0 0 0 5%;
    font-size: 20px;
  }

  #toppage #product_info .product_info01 .inner ul {
    overflow: hidden;
  }

  #toppage #product_info .product_info02 .inner {
    border-top: solid 1px #06b4ea;
    margin: -20px 0 0 5%;
    float: left;
    width: 90%;
  }

  #toppage #product_info .product_info01 .inner {
    border-top: solid 1px #3d62ad;
    margin: -20px auto 0;
    float: none;
    width: 90%;
  }

  #toppage #solution .solution02 {
    width: 95%;
    background: rgba(61, 98, 173, .1);
    margin: 100px auto 30px;
    position: relative;
    padding: 50px 0 0 0;
    height: auto;
    z-index: 5;
  }

  #toppage #solution .solution02::before {
    display: none;
  }

  #toppage #solution .solution02 dl {
    width: 95%;
    text-align: center;
    margin: -100px auto 30px;
    padding: 15px 0;
    border-bottom: solid 4px #0075c2;
    background: #fff;
    position: relative;
    top: 0;
    left: 0;
  }

  #toppage #csr {
    position: relative;
    z-index: 20;
    margin: -300px 0 0 0;
    background: none;
    height: auto;
    width: 100%;
  }

  #toppage #csr .image_bg dl {
    width: 90%;
    margin: 30px auto;
  }

  #toppage section#csr .inBox {
    width: 100%;
    margin: 0 auto;
  }

  #toppage #csr h4 {
    font-size: 2.3vh;
    width: 90%;
    margin: 0 auto 20px;
  }

  #toppage #csr .image_bg dl dd img {
    margin: 40px auto;
    max-width: 100%;
  }

  #toppage #csr .image_bg p {
    width: 90%;
    line-height: 1.5;
    margin: 0 auto;
    position: static;
  }

  #toppage #result h4 {
    font-size: 18px;
    color: #fff;
    text-align: center;
    margin: 0 0 30px;
    letter-spacing: 0.2em;
    line-height: 1.5;
    text-align: left;
  }

  #toppage #result p {
    font-size: 14px;
    color: #fff;
    text-align: left;
    line-height: 1.8;
  }

  #toppage #solution .solution01 dd {
    background: none;
  }

  #toppage #cmn_part {
    padding: 0;
  }

  #toppage #solution .solution01 dd p {
    font-size: 10vw;
    margin: 1px 0 0 0;
  }

  #toppage #solution .solution01 dd p span {
    font-size: 8vw
  }

  #toppage #solution .solution01 dd {
    height: auto;
  }

  #toppage #product_info .product_info02 h4 {
    font-size: 18px;
  }

  #toppage #product_info .product_info01 h4 {
    font-size: 18px;
  }

  #toppage #solution .solution01 dd p.leftIn {
    position: static;
    width: 100%;
    margin: 0 auto 2px;
    background: linear-gradient(90deg, #AAD5ED, #02ACDE);
    text-align: center;
  }

  #toppage #solution .solution01 dd p.rightIn {
    position: static;
    width: 100%;
    right: 50%;
    margin: 0 0;
    background: linear-gradient(90deg, #35D6F4, #ABE7F8);
    text-align: center;
  }

  #toppage #result p br {
    display: none;
  }

  #toppage #csr .sp-image {
    display: block;
    width: 100%;
    margin: 20px 0 0 0;
    position: static !important;
  }

  #toppage #csr .sp-image img {
    width: 100%;
  }

  #toppage #csr .image_bg {
    height: auto;
  }

  #toppage #result {
    background: url(../img/top/sp_bg01.jpg) no-repeat center center / auto 100%;
    padding: 150px 0 350px;
    margin: -60px 0 0 0;
    position: relative;
  }

  #toppage #solution .solution02 .list01 li {
    background: #06b4ea;
    color: #fff;
    font-size: 24px;
    width: 90%;
    text-align: center;
    padding: 25px 0;
    -webkit-box-shadow: 0 0 5px 0 #fff;
    -moz-box-shadow: 0 0 5px 0 #fff;
    box-shadow: 0 0 5px 0 #fff;
    margin: 0 auto 20px;
  }

  #toppage #solution .solution02 .list01 li:nth-child(3) {
    background: url(../img/top/bg_solution03.jpg) no-repeat left bottom #06b4ea;
    margin: 0 auto 20px;
  }

  .globalNavi>ul>li .child li {
    border-top: none;
  }

  #toppage #solution .solution02 .list01 {
    display: block;
    align-items: center;
    width: 100%;
    margin: 0 auto 15px;
  }

  .globalNavi>ul>li.nav_solution .child li:first-child,
  .globalNavi>ul>li.nav_product .child li:first-child {
    border-top: solid 1px #ccc;
  }

  .globalNavi>ul>li .child li:last-child {
    border: none;
  }

  .globalNavi>ul>li:first-child {
    border-left: none;
  }

  .globalNavi>ul>li>a:hover {
    background: url(/common_sp/jigyoubu/img/icn_link2.gif) no-repeat left center #FFF;
  }

  .globalNavi>ul>li .child {
    position: static;
    z-index: 55;
    background: rgba(18, 40, 137, 1);
    width: 100%;
    top: 20px;
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
  }

  #naviSP>div>ul>li>a {
    font-weight: bold;
  }

  #naviSP .child {
    margin: 0 0 0 20px;
  }

  #sp_foot_fix {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }

  #sp_foot_fix li a {
    display: block;
    width: 33.3333%;
    float: left;
    text-align: center;
    padding: 5px 0;
    position: relative;
  }

  #sp_foot_fix li a:after {
    content: url(../img/black_delta.png);
    position: absolute;
    right: 0;
    bottom: -6px;
    z-index: 10000;
  }

  #sp_foot_fix li a img {
    height: 100%;
  }

  #sp_foot_fix li:nth-child(1) a {
    background: #0075c2;
  }

  #sp_foot_fix li:nth-child(2) a {
    background: #06b4ea;
  }

  #sp_foot_fix li:nth-child(3) a {
    background: #00a9ba;
  }

  .col4 li {
    width: 48%;
    float: left;
    margin: 0 0 10px 2%;
    position: relative;
  }

  #main_visual {
    min-height: 280px;
  }

  .cmn_back li:nth-child(odd) dl {
    padding: 40px 15px 30px 30px;
  }

  #over_wrap {
    background: none !important;
  }

  #oilseparator .lyt01 dt {
    float: none;
    text-align: center;
    width: 100%;
  }

  #oilseparator .lyt01 dd {
    float: none;
    padding: 0;
    width: 100%;
  }

  #oilseparator .lyt01 {
    float: left;
    width: 48%;
    padding: 30px 0 0;
    margin: 0 2% 0 0;
  }

  .globalNavi>ul>li {
    width: 100%;
    float: none;
    box-sizing: border-box;
    color: #333;
    border-right: none;
    position: relative;
    z-index: 50;
  }

  .globalNavi ul {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    display: block;
    background: #FFF;
  }

  .globalNavi ul a {
    text-decoration: none;
    font-size: 13px;
    color: #333 !important;
    padding: 15px;
    display: block;
    line-height: 1;
    text-align: left !important;
    background: url(/common_sp/jigyoubu/img/icn_link2.gif) no-repeat left center #FFF;
    background-size: auto;
    background-size: 5px auto;
    margin-left: 15px;
    padding: 15px !important;
  }

  .globalNavi li {
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    position: relative;
    text-align: left;
    display: block;
  }

  #csr #over_wrap {
    background: url(../../csr/img/sp_water.png) no-repeat top center / contain !important;
    padding: 0 0 100px;
  }

  #csr #csr_main h2 {
    font-size: 15vw;
    text-align: center;
    color: #00a6d8;
    font-family: 'Roboto bold', sans-serif;
    font-weight: 700;
    padding: 220px 0 45px;
  }

  #csr #csr_main h3 {
    width: 95%;
    margin: 50px auto;
    line-height: 1.5;
    font-size: 5vw;
  }

  #csr #csr_main h3 br {
    display: inline;
  }

  #csr #csr_main p {
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }

  #csr #csr_wave {
    background: url(../../csr/img/sp_wave.png) no-repeat center top /contain;
    position: relative;
    top: 50px;
    z-index: -1;
  }

  #csr #csr_wave .inner dl {
    width: 60%;
    margin: 0 0 20px;
  }

  #csr #csr_wave .inner figure {
    text-align: center;
    width: 38%;
    margin: 50px auto 0;
  }

  #csr #csr_wave .inner figure img {
    width: 100%;
  }

  #csr #csr_wave .inner {
    width: 90%;
    margin: 0 auto;
    padding: 200px 0 0 0;
    overflow: hidden;
  }

  #csr #works ol li {
    width: 95%;
    margin: 0 auto;
  }

  #csr #works ol li:nth-child(2n+1) {
    position: relative;
    padding: 0;
    height: auto;
  }

  #csr #works .text {
    background: #fff;
    width: 100%;
    position: static;
    z-index: 3;
  }

  #faq section dd {
    padding: 18px 10px 16px 60px;
  }

  #csr #works .text dl {
    box-sizing: border-box;
  }

  #csr #works ol li .img {
    position: static;
    margin: 20px 0;
  }

  #csr #works ol li .img img {
    width: 85%;
  }

  #csr #works ol li .icon {
    position: static;
    text-align: right;
    margin: -60px 0 0 0;
  }

  #csr #works ol li:nth-child(2) .text {
    width: 100%;
    position: static;
  }

  #csr #works ol li:nth-child(2) .img {
    position: static;
  }

  #csr #works ol li:nth-child(2) .icon {
    position: static;
  }

  #csr #works .inner {
    width: 95%;
    margin: 0 auto;
    padding: 70px 0 0 0;
  }

  #csr #works #blueBg {
    display: none;
  }

  #csr #works ol li {
    margin: 0 auto 50px;
  }

  #csr #works ol li:nth-child(2n) {
    position: relative;
    padding: 0;
    height: auto;
  }

  #csr #works {
    padding: 0 0 50px;
  }

  #module .box p {
    width: 100%;
    float: none;
    line-height: 1.5;
    margin: 0 0 15px
  }

  #module .box figure {
    float: none;
  }

  #module .box figure img {
    width: 100%;
  }

  #module .box figure figcaption {
    margin: 10px 0 0 0;
    text-align: left;
    line-height: 1.3;
  }

  #module article {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 20px 0;
    margin: 50px 0;
    text-align: center;
  }

  #module article img {
    width: 100%;
  }

  #info main {
    width: 100%;
    float: none;
  }

  #info aside {
    width: 100%;
    float: none;
  }

  #info main .page_nation a {
    padding: 7px 0;
  }

  #info main dd span.press {
    padding: 3px 12px 2px;
  }

  #info aside {
    margin: 0 0 20px;
  }

  #info aside h2 {
    background: #073b92;
    padding: 8px 0 5px;
  }

  #info aside ul li {
    display: inline-block;
  }

  #info.detail main .left img {
    width: 100%;
    float: none;
    margin: 0 0 20px;
  }

  #info.detail main .right img {
    width: 100%;
    float: none;
    margin: 0 0 20px;
  }

  #info.detail main .right {
    text-align: left !important;
  }

  #info.detail main .image1 {
    padding: 0 0 30px;
  }

  #info.detail main .image1 img {
    max-width: 100%;
  }

  #info.detail main .image2 figure {
    width: 100%;
    margin: 0 0 20px;
    float: none;
  }

  #info.detail main .image2 figure img {
    width: 100%;
  }

  #info.detail main .image2 figure:first-child {
    margin: 0 0 20px;
  }

  #info.detail main .image3 figure {
    width: 100%;
    margin: 0 0 20px;
    float: none;
  }

  #info.detail main .image3 figure:first-child {
    margin: 0 0 20px;
  }

  #info.detail aside {
    display: none;
  }

  #info.detail .content_wrap {
    padding: 0 0 30px;
    margin: 0 0 30px;
  }

  #info.detail .back {
    margin: 0 auto 30px;
  }

  #solution_index p {
    line-height: 1.5;
  }

  #solution_index ol li dt::after {
    display: none;
  }

  #solution_index ol li dt::before {
    padding: 2px 0 0 0;
  }

  #solution_index ol dd {
    line-height: 1.5;
    float: left;
    margin: 0 0 0 38px;
    padding: 10px 0;
  }

  #solution_index .inBox1 figure {
    float: none;
    margin: 0 0 20px;
    width: 100%;
  }

  #solution_index .border {
    padding: 15px;
  }

  #solution_index .inBox1 p {
    float: none;
    width: 100%;
  }

  #solution_index figure {
    margin: 0 0 20px;
    width: 50%;
  }

  #solution_index .inBox2 {
    width: 48%;
  }

  #solution_index .inBox2 dl dt {
    font-weight: bold;
    float: none;
    width: 100%;
    margin: 0 0 10px;
  }

  #solution_index .inBox2 dl dd {
    float: none;
    width: 100%;
    margin: 0 0 25px;
    padding: 0 0 0 1em;
    line-height: 1.5;
  }

  #solution_index .inBox2 p {
    margin: 0;
  }

  #solution_index .fig {
    width: 100%;
    float: none;
    margin: 0 0 20px;
    line-height: 0;
  }

  #solution_index .inBox3 dl {
    padding: 20px 0 0;
  }

  #solution_index .inBox3 {
    width: 100%;
    float: none;
    margin: 0 0 0;
  }

  #solution_index .inBox3 dd {
    line-height: 1.5;
  }

  #solution_index ol li dt::before {
    top: 10px;
  }

  #faq #lede .color a {
    display: block;
  }

  #pagelinks a {
    margin: 0 0 20px 20px;
  }

  #pagelinks {
    padding: 30px 0 10px;
    margin: 0 0 30px;
  }

  #faq section dt,
  #faq section dd {
    line-height: 1.5;
  }

  #lede {
    padding: 0 !important;
    margin: 0 auto;
    width: 95%;
    text-align: left;
  }

  #lede br {
    display: none;
  }

  #episode #lede2 {
    width: 95%;
    margin: 0 auto;
    text-align: left;
    padding: 0 !important;

  }

  #episode #lede2 p {
    text-align: left;
    font-size: 17px;
  }

  #episode #episode1,
  #episode #episode2,
  #episode #episode3,
  #episode #episode4 {
    height: auto !important;
    padding: 160px 0 0 0 !important;
    position: static !important;
  }

  #episode #episode1 {
    margin: -60px 0 0 0;
  }

  #episode .inner figure {
    position: static !important;
    width: 95% !important;
    margin: 0 auto !important;
  }

  #episode .inner figure img {
    width: 100%;
  }

  #episode .inner h4 {
    position: absolute !important;
    width: 40% !important;
    left: 5% !important;
    top: -113px !important;
  }

  #episode .inner h4 img {
    width: 100%;
  }

  #episode .inner dl {
    position: static !important;
    width: 95% !important;
    padding: 15px !important;
    margin: 0 auto !important;
  }

  #episode .bg {
    display: none;
  }

  #episode #episode2,
  #episode #episode4 {
    background: url(../../solution/episode/img/bg.jpg) repeat 0 0;
    padding: 60px 0 !important;
    margin: 80px 0 0 0 !important;
  }

  #episode #lede p {
    font-size: 14px;
    width: 95%;
    margin: 0 auto;
  }

  #episode .inner {
    width: 100%;
    margin: 0 auto;
  }

  #episode #lede.adjust {
    margin: 100px 0 0 0;
  }

  #solution_about #solution_main .squre {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
  }

  #solution_index .title01 {
    float: left;
    width: 60%;
  }

  #solution_index .inBox1 {
    overflow: hidden;
    width: 35%;
    float: right;
  }

  #main_visual h3::before {
    top: -79px;
  }

  #main_visual h3::after {
    bottom: -91px;
  }

  .globalNavi>ul>li ul.active {
    top: 40px;
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
  }

  #toppage .nav_top,
  #solution_index .nav_solution,
  #solution_about .nav_solution,
  #processing_unit .nav_product,
  #oilseparator .nav_product,
  #module .nav_product,
  #data .nav_product,
  #case .nav_case,
  #csr .nav_csr,
  #faq .nav_faq {
    background: #fff;
  }

  .globalNavi>ul>li .child li a:hover {
    background: url(/common_sp/jigyoubu/img/icn_link2.gif) no-repeat left center #FFF;
    background-size: 5px auto;
  }

  .globalNavi>ul>li .child {
    background: #FFF;
    display: block;
  }

  .swiper-button-prev {
    background: url(../img/sp_prev.jpg) no-repeat 0 0 !important;
    left: 0 !important;
    width: 20px !important;
    height: 30px !important;
    margin: -15px 0 0 0 !important;
  }

  .swiper-button-next {
    background: url(../img/sp_back.jpg) no-repeat 0 0 !important;
    right: 0 !important;
    width: 20px !important;
    height: 30px !important;
    margin: -15px 0 0 0 !important;
  }

  #solution_index .inBox1 img {
    width: 100%;
    margin: 20px 0 0 0;
  }

  #csr #csr_main figure {
    display: none;
  }

  #water_bg {
    background: url(../../solution/img/waterbg.jpg) no-repeat center 70px;
    padding: 100px 0 0;
  }

  #cmn_part .button li dd {
    font-size: 15px;
  }

  #cmn_part .button li dl:after {
    display: none
  }

  .col5 li:nth-child(3) {
    margin: 0 0 15px 0;
  }

  .globalNavi>ul>li>a {
    font-weight: bold;
  }

  #main_visual:before {
    height: 15px;
    bottom: 0px;
  }

  #main_visual:after {
    height: 15px;
    bottom: -15px;
  }

  #solution_about #solution_main p#bold {
    font-size: 2vh;
    letter-spacing: 0.3em;
    padding: 0;
    line-height: 1;
    text-align: center;
    padding: 30px 0 0 0;
  }

  #solution_about #solution_main h2 {
    text-align: center;
    padding: 30px 0 80px;
  }

  .graph_wrap .inner {
    width: 95%;
    margin: 10px auto;
    padding: 0 0 30px;
  }

  .graph_wrap ul {
    padding: 0 0 10px;
  }

  /* #case */
  #case .br_pc {
    display: none;
  }
  #case .br_sp {
    display: block;
  }

  #case .case_filter {
    margin: 0 auto 40px;
    padding: 20px 0 25px;
  }
  #case .case_filter .case_filter_inner {
    padding: 0 15px;
  }
  #case .case_filter .case_filter_txt {
    margin-bottom: 15px;
    font-size: 16px;
    text-align: center;
  }
  #case .case_filter .case_filter_box {
    background-color: #fff;
  }
  #case .case_filter .case_filter_box_ttl {
    font-size: 16px;
  }
  #case .case_filter .case_filter_list {
    width: 100%;
    padding: 15px;
    justify-content: start;
    gap: 15px;
  }
  #case .case_filter .case_filter_item {
    width: calc(100% / 3 - 10px);
  }
  #case .case_filter .case_filter_item label {
    padding: 10px 2px;
    border: 1px solid #cfd3dc;
    font-size: 13px;
  }
  #case .case_filter .case_filter_reset {
    padding-top: 20px;
    text-align: center;
  }
  #case .case_filter .case_filter_reset button {
    width: auto;
  }
  #case .case_filter .case_filter_reset button::before {
    display: block;
    width: 10px;
    height: 10px;
    background-image: url(../../case/img/ico_reset.png);
    background-size: cover;
    content: '';
  }
  #case .case_filter .case_filter_reset button:hover {
    opacity: 0.7;
  }

  #case #case_content_wp {
    overflow: hidden;
    width: 94%;
    margin: 0 auto;
    padding: 40px 0 30px;
  }

  #case #case_content_wp .case_content {
    margin-bottom: 70px;
  }
  #case #case_content_wp .case_content_none {
    margin-bottom: 70px;
    font-size: 18px;
  }
  #case #case_content_wp .case_content_heading01 {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    padding: 15px;
  }

  #case #case_content_wp .case_content_heading01 ._main {
    position: relative;
    font-size: 20px;
  }

  #case #case_content_wp .case_content_heading01 ._main::before {
    content: none;
  }

  #case #case_content_wp .case_content_heading01 ._sub {
    font-size: 13px;
  }

  #case #case_content_wp .case_content_inner {
    padding: 25px 0 0;
  }

  #case #case_content_wp .case_content_heading02 {
    margin-bottom: 25px;
    text-align: center;
    font-size: 20px;
    padding: 0 15px;
  }

  #case #case_content_wp .case_content_heading02 strong {
    color: #0075c2;
  }

  #case #case_content_wp .case_content_box {
    display: block;
    padding: 0 15px 20px;
  }

  #case #case_content_wp .case_content_box .case_content_txtbox {
    width: 100%;
  }

  #case #case_content_wp .case_content_box .case_content_txtbox ul li:not(:first-of-type) {
    margin: 15px 0 0 0;
    padding: 0 0;
  }

  #case #case_content_wp .case_content_box .case_content_txtbox dt {
    padding: 2px;
    width: 80px;
    font-size: 14px;
  }

  #case #case_content_wp .case_content_box .case_content_txtbox dd {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
  }

  #case #case_content_wp .case_content_box .case_content_imgbox {
    width: 100%;
    margin-top: 30px;
  }


  #case #case_content_wp button.read_more_btn {
    margin: -20px auto 0;
    padding: 10px 30px 10px 30px;
    font-size: 15px;
    width: 90%;
    border: 1px solid #2e008b;
  }

  #case #case_content_wp button.read_more_btn.active {
    border: 1px solid #e8ecf4;
  }
  #case #case_content_wp .hide_contents {
    padding: 0 15px 20px;
  }

  #case #case_content_wp .hide_contents img {
    margin: 40px 0 0;
    width: 100%;
    height: auto;
  }
  /* // #case */
}

@media screen and (max-width:640px) {
  h4.cmn_heading01 {
    background: transparent;
    overflow: hidden;
    padding: 10px 0;
  }

  #episode .inner h4 {
    position: absolute !important;
    width: 50% !important;
    left: 5% !important;
    top: -80px !important;
  }

  #solution_about .demonstration .right-demon .demon-tbl03 tr td.justysp {
    -moz-text-align-last: center;
    text-align-last: center;
    padding: 0 5px;
  }

  #solution_about .demonstration .right-demon .demon-tbl03 tr td.after {
    font-size: 1em;
  }

  #solution_about .demonstration .demon-flow li p {
    letter-spacing: -0.2em;
  }

  #solution_about .demonstration .right-demon .demon-tbl03 tr td.after-total {
    font-size: 1em;
  }

  #csr #works ol li .icon img {
    max-width: 240px;
  }

  #processing_unit .col4-2 {
    overflow: hidden;
    margin: -30px 0 0 0;
  }

  #solution_index .title01 {
    float: none;
    width: 100%;
  }

  #solution_index .title01 dt {
    text-align: center;
  }

  #solution_index .title01 dd {
    text-align: center;
  }

  #solution_index .inBox1 {
    overflow: hidden;
    width: 100%;
    float: none;
  }

  #pagelinks {
    overflow: hidden;
  }

  #pagelinks a {
    display: block;
    width: 44%;
    background: #fff;
    color: #0075c2;
    padding: 10px 10px 8px 45px;
    position: relative;
    overflow: hidden;
    float: left;
    margin: 0 0 20px 4%;
  }

  #module .wrap_lyt01 div p {
    text-align: center;
  }

  #csr #csr_main h2 {
    padding: 90px 0 35px;
  }

  #csr #csr_wave .inner {
    padding: 100px 0 0 0;
  }

  #csr #csr_wave {
    background: url(../../csr/img/sp_wave.png) no-repeat center top /contain;
    position: relative;
    top: 20px;
    z-index: -1;
  }

  #csr #csr_main h3 {
    padding: 0;
  }

  #toppage #csr>h3 {
    padding: 15px 0;
    line-height: 1;
  }

  #solution_index .border {
    margin: 30px 0 20px;
  }

  #csr #csr_wave .inner dl {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }

  #csr #csr_wave .inner figure {
    float: none;
    text-align: center;
    width: 90%;
    margin: 0 auto;
  }

  #solution_index figure {
    float: none;
    margin: 0 0 20px;
    width: 100%;
  }

  #solution_index .inBox2 {
    float: none;
    width: 100%;
  }

  #module .wrap_lyt01 {
    overflow: hidden;
    padding: 0 0 40px;
    margin: 0 0 40px;
    border-bottom: solid #999 1px;
  }

  #module .wrap_lyt01 figure {
    width: 100%;
    float: none;
  }

  #module .wrap_lyt01 div {
    width: 100%;
    float: none;
    margin: 0;
  }

  #module .wrap_lyt01 figure img {
    width: 100%;
  }

  #module .wrap_lyt01 div dd {
    line-height: 1.5;
  }

  #module .wrap_lyt01 figcaption::after {
    bottom: -20px;
  }

  #solution_about #solution_main .circle li:nth-child(2) {
    float: none;
  }

  #solution_about #solution_main p {
    text-align: left;
  }

  h4.cmn_heading01 span {
    background: #0075C2;
    color: #fff;
    font-weight: normal;
    padding: 6px 60px 4px 20px;
    font-size: 19px;
    position: relative;
    display: block;
    overflow: hidden;
  }

  h4.cmn_heading01 span::after {
    background: #B2D5ED;
    content: "";
    width: 100px;
    height: 150px;
    -webkit-transform: rotate(53.5deg);
    -moz-transform: rotate(53.5deg);
    -ms-transform: rotate(53.5deg);
    -o-transform: rotate(53.5deg);
    transform: rotate(53.5deg);
    position: absolute;
    top: 0px;
    right: -33px;
  }

  #processing_unit .col3-1 li {
    width: 100%;
    float: none;
    padding: 20px 0;
    border-left: none;
    border-bottom: dotted 1px #999;
  }

  #lede p {
    font-size: 16px;
    text-align: center;
    color: #3d62ad;
    line-height: 1.9;
    padding: 30px 0;
  }

  #processing_unit .img_wrap02 dt {
    margin: 0 15px 20px;
  }

  .col4 li:first-child {
    margin: 0 0 10px;
  }

  #main_visual h3 {
    margin: 130px auto 0;
    width: 95%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 0 0 0 50px
  }

  #main_visual h3 em {
    background: url(../img/delta_sky.png) no-repeat right top;
    padding: 5px 50px 5px 0;
    display: block;
    line-height: 1.2;
  }

  #processing_unit #content_wp section {
    padding: 0 0 50px;
  }

  #processing_unit #content_wp2 section {
    padding: 0 0 50px;
  }

  #processing_unit p {
    line-height: 1.5;
  }

  #oilseparator p,
  #oilseparator dd,
  #oilseparator dt {
    line-height: 1.5;
  }

  #oilseparator .lyt03 li {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }

  #oilseparator .lyt03 li img {
    max-width: 100%;
  }

  #processing_unit .col4-2 li dd,
  #processing_unit .col3-1 li dd {
    line-height: 1.5;
  }

  #processing_unit h5 {
    margin: 20px 0 10px 0;
    line-height: 1.5;
  }

  #processing_unit .col4-2 li {
    width: 100%;
    float: none;
    padding: 20px 0;
    border-left: none;
    border-bottom: dotted 1px #999;
  }

  #cmn_part .bnr li {
    float: none;
    width: 100%;
  }

  #cmn_part .button li {
    width: 100%;
  }

  #main_visual h3 {
    font-size: 21px;
  }

  #main_visual h3 br {
    display: inline;
  }

  #oilseparator .lyt01 {
    float: none;
    width: 100%;
    padding: 30px 0 0;
    margin: 0 0 0 0;
  }

  #oilseparator .lyt02 figure {
    width: 100%;
    float: none;
    text-align: center;
    margin: 25px 0 0 0;
  }

  #oilseparator .lyt02 .table_wrap {
    width: 100%;
    float: none;
    white-space: normal;
  }

  .col5 li:first-child {
    margin: 0 0 15px;
  }

  .col5 li {
    width: 100%;
    float: left;
    margin: 0 0 15px;
    position: relative;
    min-height: 0;
  }

  .col5 li:nth-child(4) {
    margin: 0 0 15px;
  }

  .col7 li:first-child {
    margin: 0 0 15px;
  }

  .col7 li {
    width: 100%;
    float: left;
    margin: 0 0 15px;
    position: relative;
    min-height: 0;
    line-height: 1.5;
  }

  .col7 li:nth-child(5) {
    margin: 0 0 15px;
  }

  .col7 li:first-child {
    margin: 0 0 15px;
  }

  #solution_about #solution_main h2 img {
    width: 100%;
  }

  #solution_about #solution_main h3 {
    color: #fff;
    font-size: 18px;
    width: 100%;
  }

  #solution_about #solution_main .center_main dt {
    font-size: 30px;
  }

  #solution_about #solution_main .center_main dd {
    font-size: 15px;
  }

  #solution_about #solution_main .circle li {
    float: none;
    margin: 0 auto 15px;
  }

  #solution_about #solution_main .circle li:nth-child(2) {
    margin: 0 auto 15px;
  }

  #solution_about #solution_main .squre li {
    width: 100%;
    float: none;
    margin: 0 0 15px;
    box-sizing: border-box;
  }

  #solution_about #solution_main .squre li:first-child {
    margin: 0 0 15px;
  }

  #solution_about .after {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  #solution_about #flow li:nth-child(2n+1) {
    margin: 0 auto 50px;
  }

  #solution_about #flow li:nth-child(2n) {
    margin: 0 auto 50px;
  }

  #solution_about #flow li {
    width: 95%;
    float: none;
    margin: 0 auto 50px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
  }

  #solution_about .inner {
    width: 95%;
    margin: 0 auto;
  }

  #solution_about #flow h2 {
    width: 100%;
  }

  #solution_about #flow li:nth-child(even):after {
    position: absolute;
    content: url(../img/arrow07.png);
    left: 50%;
    bottom: -40px;
    transform: rotate(90deg);
    z-index: 3;
    margin: 0 0 0 -19px;
  }

  #solution_about #flow li:nth-child(odd):after {
    position: absolute;
    content: url(../img/arrow07.png);
    right: 50%;
    bottom: -35px;
    transform: rotate(90deg);
    z-index: 3;
    margin: 0 -10px 0 0;
  }

  #solution_about #flow h2:after {
    position: absolute;
    width: 90%;
    height: 120px;
    top: -60px;
    left: 50%;
    z-index: -1;
    margin: 0 0 0 -46%;
    content: "";
    background: linear-gradient(35deg, transparent 50px, #fff 50px), linear-gradient(325deg, transparent 50px, #fff 50px);
    background-position: bottom left, bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
  }

  #solution_about #solution_main .after dd,
  #solution_about #solution_main .squre li dd {
    line-height: 1.5;
  }

  #solution_about .demonstration {
    width: 95%;
    margin: 0 auto;
  }

  #solution_about #solution_main .circle dt {
    font-size: 26px;
    color: #06b4ea;
    text-align: center;
    margin: 100px 0 9px 0;
  }

  #solution_about #solution_main .circle dd {
    width: 190px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 14px;
  }

  #solution_about #solution_main .circle li {
    padding: 5px;
    box-sizing: border-box;
  }

  @media screen and (max-width:480px) {
    .col4 li {
      width: 100%;
      float: none;
      margin: 0 0 10px 0;
      position: relative;
    }

    #solution_about .demonstration .downerBox .left-demon .demon-tbl02 td.up {
      font-size: 1.1em;

    }

    #solution_about .demonstration .downerBox .left-demon .demon-tbl02 td.down {
      font-size: 1.1em;

    }

    #solution_about .demonstration .demon-flow li p:after {

      right: -14px;

    }

    #solution_about .demonstration .demon-flow li p {
      font-size: 0.9em;
    }

    #solution_about .demonstration .demon-tbl01 td {
      font-size: 0.9em;
    }

    #solution_about .demonstration .demon-tbl01 th {
      font-size: 0.9em;
    }

    #solution_about .demonstration .downerBox .left-demon .demon-tbl02 td:first-child {
      -moz-text-align-last: justify;
      text-align-last: justify;
      text-justify: inter-ideograph;
      padding: 5px;
    }

    .cmn_back li dl {
      padding: 40px 15px 30px;
    }

    .cmn_back {
      overflow: hidden;
      margin: 30px 0 0 0;
    }

    #solution_about .demonstration .border {
      padding: 15px;
    }
  }
}

.glossary_table {
  width: 100%;
  border: 1px solid #cfd3dc;
  border-collapse: collapse;
  margin: 60px 0 80px;
}

.glossary_table td {
  background: #ebf4fa;
  border: 1px solid #cfd3dc;
  font-weight: bold;
  padding: 15px;
  width: 22%;
  vertical-align: top;
  font-size: 16px;
}

.glossary_table td+td {
  background: #fff;
  border: 1px solid #cfd3dc;
  font-weight: normal;
  width: 78%;
  padding: 15px;
  font-size: 14px;
  vertical-align: top;
}

#pagelinks {
  transition: all 0.3s;
}

#pagelinks.js-fix.is-fixed {
  padding: 10px 0;
}

.js-fix.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

@media screen and (max-width:480px) {
  .glossary_table td {
    font-size: 14px;
    padding: 10px;
  }

  .glossary_table td+td {
    font-size: 13px;
    padding: 10px;
  }

  .glossary_table {
    margin: 30px 0 50px;
  }

  .js-fix.is-fixed {
    top: 40px;
  }

  #pagelinks.js-fix.is-fixed a {
    margin: 0 0 0px 4%;
  }

}