.site-loader{display:none}
html.is-loading{overflow:hidden}
html.is-loading .site-loader{
  position:fixed;
  z-index:10000;
  inset:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  padding:clamp(24px,3.5vw,54px);
  background:#f7f2e7;
  color:#064943;
  isolation:isolate;
  clip-path:inset(0 0 0 0);
  transition:clip-path .48s cubic-bezier(.76,0,.24,1);
}
html.loader-leaving .site-loader{clip-path:inset(0 0 100% 0)}
.site-loader::before{
  content:"16 COLORS";
  position:absolute;
  z-index:-2;
  top:50%;
  left:50%;
  color:transparent;
  -webkit-text-stroke:1px rgba(6,73,67,.12);
  font:300 clamp(84px,15vw,224px)/1 'Outfit',sans-serif;
  letter-spacing:.045em;
  white-space:nowrap;
  transform:translate(-50%,-51%);
}
.site-loader::after{
  content:"";
  position:absolute;
  z-index:-3;
  inset:-12%;
  background:
    radial-gradient(circle at 16% 16%,rgba(97,178,211,.15),transparent 23%),
    radial-gradient(circle at 84% 16%,rgba(239,189,53,.13),transparent 22%),
    radial-gradient(circle at 18% 84%,rgba(114,205,187,.17),transparent 24%),
    radial-gradient(circle at 82% 82%,rgba(231,156,172,.16),transparent 23%),
    repeating-linear-gradient(90deg,rgba(6,73,67,.018) 0,rgba(6,73,67,.018) 1px,transparent 1px,transparent 5px);
  animation:loader-atmosphere 4.8s ease-in-out infinite alternate;
}
.site-loader-brand{position:relative;z-index:4;width:clamp(112px,10.5vw,158px);height:auto}
.site-loader-stage{position:relative;align-self:stretch;justify-self:stretch;min-height:0}
.site-loader-hats{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;column-gap:clamp(62px,7vw,112px);row-gap:8px;max-width:1040px;margin:auto;padding:10px clamp(56px,6vw,92px)}
.site-loader-hats::after{content:"";position:absolute;left:21%;right:21%;bottom:5%;height:5%;border-radius:50%;background:rgba(42,77,66,.11);filter:blur(26px)}
.site-loader-hat{
  --r:0deg;
  position:relative;
  z-index:1;
  width:min(20vw,310px,38vh);
  height:auto;
  filter:drop-shadow(0 24px 26px rgba(37,75,65,.11));
  transform:translateY(0) rotate(var(--r)) scale(1);
  transform-origin:50% 72%;
  animation:loader-hat-settle .85s cubic-bezier(.2,.74,.2,1) both;
}
.site-loader-hat--blue{grid-column:1;grid-row:1;justify-self:end;--r:-1.5deg;animation-delay:.02s}
.site-loader-hat--cream{grid-column:2;grid-row:1;justify-self:start;--r:1.2deg;animation-delay:.08s}
.site-loader-hat--mint{grid-column:1;grid-row:2;justify-self:end;--r:-.8deg;animation-delay:.14s}
.site-loader-hat--pink{grid-column:2;grid-row:2;justify-self:start;--r:1.3deg;animation-delay:.2s}
.site-loader-index{position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;width:clamp(72px,7vw,100px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(6,73,67,.18);background:rgba(247,242,231,.76);backdrop-filter:blur(8px);font:600 clamp(9px,.7vw,11px)/1.35 'Outfit',sans-serif;letter-spacing:.15em;text-align:center;transform:translate(-50%,-50%)}
.site-loader-foot{position:relative;z-index:4;display:flex;align-items:end;justify-content:space-between;gap:20px;padding-bottom:12px;font:600 clamp(8px,.68vw,10px)/1.5 'Outfit','Noto Sans JP',sans-serif;letter-spacing:.18em}
.site-loader-status{display:flex;align-items:baseline;gap:12px}.site-loader-count{font-size:clamp(22px,2.2vw,34px);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.site-loader-count::after{content:"%";margin-left:2px;font-size:.38em;letter-spacing:0}
.site-loader-meter{position:absolute;z-index:5;left:50%;bottom:17px;width:52px;height:10px;overflow:visible;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='10' viewBox='0 0 52 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23f3b8c8'/%3E%3Ccircle cx='19' cy='5' r='5' fill='%23f1d35c'/%3E%3Ccircle cx='33' cy='5' r='5' fill='%2379d5ca'/%3E%3Ccircle cx='47' cy='5' r='5' fill='%2370a8df'/%3E%3C/svg%3E") center/52px 10px no-repeat;animation:loader-dot-breathe 1.2s ease-in-out infinite alternate}
@keyframes loader-hat-settle{from{transform:translateY(18px) rotate(var(--r)) scale(.94)}to{transform:translateY(0) rotate(var(--r)) scale(1)}}
@keyframes loader-dot-breathe{from{opacity:.42;filter:saturate(.82)}to{opacity:1;filter:saturate(1.08)}}
@keyframes loader-atmosphere{to{transform:translate3d(1.5%,-1%,0) scale(1.025)}}
@media(max-width:760px){
 html.is-loading .site-loader{padding:22px 20px 24px}
 .site-loader::before{top:49%;font-size:24vw;-webkit-text-stroke-color:rgba(6,73,67,.11)}
 .site-loader-brand{width:106px}
 .site-loader-hats{inset:5% 0 4%;grid-template-rows:auto auto;align-content:center;column-gap:8px;row-gap:76px;padding:0 4px}
 .site-loader-hat{width:min(45vw,176px);filter:drop-shadow(0 16px 18px rgba(37,75,65,.1))}
 .site-loader-index{top:51%;width:68px;font-size:8px;background:rgba(247,242,231,.84)}
 .site-loader-foot{font-size:8px;letter-spacing:.1em;padding-bottom:9px}
 .site-loader-status{gap:7px}.site-loader-count{font-size:24px}
 .site-loader-meter{bottom:14px;width:52px;height:10px}
}
@media(prefers-reduced-motion:reduce){
 html.is-loading .site-loader{transition:opacity .18s ease}
 html.loader-leaving .site-loader{clip-path:none;opacity:0}
 .site-loader::after,.site-loader-hat,.site-loader-meter{animation:none}
}