@charset "UTF-8";
/*-----------------------------------
common
-----------------------------------*/
html {
  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", YuGothic, "ＭＳ ゴシック", sans-serif;
  color: #4d4d4d;
  font-size: 16px;
  width: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  line-height: 1.64;
  min-height: 100vh;
  height: 100%;
  margin: 0;
  background-color: #fff;
  overflow-x: hidden;
}

/*-----------------------------------
defalut setting
-----------------------------------*/
a {
  text-decoration: none;
  color: #4d4d4d;
  transition: .5s;
}

a:hover {
  opacity: .8;
  transition: .5s;
}

ul, li, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

dl, dt, dt, dd {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0;
}

input::placeholder {
  color: #4d4d4d;
}

/* IE */
input:-ms-input-placeholder {
  color: #4d4d4d;
}

/* Edge */
input::-ms-input-placeholder {
  color: #4d4d4d;
}

.clearfix {
  display: block;
}

.clearfix::before, .clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/*-----------------------------------
parts style
-----------------------------------*/
#insertBlock .tableauPlaceholder{
	margin: 0 auto;
}

.monitoring_tableau {
  margin: 150px auto 120px;
}

.monitoring_tableau_sp {
  display: none !important;
}

.img_box img {
  width: 100%;
  display: block;
}

.js_modal_open {
  cursor: pointer;
}

.pc_ib {
  display: inline-block;
}

.sp_ib {
  display: none;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 9990;
}

.modal .close_btn {
  position: absolute;
  top: calc(10% - 40px);
  right: calc(15% - 40px);
  width: 80px;
  height: 80px;
  z-index: 9995;
}

.modal .close_btn a {
  display: block;
}

.modal .close_btn a::before {
  content: "";
  width: 80px;
  height: 80px;
  background-image: url("../images/close_icon.png");
  background-size: contain;
  display: block;
  transition: all .5s;
}

.modal .close_btn a:hover {
  opacity: 1;
}

.modal .close_btn a:hover::before {
  background-image: url("../images/close_icon_hover.png");
  transition: all .5s;
}

.modal .close_btn_sp {
  display: none;
}

.modal_bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(9, 96, 119, 0.3);
  z-index: 9991;
}

.modal_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80%;
  width: 80%;
  max-width: 956px;
  background: #fff;
  padding: 10px 10px 10px 0;
  z-index: 9992;
  border-radius: 20px;
  box-shadow: 3px 3px 6px #aaa;
}

.modal_inner {
  overflow-y: scroll;
  padding: 40px 40px 52px;
  height: 100%;
}

.modal h2 {
  font-size: 28px;
  letter-spacing: 1.6px;
  padding: 0 0 20px 40px;
  position: relative;
  border-bottom: 1px solid #707070;
}

.modal h2::before {
  content: "";
  width: 75px;
  height: 75px;
  border-radius: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 6px;
}

.modal h2::after {
  content: "";
  background-size: cover;
  position: absolute;
  height: 22px;
  right: 0;
  bottom: 6px;
}

.modal h2.solar::before {
  background: linear-gradient(141deg, #f2cdcd 0%, #e9b8cf 40%, #cc95b6 100%);
}

.modal h2.solar::after {
  width: 124px;
  background-image: url("../images/solar02.png");
}

.modal h2.farming::before {
  background: linear-gradient(139deg, #90ecbe 0%, #8ce9ba 30%, #81deaf 55%, #84ccdf 100%);
}

.modal h2.farming::after {
  width: 134px;
  background-image: url("../images/farmingtype02.png");
}

.modal h2.hydro::before {
  background: linear-gradient(139deg, #b1f3fe 0%, #85ddec 50%, #84a5e6 100%);
}

.modal h2.hydro::after {
  width: 126px;
  background-image: url("../images/hydro02.png");
}

.modal h2.biomass::before {
  background: linear-gradient(139deg, #f8da9e 0%, #f8da9e 50%, #db7d65 100%);
}

.modal h2.biomass::after {
  width: 158px;
  background-image: url("../images/biomass02.png");
}

.modal h2.roof::before {
  background: linear-gradient(139deg, #a78a61 0%, #eacda3 100%);
}

.modal h2.roof::after {
  width: 134px;
  background-image: url("../images/farmingtype02.png");
}

.modal h2 + p {
  margin: 24px 0 0;
  text-align: center;
}

.modal .solar_img {
  width: 200px;
  margin: 8px auto 0;
}

.modal .solar_img img {
  width: 100%;
}

.modal .solar_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 40px 0 0;
}

.modal .solar_list_box {
  width: 31%;
}

.modal .solar_list_box dl {
  margin: 32px 0 0;
}

.modal .solar_list_box dl:first-of-type {
  margin: 0;
}

.modal .solar_list_box dt {
  font-weight: bold;
  font-size: 14px;
  position: relative;
  padding: 0 0 4px 24px;
  border-bottom: 1px solid #707070;
}

.modal .solar_list_box dt::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #FBA7A7;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 2px;
}

.modal .solar_list_box dd {
  margin: 8px 0 0;
  font-size: 14px;
}

.modal .solar_list_box dd .solar_text {
  display: flex;
}

.modal .solar_list_box dd .solar_text span {
  padding: 2px 8px 0;
  margin-left: auto;
}

.modal .solar_list_box dd .solar_text span.on {
  background-color: #FCF049;
}

.modal .solar_list_box dd .solar_text span.off {
  background-color: #A6F3BD;
}

.modal .farming_wrap {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
}

.modal .farming_wrap:last-of-type {
  margin: 50px 0 0;
}

.modal .farming_box {
  width: 48%;
}

.modal .farming_box h4 {
  font-size: 18px;
  font-weight: bold;
  padding: 6px 16px 2px;
  background-color: #C6EAEE;
}

.modal .farming_box p {
  width: 100%;
  margin: 16px 0 0;
}

.modal .farming_box p img {
  width: 100%;
  display: block;
}

.modal .farming_img {
  width: 33%;
}

.modal .farming_img img {
  width: 100%;
  display: block;
}

.modal .farming_text {
  width: 63%;
}

.modal .farming_text h3 {
  font-size: 18px;
  font-weight: bold;
  padding-left: 25px;
  position: relative;
  margin: 20px 0 0;
}

.modal .farming_text h3::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #9BD7E9;
  position: absolute;
  left: 0;
  top: 4px;
}

.modal .farming_text h3:first-of-type {
  margin: 0;
}

.modal .farming_text ul {
  margin: 8px 0 0;
}

.modal .farming_text li {
  padding-left: 1em;
  position: relative;
}

.modal .farming_text li::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #9BD7E9;
  position: absolute;
  left: 0;
  top: 10px;
  border-radius: 100%;
}

.modal .farming_spec {
  margin: 8px 0 0;
}

.modal .farming_spec dl {
  margin: 8px 0 0;
  display: flex;
}

.modal .farming_spec dt {
  padding: 2px 8px 0;
  background-color: #83CFD6;
  font-size: 14px;
  color: #fff;
  margin-right: 8px;
}

.modal .farming_spec dd {
  font-size: 14px;
  margin-right: 16px;
  padding: 2px 0 0;
}

.modal .hydro_wrap {
  display: flex;
  justify-content: space-between;
  margin: 24px 0 0;
}

.modal .hydro_wrap.last .hydro_img, .modal .hydro_wrap.last .hydro_text {
  width: 48%;
}

.modal .hydro_img {
  width: 52%;
  max-width: 450px;
}

.modal .hydro_img img {
  width: 100%;
  display: block;
}

.modal .hydro_text {
  width: 44%;
}

.modal .hydro_text p {
  margin: 24px 0 0;
}

.modal .hydro_text p:first-of-type {
  margin: 0;
}

.modal .hydro_title {
  font-size: 18px;
  font-weight: bold;
  background-color: #C6EAEE;
  padding: 6px 16px 4px;
  margin: 40px 0 0;
}

.modal .hydro_title_h4 {
  font-size: 14px;
  font-weight: normal;
  margin: 24px 0 0;
  padding-left: 24px;
  position: relative;
}

.modal .hydro_title_h4::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #C6EAEE;
  position: absolute;
  left: 0;
}

