@charset "UTF-8";
/* =====================
	共通
======================= */
.sp {
  display: none;
}

.ie {
  display: none;
}

/* IE11 */
@media all and (-ms-high-contrast: none) {
  .ie {
    display: block;
  }
  br.ie {
    display: inline;
  }
}

sup {
  font-size: 10px;
  vertical-align: top;
}

.roboto {
  font-family: 'Roboto', sans-serif;
}

.roboto-c {
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 2px;
}

html {
  position: relative;
  overflow-x: hidden;
  height: 100vh;
}

html.disable-scroll {
  width: 100vw;
  height: 100%;
}

body {
  color: #333333;
  font-family: 'YakuHanJP', '游ゴシック', YuGothic, 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  -webkit-font-feature-settings: 'palt';
          font-feature-settings: 'palt';
  overflow-y: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 17px);
  /* デフォルト値 */
  height: 100%;
}

body.disable-scroll {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100vw;
}

@media all and (-ms-high-contrast: none) {
  body {
    font-family: 'YakuHanJP', 'メイリオ', Meiryo, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  }
}

#loader-bg {
  background: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 2000;
}

#loader {
  -webkit-animation: opac 3s 0.5s ease alternate forwards;
          animation: opac 3s 0.5s ease alternate forwards;
  color: #ea310c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 30px;
  line-height: 46px;
  opacity: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#loader img {
  width: 277px;
}

a {
  color: inherit;
  text-decoration: none;
}

a.trigger {
  cursor: pointer;
  line-height: 1.3;
  position: relative;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

a.trigger:hover {
  opacity: 0.6;
}

a.trigger.question:after {
  background: url("../images/common/ic_question.png") 5px 4px no-repeat #e8310c;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: '';
  display: inline-block;
  position: relative;
  top: 2px;
  left: 1px;
  width: 16px;
  height: 16px;
}

a.trigger.question span {
  background: #ffdedb !important;
  padding: 0 2px;
}

a.trigger.external:before {
  background: url("../images/common/ic_blank2.png") 4px 5px no-repeat #fa763f;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: '';
  display: inline-block;
  position: relative;
  top: 3px;
  left: 1px;
  width: 18px;
  height: 18px;
}

a.trigger.external span {
  background: #ffede5 !important;
  padding: 0 2px;
}

header {
  background: #fff;
  min-width: 1130px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}

header nav {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5px 43px 5px 13px;
  width: 100%;
  height: 40px;
}

header nav.en li {
  font-size: 11px;
}

header nav.en li ~ li {
  margin-left: 5px;
}

header nav .logo {
  padding-top: 7px;
  width: 81px;
  height: 18px;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header nav li {
  background: #fff;
  border: 1px solid #f24643;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  font-weight: bold;
  line-height: 28px;
  padding: 0 14px;
  height: 30px;
}

header nav li.none {
  display: none;
}

header nav li:hover, header nav li.active {
  background: #f24643;
  color: #fff;
}

header nav li.none-border {
  border: none;
  margin-left: 0;
}

header nav li.none-border:hover {
  background: none;
  opacity: 0.8;
}

header nav li ~ li {
  margin-left: 10px;
}

header nav li a {
  cursor: pointer;
}

header nav .language {
  border: none;
  border-radius: 0;
  text-align: center;
  width: 105px;
  padding: 0;
  position: relative;
}

header nav .language:hover {
  background-color: #fff;
  color: #42b4d6;
}

header nav .language:hover .language__label:after {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  top: 11px;
}

header nav .language:hover .language__menu {
  opacity: 1;
  visibility: visible;
}

header nav .language__label {
  cursor: pointer;
  color: #42b4d6;
  padding-left: 13px;
  padding-right: 23px;
  position: relative;
}

header nav .language__label:after {
  content: '';
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-left: 2px solid #42b4d6;
  border-bottom: 2px solid #42b4d6;
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;
  right: 0;
  top: 4px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

header nav .language__menu {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  text-align: left;
  width: 100%;
  padding: 8px 13px;
  position: absolute;
  top: 30px;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

header nav .language__menu__item a {
  font-size: 13px;
  line-height: 23px;
  display: block;
  color: #42b4d6;
}

header nav .language__menu__item a:hover {
  opacity: .8;
}

body[data-pagescroll-index='4'] header nav ul li:nth-of-type(4) {
  display: block;
}

body[data-pagescroll-index='4'] header nav ul li:nth-of-type(3) {
  display: none;
}

body[data-pagescroll-index='5'] header nav ul li:nth-of-type(5) {
  display: block;
}

body[data-pagescroll-index='5'] header nav ul li:nth-of-type(3) {
  display: none;
}

body[data-pagescroll-index='10'] header nav ul li:nth-of-type(7) {
  display: block;
}

body[data-pagescroll-index='10'] header nav ul li:nth-of-type(6), body[data-pagescroll-index='10'] header nav ul li:nth-of-type(8) {
  display: none;
}

body[data-pagescroll-index='11'] header nav ul li:nth-of-type(8) {
  display: block;
}

body[data-pagescroll-index='11'] header nav ul li:nth-of-type(6), body[data-pagescroll-index='11'] header nav ul li:nth-of-type(7) {
  display: none;
}

.footer {
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5px 25px 5px 13px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 3;
}

.footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.footer li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style: none;
}

.footer li .logo {
  padding-top: 7px;
  width: 81px;
  height: 18px;
}

.footer li small {
  color: #999999;
  font-size: 11px;
}

/* popup
------------------------------------------------ */
.fullscreen {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  z-index: 100;
}

.popup-contents {
  background-color: rgba(255, 255, 255, 0.95);
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  min-height: 0;
}

.popup-contents .frame {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  margin: 0 auto;
  text-align: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  max-height: 100%;
  z-index: 0;
}

.popup-contents .frame iframe {
  position: relative;
  top: 0;
  width: calc(100vw - 100px);
  height: calc(100vh - 100px);
  z-index: 0;
}

.popup-contents .wrapper {
  -webkit-transition: scroll 0.5s;
  transition: scroll 0.5s;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.popup-contents .content {
  height: 100%;
  max-width: 520px;
  margin: auto;
  position: relative;
}

.popup-contents .content img {
  max-width: 100%;
}

.popup-contents .content span {
  display: inline-block;
  font-size: 15px;
  margin-top: 6px;
}

.popup-contents .content h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 24px;
  position: relative;
  padding-left: 34px;
  text-align: left;
}

.popup-contents .content h4:before {
  background: #e8310c;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  content: '?';
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 23px;
  height: 23px;
}

.popup-contents .content p,
.popup-contents .content ul {
  font-size: 15px;
  line-height: 25px;
  margin-bottom: 12px;
  text-align: left;
}

.popup-contents .content ul {
  margin-left: 20px;
}

.popup-contents .content p a {
  display: inline-block;
}

.popup-contents .content p a:link {
  color: #333333;
}

.popup-contents .content p a:visited {
  color: #333333;
}

.popup-contents .content p a:hover {
  color: #999999;
}

.popup-contents .content p a:active {
  color: #333333;
}

.popup-contents .content .sup {
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 12px;
  text-align: left;
}

.popup-contents .content .popup-close a {
  text-decoration: underline;
}

.popup-contents .content .t-right {
  text-align: right;
}

.popup-contents .content .t-sub {
  padding-top: 25px;
  padding-left: 33px;
}

.popup-contents .close-btn {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 36px;
  height: 36px;
  background: url("../images/common/close.png") center center no-repeat;
  z-index: 102;
}

.popup-contents .close-btn:hover {
  cursor: pointer;
}

.popup-contents.popup12 .content {
  max-width: 800px;
}

.popup-contents.popup13 .content {
  max-width: 800px;
  width: 800px;
}

.popup-contents.popup13 .content .tanks {
  background-color: #42b4d6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding: 20px 30px 50px 30px;
  color: #fff;
}

.popup-contents.popup13 .content .tanks dl {
  width: 225px;
  text-align: center;
  font-size: 15px;
}

.popup-contents.popup13 .content .tanks dl dt {
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1;
}

.popup-contents.popup13 .content .tanks dl dd {
  margin-bottom: 10px;
}

.popup-contents.popup13 .content .tanks dl .link a:before {
  background: url("../images/common/ic_blank.png") no-repeat 0 0;
  background-size: 100% 100%;
  content: '';
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 7px;
  margin-top: -5px;
  vertical-align: middle;
}

.popup-contents.popup13 .content .tanks .notice {
  font-size: 13px;
  line-height: 1;
  margin: 0;
  position: absolute;
  bottom: 15px;
  right: 30px;
}

.popup-contents.popup15 .content {
  max-width: 1000px;
}

.popup-contents.popup15 .content h4 {
  margin: 0;
}

.popup-contents.popup15 .content h4:before {
  display: none;
}

.popup-contents.popup15 .content figure {
  margin-bottom: 20px;
}

.popup-contents.popup15 .content ul {
  font-size: 15px;
  list-style: none;
  text-align: left;
}

.popup-contents.popup15 .content li {
  line-height: 1.5;
  margin-bottom: 10px;
  text-indent: -30px;
  padding-left: 30px;
}

.popup-contents.popup16 .content {
  max-width: 600px;
  width: 600px;
}

.popup-contents.popup16 .content table {
  width: 100%;
}

.popup-contents.popup16 .content th {
  background-color: #42b4d6;
  border: 1px solid #fff;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  padding: 10px 0;
  vertical-align: middle;
}

.popup-contents.popup16 .content th:nth-child(1) {
  width: 25%;
}

.popup-contents.popup16 .content th:nth-child(2) {
  width: 37.5%;
}

.popup-contents.popup16 .content th:nth-child(3) {
  width: 37.5%;
}

.popup-contents.popup16 .content td {
  border: 1px solid #fff;
  font-size: 15px;
  line-height: 20px;
  padding: 10px 0;
  vertical-align: middle;
}

.popup-contents.popup16 .content .tb1 {
  background-color: #e1f4fa;
}

.popup-contents.popup16 .content .tb2 {
  background-color: #d5ebf2;
}

main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin-top: 40px;
  min-width: 1130px;
}

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

.pagescroll_pages section {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(100% - 40px);
}

#top {
  width: 100%;
  background: url("/decommission/progress/watertreatment/images/top/slider/kv.jpg") no-repeat;
  background-size: cover;
}

#top h1 {
  position: absolute;
  top: calc(50% - 140px);
  z-index: 51;
  width: 672px;
  height: 280px;
  left: calc((50% - 344px) + 17px);
}

