@media (min-width: 768px) {
    .header .logo .logo-white {
      display: block !important;
    }
    .header .logo .logo-black {
        display: none !important;
      }
  }

.box01{background: #234a35; padding: 100px 0;}
.box01 .tit{font-size: 3.1rem; color: #fff; text-align: center; margin: 100px 0 30px; letter-spacing: 0.1em; line-height: 1.45;}
.box01 .desc{font-size: 2rem; line-height: 2.25; letter-spacing: 0.2em; color: #fff; text-align: center;}
.box01 .list{margin-top: 80px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.box01 .list li{width: 23.6%;}
.box01 .list li p{font-size: 1.5rem; line-height: 1.3; color: #fff; text-align: center; margin-top: 10px; letter-spacing: 0.02em;}
.box01 .list li p .m-cap{display: block;}
.box01 .data-note{position: relative;}
.box01 .data-note:before{content: attr(data-note); position: absolute; top: -0.7em; left: 50%; transform: translateX(-50%); text-align: center; font-size: 1.2rem; color: inherit;}
.box01 .img{text-align: center;}
@media (max-width: 767px) {
    .box01{padding: 50px 0;}
    .box01 .list{row-gap: 20px; margin-top: 40px;}
    .box01 .list li{width: 48%;}
    .box01 .list img{width: 100%;}
    .box01 .tit{margin: 50px 0 20px;}
    .box01 .desc{text-align: left; font-size: 1.8rem; line-height: 2; letter-spacing: 0.1em;}
    .box01 .data-note:before{font-size: 12px; top: -1em;}
    .box01 .img img{max-width: 65%;}
}
@media (max-width: 480px) {
    .box01 .list li{width: 100%;}
}