* { box-sizing:border-box }
html { scrollbar-gutter:stable }
:root {
  color-scheme:dark;
  --night:#141014;
  --surface:#211b20;
  --text:#fff7ec;
  --muted:#d0c3b8;
  --gold:#e2c28e;
  --line:#54463e;
  --serif:"Baskervville",Baskerville,"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
  --mincho:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;
}
body { margin:0; color:var(--text); background:radial-gradient(ellipse 76% 580px at 88% 315px,#322128 0%,transparent 88%),var(--night); font-family:"Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; line-height:1.65 }
a { color:inherit; text-decoration:none }
a:hover { text-decoration:underline; text-underline-offset:.25em }
a:focus-visible { outline:3px solid #c38b46; outline-offset:3px }
.wrap { width:min(1120px,calc(100% - 88px)); margin-inline:auto }
header,footer { background:#faf7f0; color:#302827 }
.mast,.foot,.partners,.paper-link { display:flex; align-items:center }
.mast,.foot { justify-content:space-between; gap:18px }
.mast { min-height:76px }
.brand { display:inline-flex; align-items:center; padding:6px 0 }
.brand img { display:block; height:54px; width:auto; mix-blend-mode:multiply }
.paper-link { gap:9px; padding:8px 15px; border:1px solid #cbbcad; border-radius:3px; font-size:13px }
.paper-link svg { width:17px; height:17px }
.hero { position:relative; isolation:isolate; overflow:hidden; background:#221516; border-block:1px solid #947758 }
.slideshow,.slide,.hero::after { position:absolute; inset:0; width:100%; height:100% }
.slideshow { z-index:-2 }
.slide { object-fit:cover; object-position:50% 56%; opacity:0; transition:opacity 2.4s ease-in-out }
.slide.visible { opacity:1 }
.slide.visible,.slide.fading { animation:interior-pan 8.4s linear both }
.slide:nth-child(even) { animation-direction:reverse }
@keyframes interior-pan {
  from { transform:translateX(-2.6%) scale(1.07) }
  to { transform:translateX(2.6%) scale(1.07) }
}
.slide:nth-child(2) { object-position:50% 52% }
.slide:nth-child(3),.slide:nth-child(6) { object-position:50% 43% }
.hero::after { content:""; z-index:-1; background:linear-gradient(90deg,rgba(15,8,13,.81),rgba(24,10,16,.62) 36%,rgba(22,10,13,.08) 88%) }
.hero-inner { height:clamp(140px,13.5vw,207px); display:flex; align-items:center }
.hero h1 { margin:0; font:500 clamp(20px,2.2vw,32px)/1.6 var(--mincho); letter-spacing:.1em; text-shadow:0 2px 9px #120911 }
.category { background:#1a161b; border-bottom:1px solid var(--line) }
.cats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) }
.cats a { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:69px; padding:7px 2px; border-inline-start:1px solid #392f34; color:#e8dcd1; font-size:13px; line-height:1.6 }
.cats a:last-child { border-inline-end:1px solid #392f34 }
.cats a span { font:400 16px/1.3 var(--serif); color:var(--gold) }
.cats a:hover { background:#30242a; text-decoration:none }
.cats a[aria-current] { background:linear-gradient(145deg,#51333a,#34242b); color:white; box-shadow:inset 0 -2px var(--gold) }
.panel { position:relative; padding:42px 0 60px }
.panel[hidden] { display:none }
.section-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line) }
.section-title h2,.paper-main h1 { margin:0; font:400 clamp(43px,5.6vw,76px)/1 var(--serif); color:#f1d9b0; letter-spacing:-.045em }
.section-title p { margin:0; font-size:13px; letter-spacing:.15em; color:var(--muted) }
.tax { display:inline-block; margin-top:10px; color:var(--muted); font-size:12px; border-bottom:1px solid var(--line) }
.group { margin-top:26px }
.group h3 { display:flex; align-items:center; gap:14px; margin:0 0 15px; font:500 clamp(20px,2vw,28px)/1.45 var(--serif); color:var(--text) }
.group h3::before { content:""; display:block; width:4px; height:15px; border-inline:1px solid #be9967 }
.group p { font-size:15px; max-width:75ch; color:var(--muted); margin:14px 0 0 }
#system .group,#offers .group { padding:22px clamp(14px,2.4vw,28px); background:linear-gradient(125deg,#282025,#201b20); border:1px solid var(--line); border-top-color:#987b58 }
@media(min-width:900px) {
  #system:not([hidden]) { display:grid; grid-template-columns:1.02fr 1fr; column-gap:22px; align-items:start }
  #system .section-title { grid-column:1/-1 }
  #system .group:nth-child(2) { grid-area:2/1 }
  #system .group:nth-child(3) { grid-area:3/1 }
  #system .group:nth-child(4) { grid-area:2/2/4/3 }
}
table { width:100%; border-collapse:collapse }
td,th { padding:12px 10px; text-align:right; border-bottom:1px solid var(--line) }
thead th { font-size:13px; font-weight:500; color:#f2dec5; background:#3a2e33 }
tbody th { font-size:15px; font-weight:500 }
th:first-child { text-align:left }
td,.rows dd,.product p { font-family:var(--serif); font-variant-numeric:tabular-nums; color:var(--gold) }
td { font-size:22px; white-space:nowrap }
.rows { margin:0 }
.rows>div { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--line) }
.rows dd { font-size:23px; margin:0; white-space:nowrap }
.rows small,.product small { display:block; margin-top:4px; color:var(--muted); font-size:13px }
.note { border-left:2px solid #a58b67; padding-left:12px }
.jump { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 }
.jump a { padding:8px 16px; border:1px solid #7c6857; border-radius:2px; font-size:13px; color:#f0dcc2 }
.jump a:hover { background:#392b30 }
.jump a[aria-current] { background:#493039; border-color:var(--gold) }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.panel>.cards { margin-top:24px }
.product { min-width:0; border:1px solid var(--line); background:#261e24 }
.product-photo { display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr); place-items:center; height:174px; background:radial-gradient(ellipse at 50% 45%,#fffcf3,#e6d8c6); overflow:hidden }
.product-photo img { max-height:86%; max-width:90%; object-fit:contain; mix-blend-mode:multiply }
.product-details { padding:14px 17px }
.product h4 { font-size:16px; margin:0; font-weight:500 }
.product p { font-size:23px; margin:6px 0 0; line-height:1.2 }
.guidelines { padding:0 0 0 1.3em }
.guidelines li { padding:14px 0; border-bottom:1px solid var(--line) }
.guidelines li::marker { color:var(--gold) }
footer { border-top:2px solid #b39774 }
.foot { padding-block:24px }
.partners { gap:24px }
.partners img { display:block; width:auto; height:26px; mix-blend-mode:multiply }
.social { display:flex; align-items:center; gap:8px; margin-left:auto }
.social a { display:grid; place-items:center; min-width:44px; min-height:44px; padding-inline:7px; font:500 15px/1.3 var(--serif); text-decoration:underline; text-underline-offset:4px; text-decoration-color:#bfa88b }
.foot>a { font-size:12px; white-space:nowrap }
.paper-main { padding-block:44px }
.paper-main>p { color:var(--muted); font-size:14px }
.paper-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px }
.paper-grid a { border:1px solid var(--line); background:var(--surface) }
.paper-grid img { display:block; width:100%; height:250px; object-fit:cover; object-position:top }
.paper-grid span { display:flex; justify-content:space-between; align-items:center; padding:12px; font-size:14px }
@media(max-width:760px) {
  .wrap { width:calc(100% - 32px) }
  .mast { min-height:58px }
  .brand img { height:41px }
  .hero-inner { height:123px }
  .hero h1 { font-size:18px; letter-spacing:.07em }
  .cats { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)) }
  .cats a { min-height:51px; border-bottom:1px solid #392f34; font-size:12px }
  .cats a span { font-size:15px }
  .panel { padding:25px 0 38px }
  .section-title { gap:12px; padding-bottom:13px }
  .group { margin-top:20px }
  .group p { font-size:14px }
  #system .group,#offers .group { padding:16px 12px }
  .cards,.paper-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .product-photo { height:140px }
  .product-details { padding:10px }
  .product h4,.rows dt,tbody th { font-size:14px }
  .product p,.rows dd,td { font-size:19px }
  td,th { padding:9px 5px }
  .foot { flex-wrap:wrap; justify-content:center; gap:4px 18px }
  .partners { width:100%; justify-content:center; gap:20px; margin-bottom:6px }
  .partners img { height:22px }
  .social { margin-left:0 }
  .foot>a { text-align:center }
  .paper-grid img { height:180px }
}
@media(prefers-reduced-motion:reduce) {
  .slide { transition:none }
  .slide.visible,.slide.fading { animation:none }
}