@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Sawarabi+Mincho&family=Zen+Old+Mincho:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,900;1,400&display=swap');


.check {
  text-align: center;
  margin-top: 5.0rem;
}

.check a {
  display: inline-block;
  background: #35B872;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
  border-radius: 10.0rem;
  border: solid 3px #35B872;
  transition: all 0.2s ease;
}

.check a div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 1.0rem 2.0rem;
  padding: 0 4.0rem;
  position: relative;
}

.check a div::after {
  content: "▲";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 0;
  color: #C6C6C6;
  background-color: #fff;
  font-size: 1.2rem;
  line-height: 1.0;
  letter-spacing: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  transform: translate(0, -50%) rotate(90deg);
  transition: all 0.2s ease;
}

.check a div span {
  display: block;
  width: 30%;
  max-width: 100px;
}

.check a div p {
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.0rem;
  text-align: left;
  margin: 0 2.0rem;
  word-break: keep-all;
  overflow-wrap: break-word;
  transition: all 0.2s ease;
}

.check a:hover {
  background: #fff;
}

.check a:hover p {
  color: #35B872;
}

.check a:hover div::after {
  color: #fff;
  background-color: #C6C6C6;
}

@media screen and (max-width:768px) {
  .check a div p {
    margin-top: 2.0rem;
  }
}


.cause {
  margin-top: 5.0rem;
}

.cause dt {
  background-color: #F0F3F5;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
  position: relative;
  font-weight: bold;
  padding: 0.7rem 4.0rem;
  margin-top: 4.0rem;
  color: #3c3c3c;
}

.cause dt::after {
  content: "";
  display: block;
  width: 1.0rem;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 2.0rem;
  background-color: #E33249;
}

.cause dd {
  margin: 2.0rem 1.0rem;
  color: #3c3c3c;
}

.cause2 {
  margin-top: 5.0rem;
}

.cause2 dt {
  background-color: #F0F3F5;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
  position: relative;
  font-weight: bold;
  padding: 0.7rem 4.0rem;
  margin-top: 4.0rem;
  color: #3c3c3c;
}

.cause2 dt::after {
  content: "";
  display: block;
  width: 1.0rem;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 2.0rem;
  background-color: #EBA01F;
}

.cause2 dd {
  margin: 2.0rem 1.0rem;
  color: #3c3c3c;
}

.cause2 dd div {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.0rem;
}

.cause2 dd div span {
  width: 50%;
}

@media screen and (max-width:768px) {
  .cause2 dd div span {
    width: 1000%;
  }
}

.cause2 dd>span {
  display: block;
  margin-top: 2.0rem;
}

.power_saving {
  text-align: center;
  margin-top: 2.0rem;
}

.power_saving h3 {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  position: relative;
  word-break: keep-all;
  overflow-wrap: break-word;
  padding: 0.3rem 2.0rem;
}

.power_saving h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #707070;
  position: absolute;
  bottom: 0;
  left: 0;
}

.power_saving ul {
  display: block;
  width: 95%;
  max-width: 500px;
  margin: 2.0rem auto 0;
  border: solid #9B9B9B 1.5rem;
  padding: 1.0rem 4.0rem;
  text-align: left;
}

.power_saving ul li {
  margin: 0.5rem 0rem;
  padding: 0;
}

.power_saving ul li::before {
  content: "● ";
}

#column p>strong {
  color: #A81B4B;
}

#column p {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

#column .item {
  margin-top: 2.0rem;
  background-color: #FFF5DB;
  padding: 2.0rem;
}

#column .item>div {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 4.0rem;
}

#column .item>div>div:nth-of-type(1) {
  width: 30%;
}

#column .item>div>div:nth-of-type(2) {
  width: 65%;
}

#column .item>div>div h3 {
  font-weight: bold;
  padding-left: 1.5rem;
  word-break: keep-all;
  overflow-wrap: break-word;
  position: relative;
}

#column .item>div>div h3::before {
  content: "";
  display: block;
  width: 0.7rem;
  height: 100%;
  background-color: #457B58;
  position: absolute;
  top: 0;
  left: 0;
}

#column .item>div>div h3.orange::before {
  background-color: #FFAA4A;
}