.modal .hydro_list {
  margin: 16px 0 0;
}

.modal .hydro_list dl:first-of-type dt {
  border-top: none;
}

.modal .hydro_list dt {
  font-size: 14px;
  padding-top: 8px;
  border-top: 1px solid #C6EAEE;
}

.modal .hydro_list dd {
  font-size: 14px;
  padding-bottom: 8px;
}

.modal .hydro_img_box {
  margin: 16px 0 0;
  display: flex;
  justify-content: space-between;
}

.modal .hydro_img_box div {
  width: 48%;
}

.modal .hydro_img_box div img {
  width: 100%;
  display: block;
}

.modal .hydro_caption {
  margin: 5px 0 0;
  font-size: 14px;
}

.modal .biomass_wrap {
  margin: 24px 0 0;
  display: flex;
  justify-content: space-between;
}

.modal .biomass_img {
  width: 48%;
}

.modal .biomass_img img {
  width: 100%;
  display: block;
}

.modal .biomass_img.wide {
  width: 95%;
  margin: 24px auto 0;
}

.modal .biomass_text {
  width: 100%;
}

.modal .biomass_text .title {
  padding-left: 24px;
  position: relative;
  font-weight: bold;
  font-size: 18px;
}

.modal .biomass_text .title::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #C6EAEE;
  position: absolute;
  left: 0;
  top: 4px;
}

.modal .biomass_text p {
  margin: 16px 0 0;
}

.modal .biomass_info {
  width: 48%;
}

.modal .biomass_title {
  font-size: 18px;
  padding: 6px 16px 4px;
  background-color: #C6EAEE;
  margin: 48px 0 0;
}

.modal .biomass_title span {
  margin-left: 16px;
  font-size: 16px;
}

.modal .biomass_title_sub {
  display: none;
}

.modal .biomass_icon_title {
  font-size: 18px;
  font-weight: bold;
  padding-left: 25px;
  position: relative;
  margin: 20px 0 0;
}

.modal .biomass_icon_title::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #C6EAEE;
  position: absolute;
  left: 0;
  bottom: 6px;
}

.modal .biomass_icon_title + .biomass_title_h4 {
  margin: 12px 0 0;
}

.modal .biomass_title_h4 {
  padding-left: 1em;
  margin: 36px 0 0;
  font-weight: normal;
  position: relative;
}

.modal .biomass_title_h4::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #9BD7E9;
  border-radius: 100%;
  position: absolute;
  top: 10px;
  left: 0;
}

.modal .biomass_info dl:first-of-type dt {
  border-top: none;
  padding-top: 0;
}

.modal .biomass_info dt {
  padding-top: 8px;
  font-size: 14px;
  border-top: 1px solid #C6EAEE;
}

.modal .biomass_info dd {
  padding-bottom: 8px;
  font-size: 14px;
}

.modal .biomass_flow {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.modal .biomass_flow.woodpower {
  justify-content: flex-start;
}

.modal .biomass_flow.woodpower .biomass_col3_box {
  margin-right: 12%;
}

.modal .biomass_flow.woodpower .biomass_col3_box.main {
  width: 25%;
}

.modal .biomass_flow.woodpower .biomass_col3_box.main img {
  width: 162px;
}

.modal .biomass_flow.woodpower .biomass_col3_box:last-of-type p {
  width: 270px;
}

.modal .biomass_col3_box {
  width: 27.5%;
  position: relative;
}

.modal .biomass_col3_box::after {
  content: "";
  width: 25px;
  height: 48px;
  background-image: url("../images/flow_arrow.png");
  background-size: contain;
  position: absolute;
  right: -22%;
  top: 65px;
}

.modal .biomass_col3_box:last-of-type::after {
  content: none;
}

.modal .biomass_col3_box img {
  width: 100%;
  display: block;
}

.modal .biomass_col3_box p {
  margin: 4px 0 0;
  font-size: 14px;
}

.modal .biomass_link {
  margin: 40px 0 0;
  display: flex;
  justify-content: flex-end;
}

.modal .biomass_link a {
  border-bottom: 1px solid #66A6FF;
  transition: all .5s;
  position: relative;
}

.modal .biomass_link a:hover {
  color: #66A6FF;
  transition: all .5s;
}

.modal .biomass_link br {
  display: none;
}

.modal .roof_title {
  font-size: 18px;
  font-weight: bold;
  padding-left: 24px;
  position: relative;
  margin: 24px 0 0;
}

.modal .roof_title:before {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  background-color: #C6EAEE;
  left: 0;
  top: 4px;
}

.modal .roof_img_wrap {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
}

.modal .roof_img {
  width: 37%;
}

.modal .roof_img img {
  display: block;
  width: 100%;
}

.modal .roof_text {
  width: 60%;
}

/*.modal .roof_img_wrap img:first-of-type {
  width: 60%;
}

.modal .roof_img_wrap img:last-of-type {
  width: 37%;
}*/

.modal .roof_list {
  margin: 8px 0 0;
}

.modal .roof_list li {
  padding-left: 1em;
  position: relative;
}

.modal .roof_list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #9BD7E9;
  position: absolute;
  left: 0;
  top: 10px;
  border-radius: 100%;
}

.modal .roof_wrap {
  margin: 32px 0 0;
  display: flex;
  justify-content: space-between;
}

.modal .roof_box {
  width: 19%;
}

.modal .roof_box:first-of-type {
  width: 36%;
}

.modal .roof_box:first-of-type img {
  width: 48%;
}

.modal .roof_box > div {
  display: flex;
  justify-content: space-between;
}

.modal .roof_box img {
  width: 100%;
  margin: 8px 0 0;
  display: block;
}

.modal .roof_box h4 {
  font-weight: bold;
  padding: 4px 8px;
  background-color: #C6EAEE;
}

.modal .roof_box dl {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
}