#top h1.en {
  left: calc((50% - 447px) + 17px);
}

#top h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
  position: absolute;
  top: calc(45% + 40px);
  width: 30%;
  height: 24px;
  left: calc(50% - 15%);
  text-align: center;
  line-height: 24px;
  color: #ffffff;
}

#top .photo-time {
  position: absolute;
  bottom: 28px;
  right: 45px;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 8px;
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  font-weight: 400;
}

.down-next {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 80px;
  left: calc(50% - 20px);
  z-index: 1;
  display: block;
}

.down-next li {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  list-style: none;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.down-next a {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  border-radius: 50%;
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/top/slider/down-arrow.png") no-repeat 50% #ff322e;
  cursor: pointer;
  opacity: 1;
}

.down-next a:hover {
  opacity: 0.6;
}

body[data-pagescroll-index='8'] .down-next {
  display: none;
}

.up-prev {
  display: block;
  position: absolute;
  top: 40px;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  z-index: 1;
}

.up-prev li {
  list-style: none;
  position: absolute;
  top: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  width: 100%;
  height: 100%;
}

.up-prev a {
  background: url("../images/top/slider/down-arrow.png") no-repeat 50% #ff322e;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  opacity: 1;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  -webkit-transition: 0.6s;
  transition: 0.6s;
  width: 100%;
  height: 100%;
}

.up-prev a:hover {
  opacity: 0.6;
}

body[data-pagescroll-index='1'] .up-prev {
  display: none;
}

#news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: url("../images/top/news/info-bg.jpg") no-repeat right center;
  background-size: cover;
}

#news .left {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 50px 0 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  background: #42b4d6;
}

#news .left.en p {
  line-height: 26px;
}

#news .left .about-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  padding-left: 25px;
  position: relative;
}

#news .left .about-title:before {
  background: #fff;
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 4px;
}

