/* クロジーとは */
.sec-about { background: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: 56px; }

.sec-about .about-head { display: flex; flex-direction: column; align-items: center; width: 570px; }
.sec-about .about-en { font-size: 32px; color: var(--c-clozy-blue); white-space: nowrap; }
.sec-about .about-title { display: flex; align-items: flex-end; justify-content: center; gap: 8px; font-weight: 700; color: var(--c-pony-blue); }
.sec-about .about-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sec-about .about-logo-ruby { font-size: 14px; line-height: 1.5; letter-spacing: 0.7px; white-space: nowrap; }
.sec-about .about-logo { width: 171.217px; height: 55px; }
.sec-about .about-title-text { font-size: 32px; line-height: 1.5; letter-spacing: 1.6px; white-space: nowrap; }

.sec-about .about-body { position: relative; display: grid; grid-template-columns: 433.2px 1fr; column-gap: 24px; row-gap: 24px; align-items: start; width: 1080px; }
.sec-about .about-illust { position: relative; grid-column: 1; grid-row: 1 / span 2; width: 433.2px; height: 399px; }
.sec-about .about-bubble { position: absolute; }
.sec-about .about-bubble-bg { position: absolute; left: 0; top: 0; max-width: none; }
.sec-about .about-bubble-let-go .about-bubble-bg,
.sec-about .about-bubble-annoying .about-bubble-bg { transform: scaleX(-1); }
.sec-about .about-bubble-text { position: absolute; margin: 0; font-family: "A1 Gothic", "A P-OTF A1Gothic Std", var(--font-jp); font-weight: 500; font-size: 16.8px; line-height: 1.4; letter-spacing: 0.84px; color: var(--c-pony-blue); text-align: center; white-space: nowrap; }

.sec-about .about-bubble-how-to-start { left: 10px; top: 0; width: 197.625px; height: 114.326px; }
.sec-about .about-bubble-how-to-start .about-bubble-text { left: 16px; top: 21px; width: 165.6px; }

.sec-about .about-bubble-let-go { left: 212px; top: 32px; width: 215.625px; height: 124.739px; }
.sec-about .about-bubble-let-go .about-bubble-text { left: 16.8px; top: 14px; width: 182.4px; }

.sec-about .about-bubble-use-time { left: 0; top: 123px; width: 215.625px; height: 145.165px; }
.sec-about .about-bubble-use-time .about-bubble-text { left: 27.6px; top: 26px; width: 164.4px; }

.sec-about .about-bubble-annoying { left: 264px; top: 165px; width: 169.2px; height: 121.595px; }
.sec-about .about-bubble-annoying .about-bubble-text { left: 19.67px; top: 17px; width: 133.2px; }

.sec-about .about-woman { position: absolute; left: 170.41px; top: 189px; width: 147.68px; height: 210px; max-width: none; }

.sec-about .about-lead { grid-column: 2; grid-row: 1; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); }
.sec-about .about-desc { grid-column: 2; grid-row: 2; font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: 0.9px; color: var(--c-black); }
.sec-about .about-pc-space { display: inline; }

.sec-about .about-clothes { display: contents; }
.sec-about .about-shirt { position: absolute; left: 918.28px; top: 61.7px; width: 112.125px; height: 98.625px; max-width: none; transform: rotate(5deg); }
.sec-about .about-cardigan { position: absolute; left: 936.35px; top: 123.42px; width: 129.188px; height: 105.188px; max-width: none; transform: rotate(10deg); }

@media (max-width: 767px) {
  .sec-about { gap: 16px; padding: 40px 16px 0; box-sizing: border-box; }
  .sec-about .about-head { width: 100%; }
  .sec-about .about-en { font-size: 24px; }
  .sec-about .about-title { gap: 6px; }
  .sec-about .about-logo-wrap { gap: 3px; }
  .sec-about .about-logo-ruby { font-size: 12px; letter-spacing: 0.6px; }
  .sec-about .about-logo { width: 141.254px; height: 45.375px; }
  .sec-about .about-title-text { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }

  .sec-about .about-body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .sec-about .about-lead { order: 1; position: relative; width: 100%; font-size: 20px; letter-spacing: 1px; text-align: center; }
  .sec-about .about-illust { order: 2; width: 358px; max-width: 100%; height: 218px; overflow: hidden; }
  .sec-about .about-desc { order: 3; width: 100%; font-size: 16px; letter-spacing: 0.8px; }
  .sec-about .about-pc-space { display: none; }

  .sec-about .about-bubble-text { font-size: 10.619px; letter-spacing: 0.5309px; }
  .sec-about .about-bubble-use-time { left: 12.89px; top: 1.11px; width: 136.288px; height: 91.775px; }
  .sec-about .about-bubble-use-time .about-bubble-text { left: 17.44px; top: 15.93px; width: 103.911px; }
  .sec-about .about-bubble-let-go { left: 184.38px; top: 0.63px; width: 136.289px; height: 78.843px; }
  .sec-about .about-bubble-let-go .about-bubble-text { left: 10.62px; top: 10.62px; width: 115.288px; }
  .sec-about .about-bubble-how-to-start { left: 8px; top: 104.68px; width: 124.911px; height: 72.261px; }
  .sec-about .about-bubble-how-to-start .about-bubble-text { left: 12.08px; top: 15.17px; width: 104.669px; }
  .sec-about .about-bubble-annoying { left: 243.72px; top: 99.34px; width: 106.945px; height: 77.108px; }
  .sec-about .about-bubble-annoying .about-bubble-text { left: 12.43px; top: 12.13px; width: 84.191px; }
  .sec-about .about-woman { left: 118.87px; top: 33.74px; width: 129.03px; height: 183.48px; }

  .sec-about .about-shirt { left: auto; right: 8.55px; top: 35.61px; width: 44.85px; height: 39.45px; }
  .sec-about .about-cardigan { left: auto; right: -5.5px; top: 60.3px; width: 51.675px; height: 42.075px; }
}