#column .item>div>div h3.pink::before {
  background-color: #FE97C4;
}

#column .item>div>div p {
  margin-top: 1.0rem;
}

#column .item>div>div p a {
  color: #1492E6;
  text-decoration: underline;
}

#column .item>span {
  display: block;
  width: 100%;
  margin-top: 2.0rem;
  text-align: center;
}

#column .item>span {
  display: block;
  margin-top: 2.0rem;
  width: 100%;
  text-align: center;
}

#column .item>span a {
  display: inline-block;
  background: #000;
  color: #fff;
  font-size: 1.6rem;
  padding: 0.7rem 5.0rem;
  border-radius: 5.0rem;
  transition: all 0.2s ease;
  position: relative;
}

#column .item>span a:hover {
  background: #fff;
}

#column .item>span a:after {
  content: "▲";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 2.0rem;
  color: #707070;
  background-color: #fff;
  font-size: 1.0rem;
  line-height: 1.0;
  width: 2.0rem;
  height: 2.0rem;
  border-radius: 50%;
  transform: translate(0, -50%) rotate(90deg);
}





@media screen and (max-width:768px) {
  #column .item>div>div:nth-of-type(1) {
    width: 40%;
  }

  #column .item>div>div:nth-of-type(2) {
    width: 90%;
    margin-top: 2.0rem;
  }
}

#column .item2 {
  margin: 5.0rem 0 0;
}

#column .item2 h3 {
  background-color: #F0F3F5;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
  position: relative;
  font-weight: bold;
  padding: 0.7rem 24.0rem 0.7rem 4.0rem;
  margin-top: 4.0rem;
  color: #3c3c3c;
}

#column .item2 h3::before {
  content: "";
  display: block;
  width: 1.0rem;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 2.0rem;
  background-color: #A81B4B;
}

#column .item2 h3 span {
  display: block;
  width: 20.0rem;
  position: absolute;
  right: 2.0rem;
  bottom: 1.0rem;
}






#column .kando {
  margin-top: 5.0rem;
  display: flex;
  flex-wrap: wrap;
}

#column .kando h3 {
  text-align: center;
  width: 100%;
}

#column .kando h3 strong {
  display: inline-block;
  padding: 0.3rem 1.0rem;
  position: relative;
  font-weight: bold;
  font-size: 1.6rem;
}

#column .kando h3 strong::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 5px, #EBA01F 5px, #EBA01F 10px);
}

#column .kando h3 span {
  display: inline-block;
  margin: 1.0rem 0;
  padding: 0.3rem 2.0rem;
  position: relative;
  font-weight: bold;
  font-size: 1.6rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}

#column .kando h3 span:before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #3c3c3c;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-15deg);
}

#column .kando h3 span:before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #3c3c3c;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-15deg);
}

#column .kando h3 span:after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #3c3c3c;
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(15deg);
}

#column .kando>a {
  display: block;
  width: 25%;
  margin-top: 1.0rem;
}

@media screen and (max-width:768px) {
  #column .kando>a {
    width: 50%;
  }

  #column .kando>a:nth-of-type(3) {
    margin-top: 0;
  }

  #column .kando>a:nth-of-type(4) {
    margin-top: 0;
  }
}

#column .kando>span {
  display: block;
  margin-top: 2.0rem;
  width: 100%;
  text-align: center;
}

#column .kando>span a {
  display: inline-block;
  background: #000;
  color: #fff;
  border: solid 2px #000;
  font-size: 1.6rem;
  padding: 0.7rem 5.0rem;
  border-radius: 5.0rem;
  transition: all 0.2s ease;
  position: relative;
}

#column .kando>span a:hover {
  background: #fff;
  color: #000;
}

#column .kando>span a:after {
  content: "▲";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 2.0rem;
  color: #707070;
  background-color: #fff;
  font-size: 1.0rem;
  line-height: 1.0;
  width: 2.0rem;
  height: 2.0rem;
  border-radius: 50%;
  transform: translate(0, -50%) rotate(90deg);
}

#column .kando>span a:hover:after {
  color: #fff;
  background-color: #707070;
}



/* 
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Sawarabi Mincho', serif;
font-family: 'Zen Old Mincho', serif;
font-family: 'Noto Sans', sans-serif; 
*/