.modal .roof_box dt {
  padding: 2px 8px 0;
  background-color: #83CFD6;
  font-size: 14px;
  color: #fff;
  margin-right: 8px;
}

.modal .roof_box dd {
  font-size: 14px;
  padding: 2px 0 0;
}

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  padding-right: 17px;
}

body.fixed header {
  padding-right: 17px;
}

.another_link {
  padding-right: 25px !important;
  position: relative;
}

.another_link::after {
  content: "";
  background-image: url("../images/another_link_icon.png");
  background-size: cover;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 4px;
  top: calc(50% - 8px);
}

/*-----------------------------------
page style
-----------------------------------*/
.wrapper {
  width: 100%;
}

.main_visual {
  width: 100%;
  margin: 73px 0 0;
  position: relative;
}

.main_visual::after {
  content: "";
  width: 100%;
  height: 16vh;
  background-image: url("../images/white_circlebg02.png");
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 0;
  bottom: -4px;
}

.main_visual .catch_copy {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 720px;
}

.main_visual .catch_copy p {
  color: #fff;
  font-size: 42px;
  letter-spacing: 2.5px;
  text-align: center;
}

.main_visual .catch_copy p br {
  display: none;
}

.main_visual .slick-slide img {
  width: 100%;
}

.main_visual .slick-next {
  right: 40px !important;
  top: 45%;
}

.main_visual .slick-next:before {
  background: url("../images/next_arrow.png") !important;
  background-size: contain !important;
}

.main_visual .slick-prev {
  left: 40px !important;
  top: 45%;
}

.main_visual .slick-prev:before {
  background: url("../images/prev_arrow.png") !important;
  background-size: contain !important;
}

.main_visual .slick-arrow {
  z-index: 2 !important;
  width: 40px !important;
  height: 40px !important;
}

.main_visual .slick-arrow:before {
  content: "" !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1 !important;
}

#monitoring {
  max-width: 990px;
  width: 95%;
  text-align: center;
  position: relative;
  margin: -12vh auto 0;
  z-index: 10;
}

#monitoring .sp_dummy {
  display: none;
}

#monitoring .monitoring_title {
  color: #89F7FE;
  font-size: 18px;
  font-weight: bold;
  background: transparent linear-gradient(292deg, #61A0FB 0%, #89F7FE 54%, #4B97FF 100%) 0% 0% no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  border-bottom: 1px solid #89F7FE;
  display: inline-block;
  position: relative;
}

#monitoring .monitoring_title::after {
  content: "";
  width: 1px;
  height: 41px;
  background-color: #89F7FE;
  position: absolute;
  left: 50%;
  bottom: -41px;
}

#monitoring .monitoring_content {
  text-align: left;
  background: linear-gradient(125deg, #66a6ff 0%, #89f7fe 100%);
  padding: 16px;
  position: relative;
}

#monitoring .monitoring_content a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

#monitoring .monitoring_box {
  background-color: #fff;
}

#monitoring .monitoring_box .tableauPlaceholder {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#monitoring .monitoring_box_sp {
  display: none;
}

#monitoring .monitoring_show_more {
  text-align: center;
  margin-bottom: 12px;
}

#monitoring .monitoring_show_more a {
  color: #fff;
  position: relative;
  padding-right: 28px;
}

#monitoring .monitoring_show_more a::after {
  content: "";
  width: 20px;
  height: 24px;
  background-image: url("../images/drawer_link_arrow.png");
  background-size: cover;
  position: absolute;
  right: 0;
  top: -1px;
}

#Intro {
  margin-top: 300px;
  padding-bottom: 80px;
  position: relative;
}

#Intro::before, #Intro::after {
  content: "";
  width: 47px;
  height: 608px;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: -230px;
}

#Intro::before {
  background-image: url("../images/intro_img01.png");
  left: 0;
}

#Intro::after {
  background-image: url("../images/intro_img02.png");
  right: 0;
}

#Intro h2 {
  font-size: 28px;
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 1px white;
}

#Intro h2::before {
  content: "";
  width: 80px;
  height: 80px;
  background-image: url("../images/intro_icon.png");
  background-size: cover;
  background-position: center;
  position: absolute;
  left: calc(50% - 40px);
  top: -114px;
}

#Intro h2::after {
  content: "";
  width: 588px;
  height: 25px;
  background: linear-gradient(305deg, #89f7fe 0%, #aad5f2 40%, #66a6ff 100%);
  position: absolute;
  left: calc(50% - 294px);
  z-index: -1;
  bottom: 5px;
}

#Intro h2 + p {
  margin: 102px auto 0;
  position: relative;
}

#Intro h2 + p::before {
  content: "";
  width: 106px;
  height: 2px;
  background-color: #66A6FF;
  position: absolute;
  top: -48px;
  left: calc(50% - 53px);
}

#Intro p {
  text-align: center;
  line-height: 42px;
  max-width: 805px;
  width: 95%;
  margin: 0 auto;
}

#Intro a {
  color: #66A6FF;
  padding: 2px;
  margin: 0 2px;
  background-color: #FAFFD1;
  text-decoration: underline;
}

#Intro .sp_block {
  display: none;
}

#Business {
  padding: 96px 0 80px;
  background-color: #EEFAFF;
}

#Business h2 {
  font-size: 28px;
  font-weight: normal;
  width: 630px;
  margin: 0 auto;
  padding: 0 18px;
  border-left: 2px solid #66A6FF;
  border-right: 2px solid #66A6FF;
  line-height: 30px;
  position: relative;
}

#Business h2 br {
  display: none;
}

#Business h2::before, #Business h2::after {
  content: "";
  width: 165px;
  height: 2px;
  background-color: #66A6FF;
  position: absolute;
  top: calc(50% - 1px);
}

#Business h2::before {
  left: -165px;
}

#Business h2::after {
  right: -165px;
}

#Business h2 + p {
  margin: 40px auto 0;
  text-align: center;
  max-width: 960px;
  width: 95%;
}

#Business h3 {
  font-size: 22px;
  color: #fff;
  max-width: 960px;
  width: 95%;
  padding: 10px 12px 5px;
  margin: 40px auto 0;
  letter-spacing: 2.2px;
  background: linear-gradient(125deg, #66a6ff 0%, #89f7fe 100%);
}

#Business h4 {
  font-size: 18px;
  border-bottom: 1px solid #9BD7E9;
  padding-bottom: 5px;
}

#Business h4 + p {
  margin: 12px 0 0;
  font-size: 14px;
  width: 98%;
}

#Business .show_more_btn {
  font-size: 14px;
  color: #63B5FC;
  position: absolute;
  bottom: 0;
  transition: all .5s;
  border-bottom: 1px solid #fff;
}

#Business .show_more_btn::before {
  content: "";
  width: 84px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all .5s;
}

#Business .show_more_btn::after {
  content: "";
  width: 60px;
  height: 60px;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: -70px;
  top: calc(50% - 32px);
  transition: all .5s;
}

#Business .show_more_btn:hover {
  color: #98DDEE;
  transition: all .5s;
  opacity: 1;
}

