/* クロジーの特徴 */
.sec-features { background: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 56px 0 80px; }

.sec-features .features-head { display: flex; flex-direction: column; align-items: center; width: 1080px; white-space: nowrap; line-height: 1.5; }
.sec-features .features-en { font-size: 32px; color: var(--c-clozy-blue); }
.sec-features .features-title { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--c-pony-blue); text-align: center; }
.sec-features .features-title-jp { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 1.6px; }
.sec-features .features-title-num { font-size: 48px; letter-spacing: 1.44px; }

.sec-features .features-cards { display: flex; align-items: stretch; justify-content: center; gap: 40px; width: 1080px; }
.sec-features .features-card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 333px; padding: 32px 0; border-radius: 16px; background: var(--c-blue-gray); }

.sec-features .features-num { position: absolute; left: 50%; top: -41px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 81.344px; height: 81.344px; border-radius: 50%; background: var(--c-clozy-blue-60); border: 0.5px solid var(--c-pony-blue); }
.sec-features .features-num .en { font-size: 40px; letter-spacing: -2.8px; color: var(--c-pony-blue); }
.sec-features .features-illust { position: relative; width: 325px; height: 182px; overflow: hidden; }
.sec-features .features-illust img { width: 325px; height: 182px; max-width: none; }

.sec-features .features-illust .features-logo-pony { position: absolute; left: calc(50% + 0.42px); top: calc(50% + 4.67px); width: 168.839px; height: 133.338px; transform: translate(-50%, -50%); }
.sec-features .features-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 300px; line-height: 1.6; }
.sec-features .features-card-title { display: flex; flex-direction: column; width: 100%; font-weight: 700; color: var(--c-pony-blue); text-align: center; }
.sec-features .features-card-title-sub { font-size: 20px; letter-spacing: 1px; }
.sec-features .features-card-title-main { font-size: 24px; letter-spacing: 1.2px; }
.sec-features .features-card-body { width: 100%; font-size: 16px; font-weight: 500; letter-spacing: 0.8px; color: var(--c-black); }

@media (max-width: 767px) {
  .sec-features { padding: 40px 16px; box-sizing: border-box; }
  .sec-features .features-head { width: 100%; }
  .sec-features .features-en { font-size: 24px; }
  .sec-features .features-title-jp { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }
  .sec-features .features-title-num { font-size: 40px; letter-spacing: 2px; }

  .sec-features .features-cards { flex-direction: column; align-items: center; width: 100%; }
  .sec-features .features-card { width: 100%; padding: 32px 16px; }
  .sec-features .features-card:nth-child(2) .features-num { top: -35.26px; }
  .sec-features .features-card:nth-child(3) .features-num { top: -34.26px; }
  .sec-features .features-illust { max-width: 100%; }
  .sec-features .features-text { width: 100%; }
}