:root{
  --bg:#f7f4ef;
  --ink:#39352f;
  --sub:#8d857a;
  --text-sub:#6a6359;
  --line:#e4ddd2;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Jost','Shippori Mincho',serif;font-weight:300;-webkit-font-smoothing:antialiased;font-size:14px;line-height:2}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.en{letter-spacing:.32em;text-transform:uppercase}
.jp-serif{font-family:'Shippori Mincho',serif}

/* header / footer */
header{display:flex;justify-content:space-between;align-items:center;padding:30px 48px;flex-wrap:wrap;gap:16px}
.logo{font-size:18px;letter-spacing:.5em;font-weight:400}
nav{display:flex;gap:28px;font-size:11px;flex-wrap:wrap}
nav a{color:var(--sub);transition:color .3s}
nav a:hover{color:var(--ink)}
footer{border-top:1px solid var(--line);margin-top:140px;padding:56px 48px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--sub);flex-wrap:wrap;gap:20px}
footer .links{display:flex;gap:24px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* index */
.hero{height:82vh;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.lead{text-align:center;padding:120px 24px 140px}
.lead h1{font-weight:300;font-size:clamp(24px,3.6vw,36px);letter-spacing:.3em}
.lead p{margin-top:26px;font-size:11px;color:var(--sub)}
.sec-title{text-align:center;font-size:12px;color:var(--sub);margin-bottom:60px}
.collection{max-width:1200px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.collection img{width:100%;aspect-ratio:3/4;object-fit:cover}
.store{text-align:center;padding:80px 0 150px}
.store a{display:inline-block;border-bottom:1px solid var(--ink);padding-bottom:8px;font-size:12px}
.moment{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;min-height:80vh}
.moment .visual{overflow:hidden}
.moment .visual img{width:100%;height:100%;object-fit:cover}
.moment .copy{display:flex;align-items:center;justify-content:center;padding:80px 24px}
.moment .copy p{writing-mode:vertical-rl;font-size:clamp(20px,2.4vw,28px);letter-spacing:.42em;line-height:2.6}
.teaser{border-top:1px solid var(--line);padding:140px 24px;text-align:center}
.teaser h2{font-size:12px;color:var(--sub);margin-bottom:48px}
.teaser p{font-size:14px;line-height:3;letter-spacing:.18em;max-width:34em;margin:0 auto}
.teaser .more{display:inline-block;margin-top:48px;border-bottom:1px solid var(--ink);padding-bottom:6px;font-size:11px}

/* sub pages */
.page{max-width:760px;margin:0 auto;padding:60px 24px 0}
.page-title{text-align:center;font-size:13px;color:var(--sub);margin-bottom:90px}
.page h2{font-size:16px;font-weight:400;letter-spacing:.24em;margin:100px 0 36px}
.page h2:first-of-type{margin-top:0}
.page h3{font-size:13px;font-weight:400;letter-spacing:.18em;margin:48px 0 16px;color:var(--ink)}
.page p, .page li{font-size:13px;line-height:2.4;letter-spacing:.06em}
.page ul, .page ol{padding-left:1.4em;margin-bottom:1em}
.page .note{color:var(--text-sub);font-size:12px}
.page figure{margin:60px 0}
.page figure img{width:100%}
dl.spec{margin-bottom:1em}
dl.spec dt{font-weight:400;letter-spacing:.12em;margin-top:20px}
dl.spec dd{margin-left:0;font-size:13px;color:var(--text-sub)}
table.tokusyo{width:100%;border-collapse:collapse;font-size:13px}
table.tokusyo th, table.tokusyo td{border-top:1px solid var(--line);padding:20px 8px;text-align:left;vertical-align:top;line-height:2}
table.tokusyo th{width:11em;font-weight:400;letter-spacing:.08em;color:var(--text-sub)}

@media(max-width:760px){
  header{padding:20px 24px}
  .hero{height:58vh}
  .collection{grid-template-columns:1fr;padding:0 24px}
  .moment{grid-template-columns:1fr;min-height:auto}
  .moment .visual{height:60vh}
  .moment .copy{padding:80px 24px}
  footer{flex-direction:column;align-items:flex-start}
  table.tokusyo th{width:8em}
}