#Business .show_more_btn:hover::before {
  background-color: #98DDEE;
  transition: all .5s;
}

#Business .show_more_btn:hover::after {
  background-image: url("../images/show_more_icon_hover.png");
  transition: all .5s;
}

#Business .show_more_btn.solar::after {
  background-image: url("../images/show_more_icon_solar.png");
}

#Business .show_more_btn.solar:hover::after {
  background-image: url("../images/show_more_icon_hover.png");
  transition: all .5s;
}

#Business .show_more_btn.hydro::after {
  background-image: url("../images/show_more_icon_hydro.png");
}

#Business .show_more_btn.hydro:hover::after {
  background-image: url("../images/show_more_icon_hover.png");
  transition: all .5s;
}

#Business .show_more_btn.farming::after {
  background-image: url("../images/show_more_icon_farming.png");
}

#Business .show_more_btn.farming:hover::after {
  background-image: url("../images/show_more_icon_hover.png");
  transition: all .5s;
}

#Business .show_more_btn.roof::after {
  background-image: url("../images/show_more_icon_roof.png");
}

#Business .show_more_btn.roof:hover::after {
  background-image: url("../images/show_more_icon_hover.png");
  transition: all .5s;
}

#Business .show_more_btn.biomass::after {
  background-image: url("../images/show_more_icon_biomass.png");
}

#Business .show_more_btn.biomass:hover::after {
  background-image: url("../images/show_more_icon_hover.png");
  transition: all .5s;
}

#Business .img_box {
  max-width: 960px;
  width: 95%;
  margin: 56px auto 0;
}

#Business .img_box.pc_block {
  display: block;
}

#Business .img_box.sp_block {
  display: none;
}

#Business .business_main_wrap {
  display: flex;
  justify-content: space-between;
  max-width: 960px;
  width: 95%;
  margin: 32px auto 0;
  padding: 32px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 6px #dfdfdf;
}

#Business .business_main_wrap h4 {
  margin: 20px 0 0;
}

#Business .business_main_box {
  width: 48%;
  position: relative;
  padding-bottom: 20px;
}

#Business .business_main_box img {
  width: 100%;
  display: block;
}

#Business .business_main_box:first-of-type .show_more_btn {
  right: 66px;
  bottom: -22px;
}

#Business .business_main_box .block {
  display: flex;
  justify-content: space-between;
  position: relative;
}

#Business .business_main_box .block:first-of-type {
  margin-bottom: 60px;
}

#Business .business_main_box .block:first-of-type .show_more_btn {
  right: 30px;
  bottom: -22px;
}

#Business .business_main_box .block:last-of-type .show_more_btn {
  right: 30px;
  bottom: -42px;
}

#Business .business_main_box .block .img {
  width: 28%;
}

#Business .business_main_box .block .text {
  width: 68%;
}

#Business .business_main_box .block .text p {
  font-size: 14px;
  margin: 8px 0 0;
}

#Business .business_main_box .block .text p.title {
  font-size: 16px;
  margin: 0;
}

#Business .business_main_img {
  width: 23%;
}

#Business .business_main_img img {
  width: 100%;
  display: block;
}

#Business .business_main_img img:last-of-type {
  display: none;
}

#Business .business_main_content {
  width: 77%;
  background-color: #fff;
  padding: 12px;
  border-radius: 0 30px 30px 0;
  box-shadow: 2px 2px 6px #dfdfdf;
}

#Business .business_main_text {
  margin: 12px 0 0;
  display: flex;
  justify-content: space-between;
}

#Business .business_main_text div {
  font-size: 14px;
  position: relative;
}

#Business .business_main_text div:nth-of-type(1) {
  width: 30%;
}

#Business .business_main_text div:nth-of-type(1) .show_more_btn {
  right: 60px;
}

#Business .business_main_text div:nth-of-type(2) {
  width: 23%;
}

#Business .business_main_text div:nth-of-type(2) img {
  width: 100%;
}

#Business .business_main_text div:nth-of-type(2) img:last-of-type {
  display: none;
}

#Business .business_main_text div:nth-of-type(3) {
  width: 40%;
}

#Business .business_main_text div:nth-of-type(3) .title {
  font-size: 16px;
}

#Business .business_main_text div:nth-of-type(3) .title + p {
  margin: 12px 0 0;
}

#Business .business_main_text div:nth-of-type(3) p {
  width: 85%;
}

#Business .business_main_text div:nth-of-type(3) .show_more_btn {
  right: 45px;
}

#Business .business_col2_wrap {
  display: flex;
  justify-content: space-between;
  max-width: 960px;
  width: 95%;
  margin: 56px auto 0;
}

#Business .business_col2_box {
  width: 48%;
  display: flex;
}

#Business .business_col2_box:nth-of-type(1) .show_more_btn {
  bottom: 12px;
  right: 70px;
}

#Business .business_col2_box:nth-of-type(2) .show_more_btn {
  bottom: 12px;
  right: 60px;
}

#Business .business_col2_img {
  width: 47%;
}

#Business .business_col2_img img {
  width: 100%;
  display: block;
  height: 100%;
  object-fit: cover;
  border-radius: 20px 0 0 20px;
}

#Business .business_col2_img img:last-of-type {
  display: none;
}

#Business .business_col2_text {
  width: 53%;
  background-color: #fff;
  border-radius: 0 30px 30px 0;
  box-shadow: 2px 2px 6px #dfdfdf;
  padding: 12px;
  position: relative;
}

#Generation {
  padding: 120px 0;
}

#Generation h2 {
  font-size: 28px;
  font-weight: normal;
  width: 488px;
  margin: 0 auto;
  padding: 0 18px;
  border-left: 2px solid #66A6FF;
  border-right: 2px solid #66A6FF;
  line-height: 30px;
  position: relative;
}

#Generation h2::before, #Generation h2::after {
  content: "";
  width: 236px;
  height: 2px;
  background-color: #66A6FF;
  position: absolute;
  top: calc(50% - 1px);
}

#Generation h2::before {
  left: -236px;
}

#Generation h2::after {
  right: -236px;
}

#Generation h3 {
  font-size: 20px;
  font-weight: normal;
  position: relative;
  padding-left: 45px;
}

#Generation h3::before {
  content: "";
  width: 45px;
  height: 54px;
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 0;
  top: calc(50% - 27px);
}

#Generation h3.pink {
  border-bottom: 2px solid #FBA7A7;
}

#Generation h3.pink::before {
  background-image: url("../images/ping_pink.png");
}

#Generation h3.green {
  border-bottom: 2px solid #34C93E;
}

#Generation h3.green::before {
  background-image: url("../images/ping_green.png");
}

#Generation h3.yellow {
  border-bottom: 2px solid #FBD761;
  margin: 34px 0 0;
}

#Generation h3.yellow::before {
  background-image: url("../images/ping_yellow.png");
}

#Generation h3.blue {
  border-bottom: 2px solid #42BCD1;
  margin: 34px 0 0;
}