#news .left .about-title.en:before {
  top: 12px;
}

#news .left p {
  font-size: 15px;
  line-height: 36px;
  margin-top: 6px;
}

#news .left .about-border {
  border: 1px solid #eee;
  padding: 20px;
  margin-top: 30px;
}

#news .left .about-explain {
  line-height: 24px;
  font-size: 14px;
}

#news .right {
  background: rgba(255, 255, 255, 0.7);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  padding: 50px 80px 0 50px;
  position: relative;
  width: 50%;
  height: 100%;
}

#news .right .inner {
  position: relative;
  z-index: 2;
}

#news .right .info-title {
  font-size: 16px;
  line-height: 18px;
  padding-left: 25px;
  position: relative;
  margin-bottom: 10px;
}

#news .right .info-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 4px;
  background: #42b4d6;
}

#news .right h2 {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 15px;
}

#news .right .scroll-area {
  background: #fff;
  width: 100%;
  height: 71vh;
}

#news .right .scroll-area.en {
  height: 77vh;
}

#news .right ul {
  width: calc(100% - 90px);
  padding: 10px 60px 25px 30px;
}

#news .right li {
  padding: 11px 0 18px;
  list-style: none;
  border-bottom: 1px solid #e5e5e5;
}

#news .right li:last-of-type {
  border: none;
}

#news .right dt {
  color: #42b4d6;
  font-size: 19px;
  line-height: 20px;
  margin-bottom: 3px;
}

#news .right dd {
  font-size: 16px;
  line-height: 23px;
}

#news .right a {
  background: #ffede5;
  line-height: 2;
  position: relative;
  top: 4px;
  left: 27px;
}

#news .right a:after {
  content: '';
  background: url("../images/common/ic_blank2.png") center no-repeat #fa763f;
  position: absolute;
  left: -27px;
  top: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
}

.simplebar-scrollbar:before {
  background: #ec583a !important;
  border-radius: 10px !important;
}

.simplebar-track {
  background: #e6e6e6 !important;
  width: 20px !important;
}

.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1 !important;
}

#current_status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: url("../images/top/current_status/water-bg.png") right bottom no-repeat;
  background-size: auto;
}

#current_status .left {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 8px 0 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#current_status .left .inner {
  width: 100%;
}

#current_status .left .inner > p {
  font-size: 15px;
  line-height: 30px;
}

#current_status .left .water-title {
  background: #42b4d6;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  padding: 6px 10px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#current_status .left .water-title.en {
  font-size: 15px;
}

#current_status .left ul {
  margin-bottom: 30px;
  display: inline-block;
}

#current_status .left li {
  list-style: none;
  text-align: right;
}

#current_status .left li ~ li {
  border-top: 2px solid #9a9a9a;
  padding-top: 10px;
  margin-top: 10px;
}

#current_status .left li p {
  text-align: right;
  font-size: 120px;
  line-height: 122px;
  color: #808080;
  font-weight: 500;
  letter-spacing: -0.04em;
  position: relative;
  padding-right: 68px;
  display: inline-block;
  white-space: nowrap;
}

#current_status .left li p:after {
  content: '㎥';
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 63px;
  line-height: 82px;
}

#current_status .left li.current-water .subtitle {
  color: #333;
  text-align: left;
}

#current_status .left li.current-water p {
  color: #42b4d6;
}

#current_status .left li.current-water p:after {
  bottom: 10px;
}

#current_status .left .water-supplement {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 0px;
  color: #000;
  text-align: right;
}

#current_status .left .subtitle {
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 15px;
  color: #4c4c4c;
  text-align: left;
}

#current_status .left .subundertitle {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 0px;
  color: #e8310c;
  text-align: right;
}

#current_status .right {
  width: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#current_status .tank {
  width: 435px;
  height: 525px;
  position: relative;
}

#current_status .tank > img {
  position: absolute;
  top: 0;
  left: -75px;
  z-index: 2;
}

#current_status .tank .tout {
  position: relative;
  width: 100%;
  height: calc(100% - 88px);
}

#current_status .tank .tout div {
  display: block;
  width: calc(100% - 30px);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#current_status .tank .tout > div > div {
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
}

#current_status .tank .tout .tout_text {
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  position: relative;
  top: 64%;
  left: 50%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  z-index: 3;
}

#current_status .tank .tout .tout_text.en {
  top: 70%;
}

#current_status .tank .tout .trigger {
  color: #000;
}

#current_status .tank .tout .trigger:before {
  top: 0;
}

#current_status .tank .tout .trigger span {
  display: inline-block;
  line-height: 1;
}

#current_status .tank .tout .tout_text_2 {
  font-size: 18px;
  line-height: 1.7;
  margin-top: 16px;
}

#current_status .tank .tout .text_2_1 {
  padding-left: 10px;
}

#current_status .tank .tout .text_2_2 {
  padding-left: 20px;
}

#current_status .tank .tout .text_2_2.en {
  padding-left: 10px;
}

#current_status .tank .tout .tout_text_3 {
  font-size: 14px;
  line-height: 1.2;
  margin-top: 8px;
  margin-left: 62px;
  text-align: left;
  width: 300px;
}

#current_status .tank .tout .tout_text_3.en {
  margin-left: 30px;
  width: 350px;
}

#current_status .tank .tout .tout_text_3 li {
  list-style: none;
  position: relative;
  text-align: left;
}

#current_status .tank .tout .tout_text_3 li:before {
  background: #fff;
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: -12px;
  width: 6px;
  height: 6px;
}

#current_status .tank .tout .tout_text_3 li ~ li {
  margin-top: 10px;
}

#current_status .tank .tout2 {
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 83px;
}

#current_status .tank .tout2 div {
  display: block;
  width: calc(100% - 30px);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#current_status .tank .tout2 > div > div {
  width: 100%;
  height: 71px;
  margin: 0;
  border-radius: 0 0 50% 50%;
  overflow: hidden;
}

#current_status .tank .tout2 div > div > div:before {
  content: '';
  background: url("../images/top/current_status/water02.gif") repeat;
  width: 100%;
  height: 78px;
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  left: 0;
}

