/* arguments inittial */
/* font style */
/* site style */
/* [ opacity ]
-------------------------------------------------*/
/* [ display style ]
-------------------------------------------------*/
/* [ background-image ]
-------------------------------------------------*/
/* [ writing-mode ]
-------------------------------------------------*/
/* [ illustrator & photoshop letter spacing ]
-------------------------------------------------*/
/* [ easy breakpoint ]
-------------------------------------------------*/
/* [ easy transform ]
-------------------------------------------------*/
.caption {
  text-align: left;
}

.fv {
  position: relative;
  height: auto;
  padding-top: 55px;
  min-height: 400px;
  background-image: url("../img/brand/fv-bg.jpg");
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .fv {
    padding-top: 110px;
    min-height: 600px;
    background-image: url("../img/brand/fv-bg-pc.jpg");
  }
}

.fv .caption {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #fff;
  font-size: 10px;
}

.fv-area {
  position: relative;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .fv-area {
    max-height: 718px;
    height: auto;
  }
}

.radius {
  border-radius: 15px;
}

.subtitle {
  display: inline;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .subtitle {
    font-size: 30px;
  }
}

.subtitle span {
  display: inline-block;
  padding-bottom: 0px;
  border-bottom: double 5px #000;
}

.subtitle .noborder {
  border: none;
}

.subtitle .noborder span {
  border: none;
}

.subtitle sup {
  font-size: 10px;
}

.sec01 {
  padding: 30px 15px;
}