#Generation h3.blue::before {
  background-image: url("../images/ping_blue.png");
}

#Generation h3.brown {
  border-bottom: 2px solid #A78A61;
  margin: 34px 0 0;
}

#Generation h3.brown::before {
  background-image: url("../images/ping_brown.png");
}

#Generation .generation_img {
  width: 95%;
  max-width: 960px;
  margin: 40px auto 0;
  position: relative;
}

#Generation .generation_img img {
  width: 100%;
  display: block;
}

#Generation .generation_img div {
  width: 27px;
  height: 34px;
  position: absolute;
}

#Generation .generation_img div::before {
  content: "";
  width: 27px;
  height: 34px;
  background-size: cover;
  background-position: center;
  display: block;
}

#Generation .generation_img div.pink::before {
  background-image: url("../images/map_ping_pink.png");
}

#Generation .generation_img div.pink.iwate1 {
  right: 28%;
  top: 41.2%;
}

#Generation .generation_img div.pink.iwate2 {
  right: 27.2%;
  top: 41.2%;
}

#Generation .generation_img div.pink.miyagi {
  right: 27%;
  top: 45%;
}

#Generation .generation_img div.pink.ibaraki {
  right: 30.5%;
  top: 62.5%;
}

#Generation .generation_img div.pink.saitama4 {
  right: 35.7%;
  top: 63%;
}

#Generation .generation_img div.pink.nagano1 {
  right: 43%;
  top: 58%;
}

#Generation .generation_img div.pink.nagano2 {
  right: 44%;
  top: 59%;
}

#Generation .generation_img div.pink.ishikawa {
  right: 50.5%;
  top: 57%;
}

#Generation .generation_img div.pink.gifu {
  right: 48%;
  top: 66%;
}

#Generation .generation_img div.pink.osaka {
  right: 58.5%;
  top: 72.5%;
}

#Generation .generation_img div.pink.wakayama {
  right: 60%;
  top: 76.5%;
}

#Generation .generation_img div.pink.hyogo {
  right: 64%;
  top: 69.5%;
}

#Generation .generation_img div.pink.ehime {
  right: 76%;
  top: 79%;
}

#Generation .generation_img div.pink.fukuoka1 {
  right: 85%;
  top: 76%;
}

#Generation .generation_img div.pink.fukuoka2 {
  right: 84%;
  top: 76%;
}

#Generation .generation_img div.pink.miyazaki {
  right: 83.5%;
  top: 89%;
}

#Generation .generation_img div.pink.kagoshima1 {
  right: 85.8%;
  top: 91.2%;
}

#Generation .generation_img div.pink.kagoshima2 {
  right: 90.5%;
  top: 89%;
}

#Generation .generation_img div.pink.kagoshima3 {
  right: 89.8%;
  top: 89%;
}

#Generation .generation_img div.pink.kagoshima4 {
  right: 89%;
  top: 89.5%;
}

#Generation .generation_img div.pink.kagoshima5 {
  right: 90%;
  top: 91.5%;
}

#Generation .generation_img div.green::before {
  background-image: url("../images/map_ping_green.png");
}

#Generation .generation_img div.green.ibaraki {
  right: 32%;
  top: 62.8%;
}

#Generation .generation_img div.green.chiba {
  right: 32%;
  top: 66.5%;
}

#Generation .generation_img div.yellow::before {
  background-image: url("../images/map_ping_yellow.png");
}

#Generation .generation_img div.yellow.nagano {
  right: 42%;
  top: 59%;
}

#Generation .generation_img div.blue::before {
  background-image: url("../images/map_ping_blue.png");
}

#Generation .generation_img div.blue.toyama {
  right: 46%;
  top: 56%;
}

#Generation .generation_img div.brown::before {
  background-image: url("../images/map_ping_brown.png");
}

#Generation .generation_img div.brown.tochigi {
  right: 35.5%;
  top: 60%;
}

#Generation .generation_img div.brown.saitama1 {
  right: 37.8%;
  top: 62.5%;
}

#Generation .generation_img div.brown.saitama2 {
  right: 37%;
  top: 63%;
}

#Generation .generation_img div.brown.saitama3 {
  right: 36.3%;
  top: 63%;
}

#Generation .generation_map {
  margin: 40px 0 0;
}

#Generation .generation_map_sp {
  display: none;
}

#Generation .generation_wrap {
  width: 95%;
  max-width: 960px;
  margin: 80px auto 0;
  display: flex;
  justify-content: space-between;
}

#Generation .generation_wrap div:first-of-type {
  width: 67%;
}

#Generation .generation_wrap div:last-of-type {
  width: 30%;
}

#Generation .generation_wrap div:last-of-type h3 + p {
  margin: 28px 0 0;
}

#Generation .generation_wrap div:last-of-type p {
  margin: 8px 0 0;
}

#Generation .generation_wrap div:last-of-type span {
  font-size: 13px;
}

#Generation .generation_list {
  display: flex;
  justify-content: space-between;
  width: 100% !important;
}

#Generation .generation_list ul {
  width: 49%;
  margin-top: 20px;
}

#Generation .generation_list li {
  margin: 8px 0 0;
}

#Generation .generation_list li span {
  font-size: 13px;
}

#Generation .generation_supplement {
  width: 95%;
  max-width: 960px;
  margin: 30px auto 0;
}

#Generation .generation_supplement ul {
  width: 100%;
  max-width: 350px;
  margin-left: auto;
}

#Generation .generation_supplement span {
  font-size: 13px;
}

#viz-client-container {
  margin: 0 auto;
}

#News {
  padding: 64px 0;
  background-color: #EEFAFF;
}

#News h2 {
  font-size: 28px;
  font-weight: normal;
  width: 264px;
  margin: 0 auto;
  padding: 0 18px;
  border-left: 2px solid #66A6FF;
  border-right: 2px solid #66A6FF;
  line-height: 30px;
  position: relative;
}

#News h2::before, #News h2::after {
  content: "";
  width: 298px;
  height: 2px;
  background-color: #66A6FF;
  position: absolute;
  top: calc(50% - 1px);
}

#News h2::before {
  left: -298px;
}

#News h2::after {
  right: -298px;
}

#News h2 + .date {
  margin: 24px 0 0 !important;
}

#News .news_content {
  background-color: #fff;
  padding: 40px 50px;
  width: 95%;
  max-width: 960px;
  margin: 0 auto;
}

#News .news_content .date {
  margin: 12px 0 0;
}

#News .news_content .date .year {
  font-size: 18px;
  font-weight: bold;
}

#News .news_content .date .month {
  font-size: 20px;
  font-weight: bold;
}

#News .news_wrap {
  margin: 12px 0 0;
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
}

#News .news_wrap.year {
  border-bottom: 1px solid #C3E1FB;
}

#News .news_wrap dl {
  display: flex;
  justify-content: space-between;
}

#News .news_wrap dt {
  width: 130px;
}

#News .news_wrap .category {
  width: 120px;
}

#News .news_wrap .category span {
  display: block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 30px;
  padding: 2px;
  font-size: 11px;
  margin: 8px 0 0;
}

