:root{
  --qe-canvas:#f8f6f4;
  --qe-paper:#fffefd;
  --qe-paper-muted:#f1ede9;
  --qe-ink:#171513;
  --qe-ink-muted:#5c5652;
  --qe-wine:#8c1029;
  --qe-wine-hover:#741021;
  --qe-wine-surface:#86162b;
  --qe-rule:rgba(55,45,40,.14);
  --qe-rule-strong:rgba(55,45,40,.28);
  --qe-display:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --qe-reading:"Noto Serif JP Variable","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --qe-ui:"Noto Sans JP Variable","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --qe-gutter:clamp(24px,4.75vw,72px);
  --qe-section:clamp(80px,9vw,144px);
  --qe-fast:180ms;
  --qe-reveal:560ms;
}

html{background:var(--qe-canvas)}
body.qe-site{
  margin:0;
  background-color:var(--qe-canvas)!important;
  background-image:url("./assets/editorial/paper-stock-v1.webp")!important;
  background-position:top left!important;
  background-repeat:repeat!important;
  background-size:1024px 1024px!important;
  color:var(--qe-ink)!important;
  font-family:var(--qe-ui)!important;
  font-size:16px;
  line-height:1.85;
  font-feature-settings:"kern" 1;
  text-rendering:optimizeLegibility;
}

body.qe-site :where(h1,h2,h3,.qe-display){
  margin-block:0;
  color:var(--qe-ink);
  font-family:var(--qe-display)!important;
  font-weight:400;
  letter-spacing:.018em;
  font-feature-settings:"palt" 1,"kern" 1;
  text-wrap:balance;
}

body.qe-site :where(p,li,dd){text-wrap:pretty}
body.qe-site :where(button,input,select,textarea){font-family:var(--qe-ui)}
body.qe-site :where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--qe-wine)!important;
  outline-offset:4px;
  box-shadow:none!important;
}

.qe-kicker{
  margin:0 0 18px;
  color:var(--qe-wine);
  font-family:var(--qe-ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.qe-primary-action{
  min-height:64px;
  padding:17px 24px;
  border:0;
  border-radius:0;
  border:0;
  background:var(--qe-wine-surface);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-family:var(--qe-display)!important;
  font-size:18px;
  font-weight:400;
  line-height:1.35;
  text-decoration:none;
  transition:background-color var(--qe-fast) ease,color var(--qe-fast) ease;
}
.qe-primary-action::after{
  content:"";
  width:32px;
  height:12px;
  flex:0 0 32px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='square' d='M1 6h29M25 1l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='square' d='M1 6h29M25 1l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--qe-fast) ease;
}
@media(hover:hover){.qe-primary-action:hover{background:var(--qe-wine-hover)}.qe-primary-action:hover::after{transform:translateX(3px)}}

.qe-text-action{
  width:max-content;
  max-width:100%;
  min-height:44px;
  padding:9px 0 7px;
  border:0;
  border-bottom:1px solid currentColor;
  border-radius:0;
  background:transparent;
  color:var(--qe-wine);
  display:inline-flex;
  align-items:center;
  gap:28px;
  font-weight:550;
  text-decoration:none;
}
.qe-text-action::after{content:"→";font-family:var(--qe-reading);font-size:18px;font-weight:400;transition:transform var(--qe-fast) ease}
@media(hover:hover){.qe-text-action:hover::after{transform:translateX(4px)}}

.qe-hairline{border:0;border-top:1px solid var(--qe-rule)}
.qe-band{border-top:1px solid var(--qe-rule)}

@media(max-width:767px){
  :root{--qe-gutter:20px;--qe-section:clamp(56px,16vw,72px)}
  body.qe-site{font-size:15px;line-height:1.8}
  .qe-primary-action{min-height:58px;padding:15px 18px;font-size:16px}
}

.qe-site :where(.home-v3-button,.mm-button,.beauty-primary,.mirroria-action button,.mirroria-result-actions a,.mirroria-result-actions button,.mm-auth-form button,.catalog-face-quicklink,.phase1-approved-bottom-cta,.mm-account-result-actions a,.mm-account-result-actions button)::before{content:none!important}
@media(hover:hover) and (pointer:fine){
  .qe-site :where(.home-v3-button,.mm-button,.beauty-primary,.mirroria-action button,.mirroria-result-actions a,.mirroria-result-actions button,.mm-auth-form button,.catalog-face-quicklink,.phase1-approved-bottom-cta,.mm-account-result-actions a,.mm-account-result-actions button):hover{transform:none;box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  body.qe-site *,body.qe-site *::before,body.qe-site *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
