/* ご利用のコツ */
.sec-tips { background: var(--c-clozy-blue); color: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 56px 0; border-radius: 0 0 24px 24px; overflow: hidden; }

.sec-tips .tips-head { display: flex; flex-direction: column; align-items: center; width: 1080px; line-height: 1.5; }
.sec-tips .tips-en { font-size: 32px; letter-spacing: 0.96px; color: var(--c-pony-blue); white-space: nowrap; }
.sec-tips .tips-title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 1.6px; color: var(--c-white); text-align: center; }

.sec-tips .tips-cards { display: flex; align-items: flex-start; justify-content: center; gap: 40px; }
.sec-tips .tips-card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 325px; }
.sec-tips .tips-illust { position: relative; width: 325px; height: 182px; background: var(--c-blue-gray); border-radius: 16px; overflow: hidden; flex: none; }
.sec-tips .tips-illust img { position: absolute; left: 0; top: 0; width: 325px; height: 182px; max-width: none; }

.sec-tips .tips-illust-2 img { left: 50%; top: 6.5px; width: 176.053px; height: 165px; transform: translateX(-50%); }

.sec-tips .tips-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.sec-tips .tips-text-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding-bottom: 12px; border-bottom: 3px dashed var(--c-pony-blue); }

.sec-tips .tips-point { position: relative; width: 67.2px; height: 28.8px; }
.sec-tips .tips-point img { position: absolute; left: 1.24px; top: 2.07px; width: 18.809px; height: 9.6px; max-width: none; transform: rotate(-45deg); }
.sec-tips .tips-point .en { position: absolute; left: 14.83px; top: 5.07px; font-size: 20px; letter-spacing: 0.6px; color: var(--c-pony-blue); white-space: nowrap; }
.sec-tips .tips-card-title { width: 100%; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-white); text-align: center; white-space: nowrap; }
.sec-tips .tips-card-body { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-white); }

@media (max-width: 767px) {

  .sec-tips { gap: 24px; padding: 40px 0; }
  .sec-tips .tips-head { width: 100%; }
  .sec-tips .tips-en { font-size: 24px; letter-spacing: 0.72px; }
  .sec-tips .tips-title { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }
  .sec-tips .tips-cards { box-sizing: border-box; flex-direction: column; align-items: center; gap: 40px; width: 100%; padding: 0 16px; }
  .sec-tips .tips-card { align-items: center; gap: 8px; width: 100%; }
  .sec-tips .tips-illust { max-width: 100%; }
  .sec-tips .tips-text-head { gap: 4px; }
}