#current_status .tank .tout2 div > div > div:after {
  content: '';
  background: url("../images/top/current_status/water02.gif") repeat;
  width: 100%;
  height: 78px;
  border-radius: 50%;
  position: absolute;
  bottom: -36px;
  left: 0;
}

#current_status .tank .tout2 div > div > div > p {
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  bottom: -32px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

#current_status .tank .tout2 div > div > div > p.en {
  font-size: 12px;
  bottom: -27px;
  word-break: keep-all;
  width: 100%;
  text-align: center;
}

#current_status .tank .tank-text-wrap {
  position: absolute;
  top: 0;
  left: 0;
}

#current_status .tank .tank-text {
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  z-index: 2;
}

#current_status .tank .tank-text.textpercent {
  color: #0485a9;
  font-family: 'Roboto', sans-serif;
  font-size: 36px;
  top: -9px;
  left: 230px;
}

#current_status .tank .tank-text.textpercent.en {
  top: -13px;
  left: 87px;
}

#current_status .tank .tank-text.textpercent .percent {
  font-size: 20px;
}

body[data-pagescroll-index='3'] #current_status .right .inner .tank .tout > div::before {
  content: '';
  background: url("../images/top/current_status/water02.gif") repeat;
  width: 100%;
  height: 78px;
  border-radius: 50%;
  position: absolute;
  bottom: -71px;
  left: 0;
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1;
  -webkit-animation-name: anim3-colorchange;
          animation-name: anim3-colorchange;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /* IE11 */
}

@media all and (-ms-high-contrast: none) {
  body[data-pagescroll-index='3'] #current_status .right .inner .tank .tout > div::before {
    background: url("../images/top/current_status/water01.gif") repeat;
  }
}

body[data-pagescroll-index='3'] #current_status .right .inner .tank .tout .tout_text_wrap {
  width: 100%;
  height: 100%;
  margin: auto;
  top: 873px;
  background: url("../images/top/current_status/water01.gif") repeat;
  border-radius: 0;
  border: none;
  -webkit-animation-name: anim;
          animation-name: anim;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

body[data-pagescroll-index='3'] #current_status .right .inner .tank .tout .tout_text_wrap:before {
  content: '';
  background: url("../images/top/current_status/water01.gif") repeat;
  width: 100%;
  height: 78px;
  border-radius: 50%;
  position: absolute;
  top: -35px;
  left: 0;
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation-name: opac1;
          animation-name: opac1;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

body[data-pagescroll-index='3'] #current_status .right .inner .tank .tout2 div div div {
  width: 100%;
  height: 47px;
  margin: 0;
  top: 50px;
  background: url("../images/top/current_status/water02.gif") repeat;
  border-radius: 0%;
  border: none;
  -webkit-animation-name: anim2-opac1;
          animation-name: anim2-opac1;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

#current_status2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: url("../images/top/current_status/water-bg.png") right bottom no-repeat;
  background-size: auto;
}

#current_status2 .left {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 50px 0 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#current_status2 .left .water-title {
  background: #42b4d6;
  color: #fff;
  display: block;
  font-size: 18px;
  line-height: 18px;
  max-width: 340px;
  padding: 6px 10px;
  position: relative;
}

#current_status2 .left .water-title.en {
  font-size: 15px;
  line-height: 16px;
  padding: 8px 10px;
  max-width: 548px;
  text-align: left;
}

#current_status2 .left ul {
  margin-bottom: 20px;
  display: inline-block;
  min-width: 564px;
}

#current_status2 .left .inner > p {
  font-size: 15px;
  line-height: 30px;
}

#current_status2 .left .inner > p.en {
  line-height: 22px;
}

#current_status2 .left .inner > .viewmore {
  font-size: 15px;
  line-height: 21px;
  position: relative;
  display: inline-block;
  padding-left: 29px;
  margin-top: 10px;
}

#current_status2 .left .inner > .viewmore.en {
  margin-top: 14px;
}

#current_status2 .left .inner > .viewmore:before {
  content: '';
  background: #ffede5;
  position: absolute;
  left: 27px;
  top: 10%;
  width: calc(100% - 24px);
  height: 80%;
  z-index: -1;
}

#current_status2 .left .inner > .viewmore:after {
  content: '';
  background: url("../images/common/ic_blank2.png") center no-repeat #fa763f;
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
}

#current_status2 .left .inner > .viewmore2 {
  font-size: 15px;
  line-height: 21px;
  position: relative;
  display: inline-block;
  padding-left: 29px;
  margin-top: 20px;
}

#current_status2 .left .inner > .viewmore2:before {
  content: '';
  background: #ffdedb;
  position: absolute;
  left: 27px;
  top: 10%;
  width: calc(100% - 24px);
  height: 80%;
  z-index: -1;
}

#current_status2 .left .inner > .viewmore2:after {
  content: '';
  background: url("../images/top/current_status/ic_qu.png") no-repeat center center #e8310c;
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
}

#current_status2 .left li {
  list-style: none;
  text-align: right;
  position: relative;
}

#current_status2 .left li.current-water .subtitle {
  color: #333;
}

#current_status2 .left li.current-water p {
  color: #42b4d6;
}

#current_status2 .left li .subtitle {
  font-size: 16px;
  line-height: 26px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #4c4c4c;
  text-align: left;
}

#current_status2 .left li .subundertitle {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 0px;
  color: #4c4c4c;
  text-align: right;
}

#current_status2 .left li p {
  font-size: 120px;
  line-height: 122px;
  color: #666666;
  font-weight: 500;
  letter-spacing: -0.04em;
  position: relative;
  padding-right: 68px;
  display: inline-block;
  white-space: nowrap;
}

#current_status2 .left li p:after {
  content: '㎥';
  position: absolute;
  right: 0;
  bottom: 9px;
  font-size: 63px;
  line-height: 82px;
}

#current_status2 .right {
  width: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#current_status2 .right .tank {
  width: 431px;
  height: 517px;
  position: relative;
}

#current_status2 .right .tank > img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#current_status2 .right .tank .tout {
  position: relative;
  width: 100%;
  height: calc(100% - 88px);
}

