@import url("https://fonts.googleapis.com/css2?family=Estedad:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* 自社プロダクト：準備中 */
.comingSoon{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;background:#F5F7F8;border-radius:20px;padding:70px 80px}
@media (max-width: 991px){.comingSoon{grid-template-columns:1fr;gap:20px;padding:30px 20px 40px}}
.comingSoon .csIllust svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
@media (max-width: 991px){.comingSoon .csIllust svg{max-width:360px}}

.comingSoon .csLabel{display:inline-flex;align-items:center;gap:10px;font-family:"Estedad",sans-serif;font-size:1.5rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#04A345;margin-bottom:18px}
.comingSoon .csLabel::before{content:"";width:10px;height:10px;border-radius:50%;background:#04A345;animation:csPulse 1.8s ease-in-out infinite}
.comingSoon .csTtl{font-size:3.6rem;font-weight:700;line-height:1.55;margin-bottom:24px}
@media (max-width: 991px){.comingSoon .csTtl{font-size:2.4rem;margin-bottom:16px}}
.comingSoon .csLead{line-height:2.1;margin-bottom:40px}
@media (max-width: 991px){.comingSoon .csLead{font-size:1.6rem;line-height:1.9;margin-bottom:28px}}

.comingSoon .csBtns{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.comingSoon .csBtns .mainBtn{margin:0}
.comingSoon .subBtn{position:relative;display:inline-block;padding:14px 4px 10px;font-weight:600;color:#1B1C1D;text-decoration:none;border-bottom:2px solid #04A345;transition:.3s}
.comingSoon .subBtn:hover{color:#04A345}

/* イラストの動き */
.comingSoon .csBar{transform-box:fill-box;transform-origin:left center;animation:csBar 3.2s ease-in-out infinite}
.comingSoon .csCursor{animation:csBlink 1.1s steps(1) infinite}
.comingSoon .csGear{transform-box:fill-box;transform-origin:center;animation:csSpin 12s linear infinite}
.comingSoon .csGear2{transform-box:fill-box;transform-origin:center;animation:csSpin 8s linear infinite reverse}
@keyframes csBar{0%{transform:scaleX(.35)}60%,100%{transform:scaleX(1)}}
@keyframes csBlink{50%{opacity:0}}
@keyframes csSpin{to{transform:rotate(360deg)}}
@keyframes csPulse{0%,100%{box-shadow:0 0 0 0 rgba(4,163,69,.35)}50%{box-shadow:0 0 0 7px rgba(4,163,69,0)}}
@media (prefers-reduced-motion: reduce){.comingSoon *,.comingSoon *::before,.comingSoon *::after{animation:none!important}}