.sec01-flex {
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.sec01-title {
  font-size: 10px;
  letter-spacing: 0.5px;
  padding-bottom: 3px;
  border-bottom: 2px dotted #595757;
}

@media (min-width: 768px) {
  .sec01-title {
    font-size: 19px;
    border-bottom: 4px dotted #595757;
  }
}

.sec01-title .big {
  font-size: 13px;
  font-weight: bold;
}

@media (min-width: 768px) {
  .sec01-title .big {
    font-size: 24px;
  }
}

.sec01-text {
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 768px) {
  .sec01-text {
    font-size: 16px;
    line-height: 2;
  }
}

.sec01-subtitle {
  text-align: center;
  width: 100%;
  padding-bottom: 20px;
  position: relative;
  z-index: 4;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .sec01-subtitle {
    margin-top: 0;
  }
}

.sec01-subtitle-h2 {
  font-weight: bold;
  font-size: 18px;
}

@media (min-width: 768px) {
  .sec01-subtitle-h2 {
    font-size: 24px;
  }
}

.sec02,
.sec03,
.sec04,
.sec05 {
  background: #fcfcea;
  padding: 30px 15px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .sec02,
  .sec03,
  .sec04,
  .sec05 {
    gap: 50px;
  }
}

.sec02-subtitle {
  color: #0071bc;
  border-color: #0071bc;
}

.sec02-subtitle span {
  border-color: #0071bc;
}

.sec02-technology {
  padding: 15px;
  background: #fff;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.sec02-technology-title {
  font-size: 11px;
  text-align: center;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .sec02-technology-title {
    font-size: 21px;
  }
}

.sec02-technology-title .middle {
  font-size: 18px;
  font-weight: bold;
}

@media (min-width: 768px) {
  .sec02-technology-title .middle {
    font-size: 30px;
  }
}

.sec02-technology-title .middle sup {
  font-weight: normal;
  font-size: 10px;
}

.sec02-technology-title .small {
  font-size: 10px;
  font-weight: bold;
}

@media (min-width: 768px) {
  .sec02-technology-title .small {
    font-size: 14px;
  }
}

.sec02-technology-text {
  font-size: 10px;
}

@media (min-width: 768px) {
  .sec02-technology-text {
    font-size: 15px;
  }
}

.sec02-technology-text sup {
  font-weight: normal;
  font-size: 10px;
}

.sec02-technology-caption {
  text-align: center;
}

.sec02-technology-caption .caption {
  font-size: 10px;
  display: inline-block;
  color: #515151;
  letter-spacing: 0;
}

.sec02-box {
  max-width: 950px;
}

.sec02-box-flex {
  display: flex;
  flex-direction: column;
  max-width: 950px;
  gap: 15px;
}

@media (min-width: 768px) {
  .sec02-box-flex {
    flex-direction: row;
    gap: 20px;
  }
}

.sec02-box-flex .image {
  position: relative;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .sec02-box-flex .image {
    font-size: 18px;
  }
}

.sec02-box-flex .image .top {
  position: absolute;
  top: 10px;
  left: 5px;
}

@media (min-width: 768px) {
  .sec02-box-flex .image .top {
    top: 15px;
    left: 15px;
  }
}

.sec02-box-flex .image .bottom {
  position: absolute;
  bottom: 10px;
  left: 5px;
}

@media (min-width: 768px) {
  .sec02-box-flex .image .bottom {
    bottom: 15px;
    left: 15px;
  }
}

.sec02-box-flex .image .small {
  font-size: 10px;
}

.sec02-box .caption {
  margin-top: 5px;
  color: #515151;
  font-size: 10px;
  letter-spacing: 0;
}

.sec02-box .caption.red {
  color: #e50012;
}

.sec02-detail-text {
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  margin-top: -10px;
}

@media (min-width: 768px) {
  .sec02-detail-text {
    font-size: 21px;
    margin-bottom: -15px;
  }
}

.sec02-detail-text sup {
  font-weight: normal;
  font-size: 10px;
}

.sec03-subtitle {
  color: #44af35;
  border-color: #44af35;
}

.sec03-subtitle span {
  border-color: #44af35;
}

.sec03-subtitle .noborder {
  font-size: 10px;
  display: block;
  margin-bottom: -10px;
}

@media (min-width: 768px) {
  .sec03-subtitle .noborder {
    font-size: 14px;
  }
}

.sec03-energy {
  max-width: 950px;
}

.sec03-energy-text {
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .sec03-energy-text {
    font-size: 15px;
  }
}

.sec03-energy-text sup {
  font-weight: normal;
  font-size: 10px;
}

.sec03-energy-flex {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (min-width: 768px) {
  .sec03-energy-flex {
    flex-direction: row;
  }
}

.sec03-energy-flex-col {
  display: flex;
  flex-direction: column;
  background: #fff;
}

@media (min-width: 768px) {
  .sec03-energy-flex-col {
    width: calc((100% - 60px) / 3);
  }
}

.sec03-energy-flex-col .title {
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 13px;
  background: #fffdd7;
}

.sec03-energy-flex-col .title .bg {
  background: #a99b8b;
  padding: 5px 15px;
  line-height: 1;
  display: inline-block;
}

@media (min-width: 768px) {
  .sec03-energy-flex-col .title .bg {
    display: block;
  }
}

@media (min-width: 768px) {
  .sec03-energy-flex-col .title {
    font-size: 21px;
  }
}

.sec03-energy-flex-col .text {
  background: #fcfcea;
  padding: 15px 0;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.1px;
}

@media (min-width: 768px) {
  .sec03-energy-flex-col .text {
    font-size: 12px;
  }
}

.sec03-energy .detail-title {
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0;
  text-align: center;
  padding: 15px 15px;
}

@media (min-width: 768px) {
  .sec03-energy .detail-title {
    font-size: 14px;
  }
}

.sec03-energy .detail-image {
  padding: 0 15px;
  text-align: center;
}

.sec03-energy .detail-image.width-short {
  width: 70%;
  margin: 0 auto;
}

.sec03-energy .detail-bordertitle {
  color: #43af35;
  border: 2px solid #43af35;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  margin: 0 10px 15px;
}

.sec03-energy .detail-bordertitle.mgtop {
  margin-top: 15px;
}

.sec03-energy .detail-flexrow {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  padding: 10px;
  margin-bottom: 15px;
}

.sec03-energy .detail-flexrow .imgtext {
  min-width: calc((100% - 40px) / 3);
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .sec03-energy .detail-flexrow .imgtext {
    font-size: 12px;
  }
}

.sec03-energy .detail-flexrow .imgtext .img .max {
  max-width: 60px;
  width: 100%;
}

.sec03-energy .detail-flexrow .imgtext .text {
  background: transparent;
  padding: 0;
}

.sec03-energy .detail-icon {
  display: flex;
  flex-direction: row;
}

@media (min-width: 768px) {
  .sec03-energy .detail-icon {
    flex-direction: column;
  }
}

.sec03-energy .detail-icon-col {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 5px 15px;
}

.sec03-energy .detail-icon-col .text {
  background: transparent;
  padding: 0;
}

.sec03-caption {
  margin-top: 5px;
}

.sec03-caption .caption {
  font-size: 10px;
  display: inline-block;
  color: #515151;
  letter-spacing: 0;
}

.sec03-self-title {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}

@media (min-width: 768px) {
  .sec03-self-title {
    font-size: 30px;
  }
}

.sec03-self-text {
  font-size: 10px;
  text-align: center;
  padding: 15px;
}

@media (min-width: 768px) {
  .sec03-self-text {
    font-size: 15px;
    padding: 30px 15px;
  }
}

.sec03-self-image {
  position: relative;
  padding: 15px;
  background: #fff;
  text-align: center;
}

@media (min-width: 768px) {
  .sec03-self-image {
    padding: 30px;
  }
}

.sec03-self-image .caption {
  text-align: left;
  margin-top: 5px;
  letter-spacing: 0;
  font-size: 10px;
  color: #515151;
}

.sec03-graph {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  max-width: 950px;
}

.sec03-graph .flex {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (min-width: 768px) {
  .sec03-graph .flex {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .sec03-graph .flex .col {
    width: 50%;
  }
}

.sec03-graph .flex .wbg {
  background: #fff;
  padding: 15px;
}

.sec03-graph .flex .link {
  font-weight: 900;
  font-size: 11px;
  line-height: 1.5;
}

.sec03-graph .flex .caption {
  font-size: 10px;
  color: #515151;
}

.sec04-subtitle {
  color: #f15a24;
  border-color: #f15a24;
}

.sec04-subtitle span {
  border-color: #f15a24;
}

.sec04-tsas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  max-width: 950px;
  padding: 15px;
  border-radius: 15px;
  background: #fff;
}

@media (min-width: 768px) {
  .sec04-tsas {
    padding: 25px;
  }
}

.sec04-tsas-text {
  font-size: 10px;
}

@media (min-width: 768px) {
  .sec04-tsas-text {
    font-size: 14px;
  }
}

.sec04-tsas-caption {
  margin-top: 5px;
}

.sec04-tsas-caption .caption {
  font-size: 10px;
  display: inline-block;
  color: #515151;
  letter-spacing: 0;
}

.sec04-flex {
  display: flex;
  flex-direction: column;
  max-width: 950px;
  gap: 20px;
}

.sec04-flex-col02 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .sec04-flex-col02 {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .sec04-flex-col02 .flex {
    width: calc((100% - 20px) / 2);
  }
}

.sec04-flex .flex {
  display: flex;
  flex-direction: column;
}

.sec04-flex .flex sup {
  font-size: 10px;
}

.sec04-flex .flex .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.sec04-flex .flex .title .num {
  font-size: 47px;
  font-weight: 900;
  color: #999999;
}

@media (min-width: 768px) {
  .sec04-flex .flex .title .num {
    font-size: 65px;
  }
}

.sec04-flex .flex .title .textflex {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sec04-flex .flex .title .textflex .small {
  font-size: 10px;
}

@media (min-width: 768px) {
  .sec04-flex .flex .title .textflex .small {
    font-size: 15px;
  }
}

.sec04-flex .flex .title .textflex .numtitle {
  font-size: 15px;
  font-weight: bold;
}

@media (min-width: 768px) {
  .sec04-flex .flex .title .textflex .numtitle {
    font-size: 30px;
  }
}

.sec04-flex .flex .flexspcol {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (min-width: 768px) {
  .sec04-flex .flex .flexspcol {
    flex-direction: row;
  }
}

.sec04-flex .flex .flexrow {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.sec04-flex .flex .flexrow .col {
  padding: 10px;
  background: #f15a24;
  color: #fff;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.5;
}

.sec04-flex .flex .flexrow .col .image {
  padding: 5px;
}

@media (min-width: 768px) {
  .sec04-flex .flex .flexrow .col {
    font-size: 12px;
  }
}

.sec04-flex .flex .flexrow .col sup {
  font-size: 10px;
}

.sec04-flex .flex .caption {
  margin-top: 5px;
  font-size: 10px;
}

.sec04-flex .flex .caption .red {
  color: #e50012;
}

.sec05 .caption {
  margin-top: 5px;
  font-size: 10px;
}

.sec05 .caption .red {
  color: #e50012;
}

.sec05 .caption.mt {
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .sec05 .caption.mt {
    margin-top: -10px;
  }
}

.sec05-subtitle {
  color: #ed1e79;
  border-color: #ed1e79;
}

.sec05-subtitle span {
  border-color: #ed1e79;
}

.sec05-support {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 950px;
}

.sec05-support-col .flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-feature-settings: "palt";
  letter-spacing: 0.3px;
}

@media (min-width: 768px) {
  .sec05-support-col .flex {
    flex-direction: row;
  }
}

.sec05-support-col .flex .col {
  width: 100%;
}

@media (min-width: 768px) {
  .sec05-support-col .flex .col {
    width: calc((100% - 20px) / 2);
  }
}

.sec05-support-col .flex .col sup {
  font-size: 10px;
}

.sec05-support-col .flex .col .title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
}

.sec05-support-col .flex .col .title .pink {
  color: #f478af;
}

@media (min-width: 768px) {
  .sec05-support-col .flex .col .title {
    font-size: 20px;
  }
}

.sec05-support-col .flex .col .frame {
  border: 2px solid #ed1e79;
  border-radius: 15px;
  padding: 15px;
}

.sec05-support-col .flex .col .frame-title {
  background: #ed1e79;
  color: #fff;
  font-size: 11px;
  border-radius: 30px;
}

@media (min-width: 768px) {
  .sec05-support-col .flex .col .frame-title {
    font-size: 14px;
  }
}

.sec05-support-col .flex .col .frame .flex {
  gap: 10x;
  justify-content: space-between;
  flex-direction: row;
}

.sec05-support-col .flex .col .frame-title {
  display: inline-block;
  padding: 5px 8px;
}

.sec05-support-col .flex .col .frame-text {
  font-size: 11px;
  letter-spacing: 0;
  padding: 5px 0;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .sec05-support-col .flex .col .frame-text {
    font-size: 15px;
  }
}

.sec05-support-col .flex .col .frame-subtitle {
  font-size: 13px;
  letter-spacing: -1px;
  color: #ed1e79;
  font-weight: bold;
}

@media (min-width: 768px) {
  .sec05-support-col .flex .col .frame-subtitle {
    font-size: 23px;
  }
}

.sec05-support-col .flex .col01 {
  width: 100%;
}

@media (min-width: 768px) {
  .sec05-support-col .flex .col01 {
    width: 53%;
  }
}

.sec05-support-col .flex .col02 {
  width: 100%;
  padding-top: 15px;
}

@media (min-width: 768px) {
  .sec05-support-col .flex .col02 {
    padding: 0;
    width: 47%;
  }
}

@media (min-width: 768px) {
  .sec05-support-col .flex.nogap {
    gap: 0;
  }
}

.sec05-support-col .image {
  position: relative;
}

.sec05-support-col .image .caption {
  position: relative;
  font-size: 10px;
  letter-spacing: 0.5px;
}

@media (min-width: 768px) {
  .sec05-support-col .image .caption {
    font-size: 10px;
    width: 80%;
  }
}
/*# sourceMappingURL=brand.css.map */