@charset "UTF-8";

/*circle*/
.lfp-oshicolor--circle, .lfp-oshicolor--circle * { box-sizing: border-box; }
.lfp-oshicolor--circle { width:100%; margin:64px auto 0; padding:0 0 52px; background:#fff; color:#24221e; }
.lfp-oshicolor--circle .lfp-oshicolor__heading { margin:0 0 28px; }
.lfp-oshicolor--circle .lfp-oshicolor__heading h2 { margin:0; padding-bottom:5px; border-bottom:2px solid #fdd007; font-size:18px; font-weight:800; line-height:1.4; letter-spacing:.02em; }
.lfp-oshicolor--circle .lfp-oshicolor__description { margin:14px 0 0; font-size:13px; line-height:1.6; }
.lfp-oshicolor--circle .lfp-oshicolor__grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:25px 45px; margin:0; padding:0; list-style:none; }
.lfp-oshicolor--circle .lfp-oshicolor__grid > li { min-width:0; margin:0; padding:0; list-style:none; }
.lfp-oshicolor--circle .lfp-oshicolor__item { display:block; color:inherit; text-align:center; text-decoration:none; -webkit-tap-highlight-color:rgba(241,196,0,.2); }
.lfp-oshicolor--circle .lfp-oshicolor__item:hover { color:inherit; text-decoration:none; }
.lfp-oshicolor--circle .lfp-oshicolor__item:focus-visible { outline:3px solid #a67c00; outline-offset:4px; border-radius:12px; }
.lfp-oshicolor--circle .lfp-oshicolor__swatch { display:block; width:100%; aspect-ratio:1 / 1; border-radius:50%; background:var(--lfp-oshicolor-fill); box-shadow:0 2px 6px rgba(42,37,26,.08); }
.lfp-oshicolor--circle .lfp-oshicolor__name { display:block; margin-top:9px; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.lfp-oshicolor--circle .lfp-oshicolor__item--red { --lfp-oshicolor-fill:#f22522; }
.lfp-oshicolor--circle .lfp-oshicolor__item--pink { --lfp-oshicolor-fill:#ed5aeb; }
.lfp-oshicolor--circle .lfp-oshicolor__item--orange { --lfp-oshicolor-fill:#fa781d; }
.lfp-oshicolor--circle .lfp-oshicolor__item--yellow { --lfp-oshicolor-fill:#fff000; }
.lfp-oshicolor--circle .lfp-oshicolor__item--green { --lfp-oshicolor-fill:#338f3b; }
.lfp-oshicolor--circle .lfp-oshicolor__item--purple { --lfp-oshicolor-fill:#9700df; }
.lfp-oshicolor--circle .lfp-oshicolor__item--white { --lfp-oshicolor-fill:#fff; }
.lfp-oshicolor--circle .lfp-oshicolor__item--blue-navy { --lfp-oshicolor-fill:linear-gradient(90deg,#4167a0 0 50%,#16386f 50% 100%); }
.lfp-oshicolor--circle .lfp-oshicolor__item--beige-brown { --lfp-oshicolor-fill:linear-gradient(90deg,#e5d5b3 0 50%,#965022 50% 100%); }
.lfp-oshicolor--circle .lfp-oshicolor__item--black-gray { --lfp-oshicolor-fill:linear-gradient(90deg,#111 0 50%,#b3b3b3 50% 100%); }
.lfp-oshicolor--circle .lfp-oshicolor__item--metallic { --lfp-oshicolor-fill:linear-gradient(90deg,#ba913c 0%,#f5df9b 26%,#c7a257 49.8%,#aeb4b8 50%,#f4f4f2 76%,#a4aaaf 100%); }
.lfp-oshicolor--circle .lfp-oshicolor__item--multi { --lfp-oshicolor-fill:linear-gradient(90deg,#ef2930 0 33.333%,#f7d529 33.333% 66.666%,#3569a6 66.666% 100%); }
.lfp-oshicolor--circle .lfp-oshicolor__item--white .lfp-oshicolor__swatch { border:1px solid #c7c7c7; }
@media (max-width:700px) {
.lfp-oshicolor--circle { margin-top:42px; padding:0 0 42px; }
.lfp-oshicolor--circle .lfp-oshicolor__heading { margin-bottom:22px; }
.lfp-oshicolor--circle .lfp-oshicolor__heading h2 { font-size:16px; }
.lfp-oshicolor--circle .lfp-oshicolor__description { font-size:12px; }
.lfp-oshicolor--circle .lfp-oshicolor__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px 10px; }
.lfp-oshicolor--circle .lfp-oshicolor__swatch { border-radius:50%; }
.lfp-oshicolor--circle .lfp-oshicolor__name { margin-top:7px; font-size:10px; }
.lfp-oshicolor--circle .lfp-oshicolor__name > span { display:block; }
}