@charset "utf-8";
/* 上板橋LIFE */
#life ul li h4 {
  font-size: 100%;
}
#life ul li h4 small {
  display: block;
}
#life ul li p {
  padding: 0 0 20px;
  font-size: 80%;
  line-height: 1.4em;
  text-align: left;
}
#S01 {
  padding: 0 0 5%;
}
#S01 .detail {
  padding: 50px 0 50px;
  border-bottom: 1px dashed #888;
}
#S01 h2 {
  letter-spacing: 50px;
  text-indent: 50px;
  font-size: 200%;
  font-weight: 400;
  color: #888;
}
#S02 {}
#S02 .detail {
  padding: 0 0 50px;
}
#S02 .detailBox {
  padding: 0 0 40px;
}
#S02 .detailBox h4 {
  border-bottom: 1px solid #666;
}
#S02 .detailBox h5 {
  font-size: 100%;
}
#S02 .detailBox p {
  padding: 10px;
  line-height: 1.4em;
  font-size: 90%;
  text-align: left;
}
#S02 .leftBox, #S02 .rightBox {
  background: #ebecec;
  padding: 20px;
  margin: 10px;
}
#S02 .detailBox ul li h4 {
  border-bottom: none;
}
#S03 {
  padding: 5% 0;
}
#S03 h2 {
  padding: 10px 0 30px;
}
#S03 .detailBox {
  flex-direction: row-reverse;
  padding: 30px 0;
}
#S03 .leftBox, #S03 .rightBox {
  margin: 0 20px;
}
#S03 .leftBox {
  width: 300px;
}
#S03 .rightBox {
  width: 800px;
}
#S03 #c01 .leftBox {
  width: 200px;
}
#S03 #c01 .rightBox {
  width: 900px;
}
#S03 .detailBox h4 {
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  text-align: left;
  padding: 10px;
}
#S03 .detailBox p {
  padding: 10px 10px;
  text-align: left;
  font-size: 90%;
  line-height: 1.6em;
}
#S03 #c01 {
  background: #ebecec;
}
#systemBox {}
#systemBox ul {
  flex-wrap: wrap;
}
#systemBox ul li {
  background: #999;
  margin: 5px;
  width: calc(100% / 2 - 10px);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
#systemBox ul li h3 {
  font-size: 130%;
  letter-spacing: 1px;
  color: #fff;
  border-bottom: 1px solid #ffffff91;
  padding: 10px 0 5px;
  width: 80%;
  margin: 0 0 10px;
}
#systemBox ul li h3 small {
  color: #fff;
}
#systemBox ul li p {
  text-align: center;
  color: #fff;
  padding: 0 0 10px;
  font-size: 90%;
}
/*----------------------------------------------------------- LIFEINFORMATION */
#lifeInfo {
  padding: 30px 0 0;
}
#lifeInfo h3 {
  background: #949495;
  color: #ffffff;
  padding: 10px;
  font-size: 110%;
  text-align: left;
}
#lifeInfo .detail {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0 30px;
  max-width: 1200px;
}
#lifeInfo dl {
  width: calc(100% / 2 - 40px);
  border-bottom: 1px dashed #999999;
  margin: 0 10px 5px;
  justify-content: space-between;
  padding: 0;
}
#lifeInfo dt {
  width: calc(100% - 180px);
  color: inherit;
  background: inherit;
  padding: 5px;
  font-size: 100%;
}
#lifeInfo dd {
  width: 180px;
  background: inherit;
  text-align: right;
  padding: 5px;
  font-size: 80%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/*----------------------------------------------------------- 1024px */
@media screen and (max-width: 1024px) {
  h2.title {
    font-size: 380%;
  }
}
/*----------------------------------------------------------- 812px */
@media screen and (max-width: 812px) {
  #S03 .detailBox {
    flex-flow: column;
  }
  #S03 #c01 .leftBox, #S03 .leftBox {
    max-width: 300px;
    width: fit-content;
    margin: auto;
    padding: 0 0 20px;
  }
  #S03 .rightBox, #S03 #c01 .rightBox {
    width: auto;
  }
  #systemBox ul li {
    width: 100%;
  }
}
/*----------------------------------------------------------- 768px */
@media screen and (max-width: 768px) {
  #lifeInfo dl {
    width: 100%;
  }
  #life .detailBox h3 {
    font-size: 110%;
  }
}
/*----------------------------------------------------------- 640px */
@media screen and (max-width: 640px) {
  #lifeInfo h3 {
    padding: 8px;
    font-size: 100%;
  }
  #lifeInfo dt {
    width: auto;
    font-size: 90%;
  }
  #lifeInfo dd {
    width: auto;
  }
  #S02 .leftBox, #S02 .rightBox {
    margin: 0 0 10px;
  }
  #systemBox ul li h3 {
    font-size: 110%;
  }
  #systemBox ul li p {
    font-size: 80%;
  }
}
/*----------------------------------------------------------- 480px */
@media screen and (max-width: 480px) {
  #life .detailBox p {
    padding: 10px 0;
  }
  #S01 h2 {
    font-size: 180%;
}
}