@charset "UTF-8";
.page-logo-design .commerce-page{--commerce-ink:#20231f;--commerce-muted:#6a7066;--commerce-line:#d8dcd2}
.page-logo-design .commerce-hero.commerce-hero-showcase{min-height:525px;padding:15px 0 45px}
.page-logo-design .commerce-hero-showcase:before{inset:6% -5%;background:radial-gradient(ellipse at 50% 50%,#d9ded496,transparent 69%)}
.logo-design-visual{position:relative;width:min(100%,690px);height:490px;margin:auto;isolation:isolate}
.logo-design-halo{position:absolute;z-index:-1;top:1%;left:14%;width:72%;aspect-ratio:1;border:1px solid #c9d0c4;border-radius:50%;box-shadow:0 0 0 37px #dce3d642,0 0 0 78px #dce3d627}
.logo-design-board{position:absolute;z-index:2;top:5%;left:14%;width:64%;height:87%;padding:23px 27px;background:#f5f5f1;border:1px solid #dadfd3;border-radius:4px;box-shadow:0 27px 56px -26px #25302083;transform:rotate(-3deg);animation:logo-board-rise 8s ease-in-out infinite alternate}
.logo-design-board-top,.logo-design-board-bottom{display:flex;justify-content:space-between;gap:12px;align-items:center}
.logo-design-board-top{font-size:9px;font-weight:800;letter-spacing:.13em;color:#686f64}
.logo-design-board-art{position:relative;height:74%;display:grid;place-items:center}
.logo-design-board-guide{position:absolute;width:min(73%,280px);aspect-ratio:1;border:1px dashed #abb5a64a;border-radius:50%;box-shadow:0 0 0 34px #d5dfcf1c}
.logo-design-board-guide:before,.logo-design-board-guide:after{content:"";position:absolute;background:#c0c8ba66}
.logo-design-board-guide:before{width:130%;height:1px;left:-15%;top:50%}
.logo-design-board-guide:after{width:1px;height:130%;left:50%;top:-15%}
.logo-design-symbol{position:relative;z-index:1;display:block;width:min(83%,350px);height:auto;object-fit:contain;filter:drop-shadow(0 8px 12px #20281d18)}
.logo-design-board-bottom{border-top:1px solid #dce1d8;padding-top:15px;align-items:flex-end}
.logo-design-board-bottom strong{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.06em;color:#252a25;white-space:nowrap}
.logo-design-board-bottom span{font-size:8px;font-weight:800;letter-spacing:.11em;color:#737d70;text-align:right}
.logo-design-reverse{position:absolute;z-index:3;right:-1%;bottom:6%;width:31%;height:36%;padding:14px;background:#222521;color:#f7f8f1;border:5px solid #f7f8f3;border-radius:5px;box-shadow:0 20px 38px -20px #17221b9e;transform:rotate(7deg);display:flex;flex-direction:column;justify-content:space-between;align-items:center;animation:logo-reverse-rise 7s ease-in-out infinite alternate}
.logo-design-reverse>span{align-self:flex-start;font-size:8px;font-weight:800;letter-spacing:.1em;color:#cbd6c9}
.logo-design-reverse img{display:block;width:85%;height:auto;max-height:75%;object-fit:contain;margin:auto}
.logo-design-small{position:absolute;z-index:4;left:2%;bottom:18%;width:17%;height:17%;padding:10px;background:#fff;border:1px solid #d4dbd0;border-radius:4px;box-shadow:0 14px 25px -16px #24312680;transform:rotate(6deg);display:flex;align-items:flex-end;justify-content:center;gap:6px}
.logo-design-small span{position:absolute;left:8px;top:9px;font-size:6px;font-weight:800;letter-spacing:.11em;color:#6c796d}
.logo-design-small img{display:block;width:94%;height:auto;object-fit:contain;margin:auto 0 4px}
.logo-design-visual-note{position:absolute;left:3%;bottom:0;color:#6b7868;font-size:9px;font-weight:800;letter-spacing:.14em}
.logo-design-gallery{background:#eaede7}
.logo-design-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.logo-design-gallery-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:490px;margin:0;padding:26px 28px 29px;border-radius:8px;overflow:hidden}
.logo-design-gallery-card-light{background:#f7f8f4;color:#222721;border:1px solid #d6ddd1}.logo-design-gallery-card-dark{background:#242924;color:#f7f8f4}
.logo-design-gallery-art{position:relative;flex:1;min-height:300px;display:grid;place-items:center}
.logo-design-gallery-index{position:absolute;top:0;left:0;font-size:10px;font-weight:800;letter-spacing:.15em;color:inherit;opacity:.65}
.logo-design-gallery-logo{display:block;width:min(76%,370px);height:auto;max-height:190px;object-fit:contain;position:relative;z-index:1}
.logo-design-gallery-mock{width:min(75%,350px);aspect-ratio:1.1;border:1px solid #899b8961;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:17px;box-shadow:0 0 0 18px #ffffff04,0 0 0 50px #ffffff03;transform:rotate(-4deg)}
.logo-design-gallery-mock img{display:block;width:80%;height:auto;object-fit:contain}.logo-design-gallery-mock span{font-size:8px;font-weight:800;letter-spacing:.13em;color:#bbcfbb}
.logo-design-gallery-card figcaption{display:flex;flex-direction:column;gap:8px;border-top:1px solid currentColor;padding-top:18px}
.logo-design-gallery-card figcaption span{font-size:9px;font-weight:800;letter-spacing:.15em;opacity:.68}
.logo-design-gallery-card figcaption strong{font-size:clamp(25px,2.3vw,37px);line-height:1.12;letter-spacing:-.055em}
.logo-design-gallery-card figcaption small{font-size:13px;line-height:1.55;opacity:.76}
.logo-design-gallery-foot{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:24px;color:#687267;font-size:12px;line-height:1.5}
.logo-design-gallery-foot a{display:inline-flex;align-items:center;gap:17px;flex-shrink:0;border-bottom:1px solid #899a84;padding-bottom:6px;color:#253126;text-decoration:none;font-weight:750}
@keyframes logo-board-rise{to{transform:translateY(-5px) rotate(-2deg)}}
@keyframes logo-reverse-rise{to{transform:translateY(5px) rotate(6deg)}}
@media(max-width:1000px){.page-logo-design .commerce-hero.commerce-hero-showcase{min-height:435px}.logo-design-visual{height:390px}.logo-design-board{padding:17px 19px}.logo-design-board-art{height:73%}.logo-design-reverse{right:1%}}
@media(max-width:760px){.page-logo-design .commerce-hero.commerce-hero-showcase{min-height:430px;padding:10px 0 38px}.logo-design-visual{height:410px;max-width:570px}.logo-design-gallery-card{min-height:425px;padding:20px}.logo-design-gallery-art{min-height:260px}.logo-design-gallery-card figcaption strong{font-size:25px}.logo-design-gallery-foot{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.page-logo-design .commerce-hero.commerce-hero-showcase{min-height:320px;padding:5px 0 29px}.logo-design-visual{height:305px}.logo-design-board{left:13%;top:4%;width:67%;height:88%;padding:11px 12px}.logo-design-board-top{font-size:5px}.logo-design-board-art{height:73%}.logo-design-board-bottom{padding-top:7px}.logo-design-board-bottom strong{font-size:13px}.logo-design-reverse{right:-2%;bottom:6%;width:34%;height:35%;padding:6px;border-width:3px}.logo-design-reverse>span{font-size:5px}.logo-design-small{left:0;bottom:18%;width:18%;height:17%;padding:5px;gap:3px}.logo-design-small span{top:4px;left:4px;font-size:4px}.logo-design-small img{width:100%;margin:auto 0 0}.logo-design-visual-note{font-size:6px}.logo-design-gallery-grid{grid-template-columns:1fr;gap:12px}.logo-design-gallery-card{min-height:430px}.logo-design-gallery-art{min-height:275px}.logo-design-gallery-card figcaption strong{font-size:28px}}
@media(max-width:360px){.logo-design-visual{height:272px}.page-logo-design .commerce-hero.commerce-hero-showcase{min-height:290px}.logo-design-gallery-card{min-height:390px}.logo-design-gallery-art{min-height:245px}}
@media(prefers-reduced-motion:reduce){.logo-design-board,.logo-design-reverse{animation:none}}