#current_status2 .right .tank .tout div {
  display: block;
  width: calc(100% - 30px);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#current_status2 .right .tank .tout div:before {
  content: '';
  background: url("../images/top/current_status/water01.gif") repeat;
  width: 100%;
  height: 78px;
  border-radius: 50%;
  position: absolute;
  bottom: -37px;
  left: 0;
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1;
}

#current_status2 .right .tank .tout > div > div {
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
}

#current_status2 .right .tank .tout div div div {
  background: url("../images/top/current_status/water01.gif") repeat;
  border-radius: 0%;
  border: none;
  margin: auto;
  top: 264px;
  width: 100%;
  height: 100%;
}

#current_status2 .right .tank .tout div div div:before {
  background: url("../images/top/current_status/water01.gif") repeat;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: '';
  position: absolute;
  top: -35px;
  left: 0;
  width: 100%;
  height: 78px;
}

#current_status2 .right .tank .tout div div div > p {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  top: 35%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

#current_status2 .right .tank .tout2 {
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 83px;
}

#current_status2 .right .tank .tout2 div {
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(100% - 30px);
  height: 100%;
}

#current_status2 .right .tank .tout2 > div > div {
  border-radius: 0 0 50% 50%;
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 71px;
}

#current_status2 .right .tank .tout2 div div div > p {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  bottom: -32px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

#current_status2 .right .tank .tout2 div div div > p.en {
  font-size: 12px;
  bottom: -28px;
  text-align: center;
  width: 100%;
  word-break: keep-all;
}

#current_status2 .right .tank .fade-chart {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3;
}

#current_status2 .right .tank .fade-chart img {
  width: auto;
}

#current_status2 .right .tank .fade-chart .chart {
  position: absolute;
  top: 181px;
  left: 38px;
}

#current_status2 .right .tank .fade-chart .chart.en {
  width: 355px;
}

#current_status2 .right .tank .fade-chart .text {
  position: absolute;
  top: 518px;
  left: 0px;
}

body[data-pagescroll-index='4'] #current_status2 .right .inner .tank > img {
  -webkit-animation: opac2 2s ease alternate forwards;
          animation: opac2 2s ease alternate forwards;
}

body[data-pagescroll-index='4'] #current_status2 .right .inner .tank .tout2 div div div {
  -webkit-animation: opac2 2s ease alternate forwards;
          animation: opac2 2s ease alternate forwards;
  background: url("../images/top/current_status/water02.gif") repeat;
  border-radius: 0%;
  border: none;
  margin: 0;
  top: -12px;
  width: 100%;
  height: 47px;
}

body[data-pagescroll-index='4'] #current_status2 .right .inner .tank .tout2 div div div:after {
  background: url("../images/top/current_status/water02.gif") repeat;
  border-radius: 50%;
  content: '';
  position: absolute;
  bottom: -36px;
  left: 0;
  width: 100%;
  height: 78px;
}

body[data-pagescroll-index='4'] #current_status2 .right .inner .tank .fade-chart {
  -webkit-animation: opac 2s 2s ease alternate forwards;
          animation: opac 2s 2s ease alternate forwards;
}

#circumstances {
  overflow: hidden;
}

#circumstances .phase-move {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
}

#circumstances .phase-move.open .left {
  background: rgba(255, 255, 255, 0.9);
}

#circumstances .phase-move.open .phase-list {
  right: 0;
}

#circumstances .left {
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 540px;
  padding: 0 50px 0 80px;
  position: relative;
  width: 50%;
}

#circumstances .left .title {
  background: #42b4d6;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 10px;
  padding: 6px 10px;
}

#circumstances .left p {
  font-size: 15px;
  line-height: 30px;
  position: relative;
  z-index: 0;
}

#circumstances .left ul {
  margin-top: 30px;
}

#circumstances .left li {
  width: 266px;
  height: 46px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #e3310d;
  color: #e3310d;
  font-size: 15px;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  list-style: none;
}

#circumstances .left li.active, #circumstances .left li:hover {
  color: #fff;
  background: #e3310d;
}

#circumstances .left li.active a::before, #circumstances .left li:hover a::before {
  background: url("../images/top/circumstances/arrow2.png") no-repeat center center;
}

#circumstances .left li.active span.usually {
  display: none;
}

#circumstances .left li.active span.return {
  display: inline;
}

#circumstances .left li.active a::before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

#circumstances .left li span.usually {
  display: inline;
}

#circumstances .left li span.return {
  display: none;
}

#circumstances .left li ~ li {
  margin-top: 20px;
}

#circumstances .left li:nth-last-of-type(1) a {
  padding-left: 25px;
}

#circumstances .left li:nth-last-of-type(1) a:before {
  background: url("../images/top/circumstances/ic_question.png") center no-repeat #e8310c;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: '';
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 12px;
  position: relative;
  left: 2px;
  width: 23px;
  height: 23px;
}

@media all and (-ms-high-contrast: none) {
  #circumstances .left li:nth-last-of-type(1) a:before {
    top: 0;
  }
}

#circumstances .left li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  padding-left: 58px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-right: 12px;
}

#circumstances .left li a:before {
  content: '';
  background: url("../images/top/circumstances/arrow.jpg") no-repeat center center;
  width: 14px;
  height: 6px;
  border-radius: 50%;
  margin-right: 12px;
  position: absolute;
  left: 32px;
}

@media all and (-ms-high-contrast: none) {
  #circumstances .left li a:before {
    top: 18px;
  }
}

#circumstances .right {
  background: url("../images/top/circumstances/right.jpg") left bottom no-repeat;
  background-size: cover;
  width: 50%;
}

#circumstances .phase-list {
  position: absolute;
  right: -50%;
  top: -40px;
  padding: 90px 50px 40px;
  width: 50%;
  height: calc(100% + 40px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #42b4d6;
  overflow-y: scroll;
  -webkit-transition: right 0.6s;
  transition: right 0.6s;
  z-index: 2;
}

#circumstances .phase-list li {
  list-style: none;
}

#circumstances .phase-list > li {
  position: absolute;
  z-index: 2;
  padding: 0 50px 40px 0;
  background: #42b4d6;
  display: none;
}

#circumstances .phase-list > li h2 {
  margin-bottom: 35px;
}

#circumstances .phase-list > li li {
  padding: 30px;
  background: #fff;
  position: relative;
}