#News .news_wrap .category span.lcv {
  background-color: #125737;
}

#News .news_wrap .category span.civil_engineering {
  background-color: #7B7B1E;
}

#News .news_wrap .category span.environment {
  background-color: #227B9D;
}

#News .news_wrap .category span:first-of-type {
  margin: 0;
}

#News .news_wrap .link {
  width: calc(100% - 274px);
}

#News .news_wrap .link a {
  transition: all .5s;
}

#News .news_wrap .link a:hover {
  opacity: 1;
  text-decoration: underline;
  color: #8FD3F4;
}

#News .show_back_number {
  margin: 24px 0 0;
  display: flex;
  justify-content: flex-end;
}

#News .show_back_number a {
  margin-right: 30px;
  position: relative;
}

#News .show_back_number a span {
  color: #fff;
  background: linear-gradient(125deg, #66a6ff 0%, #89f7fe 100%);
  padding: 2px 24px;
  margin-left: 8px;
}

#News .show_back_number a:hover {
  opacity: 1;
  color: #66A6FF;
}

#News .show_back_number a::before {
  content: "";
  width: 430px;
  height: 1px;
  background-color: #66A6FF;
  position: absolute;
  left: 0;
  bottom: -1px;
}

#News .show_back_number a::after {
  content: "";
  width: 19px;
  height: 19px;
  background-size: cover;
  background-image: url("../images/backnumber_icon.png");
  background-position: center;
  position: absolute;
  right: -30px;
  top: calc(50% - 10px);
}

#News .show_back_number_sp {
  display: none;
}

/*-----------------------------------
header
-----------------------------------*/
header {
  background-color: #fff;
  height: 73px;
  width: 100%;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

header .logo {
  margin-left: 82px;
  width: 62px;
}

header .logo h1 {
  height: 54px;
}

header .logo img {
  width: 100%;
  display: block;
}

header .header_nav {
  margin: 0 82px 0 auto;
  width: calc(100% - 176px);
  max-width: 900px;
}

header .header_nav ul {
  display: flex;
  justify-content: space-between;
}

header .header_nav a {
  border-bottom: 1px solid #fff;
  transition: all .5s;
}

header .header_nav a:hover {
  border-bottom: 1px solid #98DDEE;
  transition: all .5s;
}

header .sp_menu_btn {
  display: none;
}

.drawer {
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 9995;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}

.drawer.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s, visibility .5s;
}

.drawer_bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(9, 96, 119, 0.3);
  z-index: 9996;
}