#circumstances .phase-list > li li ~ li {
  margin-top: 40px;
}

#circumstances .phase-list > li li ~ li:before {
  content: '';
  background: url("../images/top/circumstances/phase-arrow.png");
  width: 50px;
  height: 16px;
  position: absolute;
  top: -27px;
  left: calc(50% - 25px);
}

#circumstances .phase-list > li li :last-of-type dt {
  background: #f24643;
}

#circumstances .phase-list > li li dt {
  font-size: 15px;
  line-height: 16px;
  padding: 6px 10px;
  display: inline-block;
  background: #42b4d6;
  color: #fff;
}

#circumstances .phase-list > li li dd {
  margin-top: 10px;
}

#circumstances .phase-list > li li dd > p {
  font-size: 15px;
  line-height: 30px;
  position: relative;
  z-index: 1;
}

#circumstances .phase-list > li li dd .supplement {
  margin: 8px 0 0 0;
  font-size: 12px;
  line-height: 17px;
  position: relative;
  z-index: 1;
}

#circumstances .phase-list > li li dd > .image {
  margin-top: 28px;
  text-align: center;
}

#circumstances .phase-list > li li dd > .image p {
  font-size: 15px;
  margin-top: 10px;
}

#circumstances .phase-list > li li dd > .image span {
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#faq {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
}

#faq .left {
  width: 50%;
  height: 100%;
  background: url("../images/top/faq/faq-bg.jpg") center right no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}

#faq .left .inner {
  padding: 40px 56px 40px 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  text-align: left;
}

#faq .left .faq-title {
  background: #42b4d6;
  color: #fff;
  font-size: 18px;
  line-height: 19px;
  position: absolute;
  left: 80px;
  top: 60px;
  padding: 3px 10px;
  z-index: 2;
}

#faq .left .faq-sub {
  position: absolute;
  left: 80px;
  top: 112px;
  z-index: 2;
}

#faq .left .faq-sub-title {
  font-size: 16px;
  line-height: 18px;
  padding-left: 25px;
  position: relative;
  margin-bottom: 10px;
}

#faq .left .faq-sub-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 4px;
  background: #42b4d6;
}

#faq .right {
  overflow-y: scroll;
  position: relative;
  width: 50%;
}

#faq .right .faq-list li {
  list-style: none;
  padding: 40px 80px 40px 50px;
}

#faq .right .faq-list li:nth-of-type(odd) {
  background: url("../images/top/faq/qa_bg.gif");
}

#faq .right .faq-list li:nth-of-type(even) {
  background: url("../images/top/faq/qa_bg2.gif");
}

#faq .right .faq-list li > dl {
  letter-spacing: 0.08em;
}

#faq .right .faq-list li > dl > dt {
  padding-left: 96px;
  position: relative;
}

#faq .right .faq-list li > dl > dt:before {
  content: '';
  position: absolute;
  left: 0;
  background: url("../images/top/faq/questions01.png") no-repeat;
  width: 89px;
  height: 89px;
}

#faq .right .faq-list li > dl > dt div {
  position: relative;
  background: url("../images/top/faq/back-q.png") #fff no-repeat top 7px left 9px;
  background-size: 42px 48px;
  border-radius: 10px;
  padding: 26px 42px 24px 30px;
  font-size: 15px;
  line-height: 30px;
  font-weight: bold;
  color: #167d9c;
  margin-left: 7px;
}

#faq .right .faq-list li > dl > dt div:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 11px 8.5px 0;
  border-color: transparent #ffffff transparent transparent;
  position: absolute;
  left: -11px;
  top: 22px;
}

#faq .right .faq-list li > dl > dd {
  padding-right: 96px;
  margin-top: 20px;
  position: relative;
}

#faq .right .faq-list li > dl > dd:before {
  content: '';
  position: absolute;
  right: 0;
  background: url("../images/top/faq/frequently.png") no-repeat;
  width: 89px;
  height: 89px;
}

#faq .right .faq-list li > dl > dd > dl {
  position: relative;
  background: url("../images/top/faq/back-a.png") #fff no-repeat top 7px left 9px;
  background-size: 43px;
  border-radius: 10px;
  padding: 26px 42px 24px 30px;
  margin-right: 8px;
  z-index: 0;
}

#faq .right .faq-list li > dl > dd > dl:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 0 8.5px 11px;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  right: -11px;
  top: 22px;
  z-index: 1;
}

#faq .right .faq-list li > dl > dd > dl:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 0 8.5px 11px;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  right: -8px;
  top: 22px;
  z-index: 2;
}

#faq .right .faq-list li > dl > dd > dl dt {
  font-size: 15px;
  line-height: 30px;
  color: #f24643;
  font-weight: bold;
}

#faq .right .faq-list li > dl > dd > dl dd {
  font-size: 15px;
  line-height: 30px;
  color: #323232;
  font-weight: normal;
  display: none;
}

#faq .right .faq-list li > dl > dd > dl dd .link {
  position: relative;
  padding-left: calc(29px + 2%);
  z-index: 0;
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
}

#faq .right .faq-list li > dl > dd > dl dd .link:after {
  content: '';
  background: url("../images/common/ic_blank2.png") center no-repeat #fa763f;
  position: absolute;
  left: 0;
  top: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  z-index: 1;
}

#faq .right .faq-list li > dl > dd > dl dd .link span {
  background: #ffede5;
}

#faq .right .faq-list li > dl > dd > dl .btn {
  background: #ffdedb;
  border-radius: 10px;
  width: 100%;
  height: 45px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 16px;
  cursor: pointer;
}

#faq .right .faq-list li > dl > dd > dl .btn.open p:before {
  content: '閉じる';
}

#faq .right .faq-list li > dl > dd > dl .btn.open p:after {
  top: 4px;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}

#faq .right .faq-list li > dl > dd > dl .btn p {
  position: relative;
  padding-right: 27px;
}

#faq .right .faq-list li > dl > dd > dl .btn p:before {
  content: 'もっと見る';
  position: relative;
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;
}

#faq .right .faq-list li > dl > dd > dl .btn p:after {
  content: '';
  width: 16px;
  height: 9px;
  position: absolute;
  right: 0;
  top: 6px;
  background: url("../images/top/faq/arrow.png") no-repeat;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

#faq .right .faq-list li > dl > dd > dl .btn.en.open p::before {
  content: 'Close';
}

#faq .right .faq-list li > dl > dd > dl .btn.en p:before {
  content: 'More detail';
}

#faq .right .faq-list li:nth-of-type(2) > dl > dt::before {
  background: url("../images/top/faq/questions02.png") no-repeat;
  width: 89px;
  height: 89px;
}

#link {
  position: relative;
  background: url("../images/top/link/link-bg.jpg") center center no-repeat;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#link:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1;
}

#link .left {
  width: 50%;
  padding: 60px 50px 0 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  background: #42b4d6;
  z-index: 2;
  height: 100%;
}

#link .left .about-title {
  font-size: 16px;
  line-height: 18px;
  padding-left: 25px;
  margin-bottom: 20px;
  position: relative;
}

#link .left .about-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 4px;
  background: #fff;
}

#link .left p {
  font-size: 15px;
  line-height: 32px;
  margin-top: 26px;
}

#link .right {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-y: scroll;
  padding: 60px 70px 0 50px;
  width: 50%;
  height: 100%;
}

#link .right .inner {
  padding-bottom: 100px;
  position: relative;
  z-index: 2;
}

#link .right dl ~ dl {
  margin-top: 20px;
}

#link .right dt {
  background: #42b4d6;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  padding: 6px 10px;
}

#link .right ul {
  margin: 10px 0;
}

#link .right .sub-title {
  font-size: 16px;
  margin: 0 0 10px;
}

#link .right li {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #f89c77;
  border-radius: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #ed6329;
  font-size: 15px;
  font-weight: bold;
  list-style: none;
  width: 100%;
  height: 46px;
}

#link .right li ~ li {
  margin-top: 10px;
}

#link .right li a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 56px;
  position: relative;
  width: 100%;
  height: 100%;
}

#link .right li a:before {
  background: url("../images/common/ic_blank2.png") center no-repeat #fa763f;
  border-radius: 50%;
  content: '';
  position: absolute;
  left: 23px;
  top: 10px;
  width: 23px;
  height: 23px;
}

#link .contact {
  background: #ecf1f3;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  height: 76px;
  z-index: 3;
}

#link .contact-btn {
  background: #ff0011;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 15px;
  font-weight: bold;
  width: 503px;
  height: 46px;
}

#link .contact-btn a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.tepco-page {
  width: 980px;
  margin: auto;
  height: calc(100vh - 200px);
  overflow-y: scroll;
  text-align: left;
}

.tepco-page li {
  list-style: none;
}

.tepco-page .hdg-level1 {
  font-size: 220%;
  font-weight: normal;
  padding-top: 30px;
  margin-bottom: 70px;
  color: #333;
  font-family: 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, '・ｭ・ｳ ・ｰ繧ｴ繧ｷ繝・け', 'Arial', sans-serif;
}

.tepco-page .hdg-level2 {
  font-size: 200%;
  font-weight: normal;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
  word-wrap: break-word;
  font-family: 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, '・ｭ・ｳ ・ｰ繧ｴ繧ｷ繝・け', 'Arial', sans-serif;
}

.tepco-page .section {
  width: 100%;
  font-size: 100%;
  margin: 0 auto;
}

.tepco-page .contact-column-type02 {
  border: 1px solid #ededed;
  padding: 25px 20px;
  margin-bottom: 30px;
}

.tepco-page .hdg-level4 {
  font-size: 132%;
  font-weight: normal;
  margin-bottom: 10px;
  word-wrap: break-word;
  color: #333;
}

.tepco-page .contact-column-type02 .doc-text {
  margin: 15px 0 0 0;
  line-height: 1.8em;
  font-weight: normal;
}

.tepco-page .link-doc {
  color: #3d90cc;
  text-decoration: underline;
}

#storage {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 30px;
}

#storage .left {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 50px;
  width: 50%;
}

#storage .left .title {
  background: #42b4d6;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 30px;
  padding: 6px 10px;
}

#storage .left p {
  font-size: 15px;
  line-height: 30px;
  max-width: 564px;
}

#storage .right {
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 50%;
}

#storage .right .inner {
  min-width: 500px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}

#storage .inner .links {
  margin-top: 30px;
}

#storage .inner .links li {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e3310d;
  border-radius: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #e3310d;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  list-style: none;
  margin-bottom: 20px;
  position: relative;
  width: 336px;
  height: 46px;
}

#storage .inner .links li:last-of-type {
  margin-bottom: 0;
}

#storage .inner .links a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 12px;
  padding-left: 58px;
  position: relative;
  width: 100%;
  height: 100%;
}

#storage .inner .links a:before {
  background: url("../images/top/circumstances/arrow.jpg") no-repeat center center;
  border-radius: 50%;
  content: '';
  margin-right: 12px;
  position: absolute;
  left: 32px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  width: 14px;
  height: 6px;
}

@media all and (-ms-high-contrast: none) {
  #storage .inner .links a:before {
    top: 18px;
  }
}

#storage .inner .links li:hover {
  background-color: #e3310d;
  color: #fff;
}

#storage .inner .links li:hover a:before {
  background: url("../images/top/circumstances/arrow2.png") no-repeat center center;
}

#strageSlide {
  margin-bottom: 50px;
}

#strageSlide .bxslider {
  height: auto;
  max-height: 400px;
}

#strageSlide .bxslider:before {
  content: '';
  display: block;
  padding-top: 53.2%;
}

#strageSlide .bxslider li {
  top: 0;
  text-align: center;
}

#strageSlide .bxslider li img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: 100%;
}

#strageSlide .bxslider li div {
  background: #fff;
  padding: 5px;
  position: absolute;
}

#strageSlide .bxslider li .title {
  font-size: 16px;
  font-weight: bold;
  top: 20px;
  left: 50px;
}

#strageSlide .bxslider li .date {
  font-size: 12px;
  top: 50px;
  left: 50px;
}

#strageSlide .bx-pager {
  bottom: -20px;
  z-index: 99;
}

#strageSlide .bx-pager a {
  background: #cecece;
}