.drawer_content {
  background: linear-gradient(139deg, #89f7fe 0%, #66a6ff 100%);
  position: relative;
  z-index: 9999;
  padding-bottom: 50px;
}

.drawer_head {
  display: flex;
  padding: 20px;
  align-items: center;
}

.drawer_logo {
  width: 37px;
  height: 33px;
}

.drawer_logo img {
  width: 100%;
  display: block;
}

.drawer_close_btn {
  width: 20px;
  height: 20px;
  margin-left: auto;
}

.drawer_close_btn img {
  width: 100%;
  display: block;
}

.drawer_menu {
  margin: 30px 0 0;
}

.drawer_menu a {
  color: #fff;
  font-size: 16px;
  display: block;
  padding: 16px 40px;
  position: relative;
  border-bottom: 1px solid #fff;
}

.drawer_menu a::after {
  content: "";
  width: 12px;
  height: 14px;
  background-image: url("../images/drawer_link_arrow.png");
  background-size: cover;
  position: absolute;
  right: 40px;
  top: calc(50% - 7px);
}

/*-----------------------------------
footer
-----------------------------------*/
footer {
  background-color: #0259a0;
  padding: 20px 0;
  color: #fff;
}

.copyrights {
  text-align: center;
  font-size: 14px;
}

/*-----------------------------------
レスポンシブ
-----------------------------------*/
@media screen and (max-width: 1199px) {
  /*-----------------------------------
common
-----------------------------------*/
  html {
    -webkit-overflow-scrolling: auto;
  }
  /* flame */
  body {
    width: 100%;
    overflow-x: hidden;
  }
  /*-----------------------------------
header
-----------------------------------*/
  header {
    height: 60px;
  }
  header .logo {
    margin-left: 20px;
    width: 37px;
  }
  header .logo h1 {
    height: 32px;
  }
  header .header_nav {
    display: none;
  }
  header .sp_menu_btn {
    width: 46px;
    padding: 10px;
    cursor: pointer;
    margin: 0 20px 0 auto;
    display: block;
  }
  header .sp_menu_btn span {
    width: 100%;
    height: 2px;
    margin: 6px 0 0;
    display: block;
    background: linear-gradient(139deg, #89f7fe 0%, #66a6ff 100%);
  }
  header .sp_menu_btn span:first-of-type {
    margin: 0;
  }
  /*-----------------------------------
parts style
-----------------------------------*/
  .modal .roof_wrap {
    flex-wrap: wrap;
    margin: 10px 0 0;
  }
  .modal .roof_box {
    width: 48%;
    margin: 20px 0 0;
  }
  .modal .roof_box:first-of-type {
    width: 48%;
  }
  .modal .roof_box:first-of-type img {
    width: 100%;
  }
  .modal .roof_box:first-of-type img:last-of-type {
    display: none;
  }
  /*-----------------------------------
page style
-----------------------------------*/
  .main_visual {
    margin: 60px 0 0;
  }
  .main_visual::after {
    height: 15vh;
    max-height: 100px;
  }
}

@media screen and (max-width: 1000px) {
  #monitoring .monitoring_box {
    display: none !important;
  }
  .monitoring_box_sp {
    display: block !important;
    position: relative;
    background-color: #fff;
    padding: 2px 0;
    overflow: hidden;
  }
  .monitoring_box_sp a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
}

@media screen and (max-width: 800px) {
  body {
    font-size: 14px;
  }
  /*-----------------------------------
parts style
-----------------------------------*/
  .pc_ib {
    display: none;
  }
  .sp_ib {
    display: inline-block;
  }
  .modal h2 {
    font-size: 18px;
    padding: 0 0 10px 20px;
    position: relative;
  }
  .modal h2::before {
    width: 40px;
    height: 40px;
  }
  .modal h2::after {
    content: none;
  }
  .modal h2 + p {
    margin: 16px 0 0;
    text-align: left;
  }
  .modal_content {
    width: 90%;
    height: 85%;
    border-radius: 15px;
  }
  .modal_inner {
    padding: 24px 20px 32px;
  }
  .modal .close_btn {
    top: calc(7.5% - 20px);
    right: calc(5% - 20px);
    width: 40px;
    height: 40px;
  }
  .modal .close_btn a::before {
    width: 40px;
    height: 40px;
  }
  .modal .close_btn_sp {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0;
    top: calc(50% - 26px);
  }
  .modal .close_btn_sp a {
    display: block;
  }
  .modal .close_btn_sp a::before {
    content: "";
    width: 40px;
    height: 40px;
    background-image: url("../images/close_icon.png");
    background-size: contain;
    display: block;
    transition: all .5s;
  }
  .modal .close_btn_sp a:hover {
    opacity: 1;
  }
  .modal .close_btn_sp a:hover::before {
    background-image: url("../images/close_icon_hover.png");
    transition: all .5s;
  }
  .modal .solar_list {
    display: block;
    margin: 24px 0 0;
  }
  .modal .solar_list_box {
    width: 100%;
    margin: 32px 0 0;
  }
  .modal .solar_list_box:first-of-type {
    margin: 0;
  }
  .modal .solar_img {
    width: 100%;
  }
  .modal .farming_wrap {
    display: block;
    margin: 16px 0 0;
  }
  .modal .farming_wrap:last-of-type {
    margin: 60px 0 0;
  }
  .modal .farming_img {
    width: 100%;
  }
  .modal .farming_text {
    width: 100%;
    margin: 28px 0 0;
  }
  .modal .farming_text h3 {
    font-size: 16px;
    margin: 26px 0 0;
  }
  .modal .farming_text h3::before {
    bottom: inherit;
    top: -4px;
  }
  .modal .farming_text li {
    margin: 16px 0 0;
    line-height: 23px;
  }
  .modal .farming_text li:first-of-type {
    margin: 0;
  }
  .modal .farming_text li::before {
    top: 7px;
  }
  .modal .farming_box {
    width: 100%;
    margin: 60px 0 0;
  }
  .modal .farming_box h4 {
    font-size: 16px;
  }
  .modal .roof_img_wrap {
	display: block;
	margin: 16px 0 0;
  }		
  .modal .roof_img {
    width: 100%;
  }
  .modal .roof_text {
  width: 100%;
  }
  .modal .hydro_wrap {
    display: block;
    margin: 16px 0 0;
  }
  .modal .hydro_wrap.last .hydro_img, .modal .hydro_wrap.last .hydro_text {
    width: 100%;
  }
  .modal .hydro_wrap.last .hydro_img {
    margin: 16px 0 0;
  }
  .modal .hydro_img {
    width: 100%;
    max-width: inherit;
  }
  .modal .hydro_text {
    width: 100%;
    margin: 16px 0 0;
  }
  .modal .hydro_text p {
    margin: 16px 0 0;
  }
  .modal .hydro_title {
    font-size: 16px;
    margin: 60px 0 0;
  }
  .modal .hydro_title {
    margin: 32px 0 0;
  }
  .modal .biomass_wrap {
    display: block;
    margin: 16px 0 0;
  }
  .modal .biomass_img {
    width: 100%;
  }
  .modal .biomass_img.wide {
    width: 100%;
    max-width: inherit;
  }
  .modal .biomass_text {
    width: 100%;
    margin: 16px 0 0;
  }
  .modal .biomass_title {
    font-size: 16px;
    margin: 64px 0 0;
  }
  .modal .biomass_title span {
    display: none;
  }
  .modal .biomass_title_sub {
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin: 16px 0 0;
    text-align: center;
  }
  .modal .biomass_icon_title {
    font-size: 16px;
  }
  .modal .biomass_icon_title::before {
    bottom: inherit;
    top: -2px;
  }
  .modal .biomass_title_h4::before {
    top: 7px;
  }
  .modal .biomass_info {
    width: 100%;
    margin: 32px 0 0;
  }
  .modal .biomass_flow {
    display: block;
  }
  .modal .biomass_flow.woodpower .biomass_col3_box.main {
    width: 100%;
  }
  .modal .biomass_flow.woodpower .biomass_col3_box.main img {
    width: 50%;
  }
  .modal .biomass_col3_box {
    width: 100%;
    margin: 64px 0 0;
  }
  .modal .biomass_col3_box:first-of-type {
    margin: 0;
  }
  .modal .biomass_col3_box:first-of-type::after {
    right: inherit;
    top: inherit;
    bottom: -56px;
    left: calc(50% - 5px);
    transform: rotate(90deg);
  }
  .modal .biomass_col3_box:nth-of-type(2)::after {
    content: none;
  }
  .modal .biomass_link br {
    display: block;
  }
  .modal .biomass_link span {
    display: none;
  }
  .modal .biomass_link a {
    font-weight: bold;
    padding: 10px 16px 8px;
    width: 100%;
    border: 1px solid #66A6FF;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .modal .biomass_link a::after {
    right: 16px;
    bottom: calc(50% - 10px);
  }
  /*-----------------------------------
footer style
-----------------------------------*/
  footer {
    padding: 16px 0;
  }
  /*-----------------------------------
page style
-----------------------------------*/
  .main_visual::after {
    height: 10vh;
  }
  .main_visual .catch_copy {
    width: 280px;
  }
  .main_visual .catch_copy p {
    font-size: 22px;
  }
  .main_visual .catch_copy p br {
    display: block;
  }
  #monitoring {
    margin: -2vh auto 0;
  }
  #monitoring .monitoring_content {
    padding: 8px;
  }
  #monitoring .monitoring_show_more {
    margin-bottom: 4px;
  }
  #Intro {
    margin-top: 130px;
    margin-bottom: 56px;
    padding: 0 20px;
  }
  #Intro::before, #Intro::after {
    display: none;
  }
  #Intro h2 {
    font-size: 20px;
  }
  #Intro h2::before {
    width: 50px;
    height: 50px;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
  }
  #Intro h2::after {
    width: 310px;
    height: 12px;
    left: 50%;
    transform: translateX(-50%);
  }
  #Intro h2 + p::before {
    width: 37px;
    left: 50%;
    transform: translateX(-50%);
  }
  #Intro p {
    line-height: 2;
    text-align: left;
    width: 100%;
  }
  #Business {
    padding: 40px 0;
  }
  #Business h2 {
    font-size: 18px;
    width: 100%;
    line-height: 32px;
    border-left: 22px solid #66A6FF;
    border-right: none;
    padding: 0 10px;
  }
  #Business h2 br {
    display: block;
  }
  #Business h2::before, #Business h2::after {
    content: none;
  }
  #Business h2 + p {
    margin: 24px auto 0;
    width: 100%;
    padding: 0 20px;
    text-align: left;
  }
  #Business h3 {
    font-size: 16px;
    width: calc(100% - 40px);
    padding: 8px 12px 5px;
    margin: 16px auto 0;
  }
  #Business h4 {
    font-size: 16px;
  }
  #Business .img_box {
    width: 100%;
    margin: 32px auto 0;
    padding: 0 20px;
  }
  #Business .img_box.pc_block {
    display: none;
  }
  #Business .img_box.sp_block {
    display: block;
  }
  #Business .show_more_btn {
    display: block;
    position: relative;
    margin: 30px 0 0;
    text-align: right;
    padding-right: 80px;
    right: 0 !important;
  }
  #Business .show_more_btn::before {
    left: inherit;
    right: 56px;
    width: 96px;
  }
  #Business .show_more_btn::after {
    right: 0;
    bottom: -15px;
  }
  #Business .business_main_wrap {
    display: block;
    width: calc(100% - 40px);
    padding: 0;
    margin: 20px 20px 0;
  }
  #Business .business_main_img {
    width: 100%;
  }
  #Business .business_main_img img:first-of-type {
    display: none;
  }
  #Business .business_main_img img:last-of-type {
    display: block;
  }
  #Business .business_main_box {
    width: 100%;
  }
  #Business .business_main_box h4 {
    margin: 20px 20px 0;
  }
  #Business .business_main_box h4 + p {
    width: 100%;
    padding: 0 20px;
  }
  #Business .business_main_box:first-of-type .show_more_btn {
    bottom: 0;
    right: 20px !important;
  }
  #Business .business_main_box:last-of-type {
    padding: 0 20px 20px;
    margin: 20px 0 0;
  }
  #Business .business_main_box .block:first-of-type .show_more_btn {
    bottom: 0;
  }
  #Business .business_main_box .block:last-of-type .show_more_btn {
    bottom: 5px;
  }
  #Business .business_col2_wrap {
    display: block;
    width: 100%;
    margin: 40px auto 0;
    padding: 0 20px;
  }
  #Business .business_col2_box {
    width: 100%;
    display: block;
    margin: 40px 0 0;
  }
  #Business .business_col2_box:nth-of-type(1) .show_more_btn {
    bottom: 0;
  }
  #Business .business_col2_img {
    width: 100%;
  }
  #Business .business_col2_img img {
    object-fit: contain;
    border-radius: 0;
  }
  #Business .business_col2_img img:first-of-type {
    display: none;
  }
  #Business .business_col2_img img:last-of-type {
    display: block;
  }
  #Business .business_col2_text {
    width: 100%;
    border-radius: 0 0 15px 15px;
    padding: 12px 20px 24px;
  }
  #Generation {
    padding: 52px 0;
  }
  #Generation h2 {
    font-size: 18px;
    width: 100%;
    padding: 0 10px;
    border-left: 23px solid #66A6FF;
    border-right: none;
  }
  #Generation h2::before, #Generation h2::after {
    content: none;
  }
  #Generation h3 {
    font-size: 18px;
    padding-left: 30px;
  }
  #Generation h3::before {
    width: 26px;
    height: 33px;
    top: calc(50% - 16px);
  }
  #Generation h3.yellow, #Generation h3.blue {
    margin: 40px 0 0;
  }
  #Generation .generation_img {
    width: 100%;
  }
  #Generation .generation_img div {
    width: 10px;
    height: 13px;
  }
  #Generation .generation_img div::before {
    width: 10px;
    height: 13px;
  }
  #Generation .generation_img div.pink.fukuoka {
    right: 85%;
    top: 77%;
  }
  #Generation .generation_img div.pink.hyogo {
    right: 64%;
    top: 71.5%;
  }
  #Generation .generation_img div.pink.kagoshima1 {
    right: 86%;
    top: 92.5%;
  }
  #Generation .generation_map {
    padding: 0 20px;
  }
  #Generation .generation_map #map {
    max-height: 500px;
  }
  #Generation .generation_wrap {
    width: 100%;
    margin: 30px auto 0;
    padding: 0 20px;
    display: block;
  }
  #Generation .generation_wrap div:first-of-type {
    width: 100%;
  }
  #Generation .generation_wrap div:last-of-type {
    margin: 40px 0 0;
    width: 100%;
  }
  #Generation .generation_wrap div:last-of-type p {
    margin: 8px 0 0;
  }
  #Generation .generation_list {
    margin-top: 0 !important;
    display: block;
  }
  #Generation .generation_list ul {
    margin-top: 0;
    width: 100%;
  }
  #Generation .generation_list ul:first-of-type {
    margin: 28px 0 0;
  }
  #Generation .generation_list li {
    margin: 8px 0 0;
  }
  #Generation .generation_supplement {
    width: 100%;
    padding: 0 20px;
  }
  #Generation .generation_supplement ul {
    margin-left: 0;
  }
  #News {
    padding: 40px 20px;
  }
  #News h2 {
    border-right: none;
    border-left: none;
    font-size: 18px;
    padding-left: 8px;
    width: 100%;
  }
  #News h2::before {
    width: 40px;
    height: 22px;
    top: calc(50% - 11px);
    left: -40px;
  }
  #News h2::after {
    content: none;
  }
  #News .news_content {
    padding: 24px 20px;
    width: 100%;
  }
  #News .news_content .date {
    margin: 30px 0 0;
  }
  #News .news_content .date .year {
    font-size: 14px;
  }
  #News .news_content .date .month {
    font-size: 18px;
  }
  #News .news_wrap {
    padding-bottom: 30px;
  }
  #News .news_wrap dl {
    display: block;
  }
  #News .news_wrap dt {
    width: 100%;
  }
  #News .news_wrap .category {
    width: 100%;
    margin: 8px 0 0;
  }
  #News .news_wrap .category span {
    display: inline-block;
    padding: 2px 16px;
    margin: 0;
  }
  #News .news_wrap .link {
    width: 100%;
    margin: 20px 0 0;
  }
  #News .show_back_number {
    display: none;
  }
  #News .show_back_number_sp {
    display: block;
    margin: 30px 0 0;
    text-align: center;
    padding: 0 20px;
  }
  #News .show_back_number_sp span {
    color: #fff;
    font-size: 16px;
    padding: 12px 24px 10px;
    margin: 8px 0 0;
    background: linear-gradient(125deg, #66a6ff 0%, #89f7fe 100%);
    position: relative;
    display: block;
    text-align: left;
  }
  #News .show_back_number_sp span::after {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("../images/backnumber_icon.png");
    background-size: cover;
    position: absolute;
    top: calc(50% - 9px);
    right: 20px;
  }
  .monitoring_tableau {
    display: none !important;
  }
  .monitoring_tableau_sp {
    margin: 120px auto 80px;
    display: block !important;
    width: 100%;
    max-width: 400px;
  }
}

@media screen and (max-width: 600px) {
  /*-----------------------------------
parts style
-----------------------------------*/
  .modal .roof_wrap {
    display: block;
  }
  .modal .roof_box {
    margin: 30px 0 0;
    width: 100%;
  }
  .modal .roof_box:first-of-type {
    width: 100%;
  }
  /*-----------------------------------
page style
-----------------------------------*/
  .main_visual::after {
    height: 7vh;
    max-height: 50px;
  }
  .main_visual .catch_copy p {
    font-size: 18px;
  }
  #monitoring {
    margin: 0 auto 0;
  }
  #Intro .sp_block {
    display: block;
  }
  #Intro a {
    word-break: keep-all;
  }
  #Generation .generation_map {
    display: none;
  }
  #Generation .generation_map #map {
    max-height: 380px;
  }
  #Generation .generation_map_sp {
    margin: 20px 0 0;
    display: block;
  }
}

@media screen and (max-width: 600px) and (max-width: 400px) {
  .main_visual::after {
    height: 4vh;
  }
}