#strageSlide .bx-pager .bx-pager-control {
  background-size: 20px 20px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: 7px;
  left: 7px;
  width: 20px;
  height: 20px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#strageSlide .bx-pager .bx-pager-control.stop {
  background: url("../images/top/storage/btn-stop.png") center no-repeat;
  background-size: 20px 20px;
}

#strageSlide .bx-pager .bx-pager-control.play {
  background: url("../images/top/storage/btn-play.png") center no-repeat;
  background-size: 20px 20px;
}

#strageSlide .bx-wrapper .bx-prev,
#strageSlide .bx-wrapper .bx-next {
  background: none !important;
}

#strageSlide .bx-wrapper .bx-pager.bx-default-pager a:hover, #strageSlide .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #40adcd;
}

#tankPlan {
  padding: 0 80px 0 44px;
}

#tankPlan dl {
  margin-bottom: 5px;
}

#tankPlan dl dt {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 3px;
}

#tankPlan dl dd {
  font-size: 13px;
  line-height: 1.4;
}

#tankPlan .plan_popup {
  background: none;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  text-align: center;
}

#tankPlan .plan_popup:before, #tankPlan .plan_popup:after {
  display: none;
}

#tankPlan .plan_popup:hover {
  opacity: 0.7;
}

#tankPlan .plan_popup span {
  background-color: #40adcd !important;
  border-radius: 15px;
  color: #fff;
  display: block;
  font-size: 14px;
  line-height: 29px;
  min-width: 160px;
  margin-left: 24px;
  width: 160px;
  height: 30px;
}

#tankPlan .plan_popup span:before {
  background: url("../images/top/storage/ic_search.png") no-repeat 0 0;
  content: '';
  display: inline-block;
  margin-right: 10px;
  width: 13px;
  height: 13px;
}

#tankPlan .plan_popup span:after {
  display: none;
}

#storage2 .left {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 80px 0 50px;
  position: relative;
  width: 50%;
}

#storage2 .left .title {
  background: #42b4d6;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 30px;
  padding: 6px 10px;
}

#storage2 .left p {
  font-size: 15px;
  line-height: 30px;
  max-width: 564px;
}

#storage2 .right {
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 80px 0 50px;
  overflow-y: scroll;
  position: relative;
  width: 50%;
}

#storage2 .full_map {
  background: url("../images/top/storage/img_map.jpg") no-repeat center;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
}

#storage2 .map {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#storage2 .direction {
  position: absolute;
  top: 50px;
  right: 80px;
}

#storage2 .inner {
  position: absolute;
  top: 40px;
  left: 80px;
}

#storage2 .notice {
  font-size: 13px;
  line-height: 18px;
  position: absolute;
  bottom: 20px;
  right: 45px;
  width: 22%;
}

#storage2 .notice span {
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  margin-bottom: 3px;
  padding-left: 14px;
  text-indent: -14px;
}

#storage2 .title {
  background: #42b4d6;
  color: #fff;
  font-size: 18px;
  line-height: 18px;
  padding: 6px 10px;
  display: inline-block;
  margin-bottom: 20px;
}

#storage2 .inner > dd {
  font-size: 15px;
  line-height: 30px;
}

#storage2 .inner > dd span {
  background-color: rgba(255, 255, 255, 0.6);
}

#storage3 {
  background: url("../images/top/storage/img_map2.jpg") center center no-repeat;
  background-size: cover;
  position: relative;
}

#storage3 .map_links {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

#storage3 .title_wrap {
  position: absolute;
  top: 5%;
  left: 6.4%;
}

#storage3 .title_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#storage3 .title {
  background: #42b4d6;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 20px;
  padding: 6px 10px;
}

#storage3 .explain {
  background: #fff;
  font-size: 15px;
  line-height: 30px;
}

#storage3 .map_inner {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

#storage3 h3 {
  background: #fff;
  color: #42b4d6;
  font-size: 26px;
  font-weight: bold;
  position: absolute;
}

#storage3 p {
  font-size: 15px;
  line-height: 30px;
  position: absolute;
}

#storage3 p span {
  background: #fff;
}

#storage3 .map-title1 {
  top: 44%;
  left: 15%;
}

#storage3 .link1 {
  top: 48%;
  left: 15%;
}

#storage3 .map-title2 {
  top: 44%;
  left: 56%;
}

#storage3 .link2 {
  top: 49%;
  left: 56%;
}

#storage3 .link3 {
  top: 73%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#storage3 .blank {
  cursor: pointer;
  display: inline-block;
  margin-top: 8px;
}

#storage3 .blank span {
  background: #ffede5;
}

#storage3 .blank:before {
  background: url("../images/common/ic_blank2.png") 4px 5px no-repeat #fa763f;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: '';
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 3px;
  position: relative;
  top: 3px;
  left: 1px;
  width: 18px;
  height: 18px;
}

@media all and (max-height: 600px) {
  #current_status .left,
  #current_status2 .left,
  #storage .right,
  #storage2 .right {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@-webkit-keyframes anim {
  100% {
    top: 264px;
  }
}

@keyframes anim {
  100% {
    top: 264px;
  }
}

@-webkit-keyframes anim2 {
  100% {
    top: -12px;
  }
}

@keyframes anim2 {
  100% {
    top: -12px;
  }
}

@-webkit-keyframes anim3 {
  100% {
    bottom: -34px;
  }
}

@keyframes anim3 {
  100% {
    bottom: -34px;
  }
}

@-webkit-keyframes opac {
  100% {
    opacity: 1;
  }
}

@keyframes opac {
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes opac1 {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opac1 {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes opac2 {
  100% {
    opacity: 0.3;
  }
}

@keyframes opac2 {
  100% {
    opacity: 0.3;
  }
}

@-webkit-keyframes anim3-colorchange {
  20% {
    background: url("../images/top/current_status/water02.gif") repeat;
  }
  100% {
    background: url("../images/top/current_status/water01.gif") repeat;
    bottom: -34px;
  }
}

@keyframes anim3-colorchange {
  20% {
    background: url("../images/top/current_status/water02.gif") repeat;
  }
  100% {
    background: url("../images/top/current_status/water01.gif") repeat;
    bottom: -34px;
  }
}

@-webkit-keyframes anim2-opac1 {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: -12px;
  }
}

@keyframes anim2-opac1 {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: -12px;
  }
}