:root{
  --paper:#f7f6f3;
  --card:#ffffff;
  --ink:#17191e;
  --muted:#6a6e77;
  --line:#e2dfd8;
  --accent:#2c4470;
  --accent-soft:#e8ecf3;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --latin:"Cormorant Garamond","Times New Roman",serif;
  --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.85;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* header */
.hd{position:sticky;top:0;z-index:20;background:rgba(247,246,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.brand b{font-family:var(--latin);font-weight:600;font-size:26px;letter-spacing:.18em}
.brand span{font-size:11px;color:var(--muted);letter-spacing:.06em}
.nav{display:flex;gap:28px;font-size:13px;letter-spacing:.05em}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.menu-btn{display:none;background:none;border:0;font-size:13px;letter-spacing:.1em;cursor:pointer;color:var(--ink)}

/* notice */
.notice{background:var(--ink);color:#fff;font-size:12.5px;text-align:center;padding:9px 16px;letter-spacing:.04em}
.notice b{font-weight:500;color:#cfd8ea}

/* hero */
.hero{padding:88px 0 96px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.eyebrow{font-family:var(--latin);letter-spacing:.32em;font-size:13px;color:var(--accent);text-transform:uppercase}
.hero h1{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.45;margin:18px 0 22px;letter-spacing:.04em}
.hero p.lead{color:var(--muted);max-width:30em}
.btns{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-size:13.5px;letter-spacing:.08em;padding:14px 28px;border:1px solid var(--ink);transition:.2s}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.collage img{width:100%;aspect-ratio:1;object-fit:cover;background:#eee}

/* sections */
section.sec{padding:96px 0;border-top:1px solid var(--line)}
section.sec.white{background:var(--card)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.sec-head .en{font-family:var(--latin);font-size:13px;letter-spacing:.32em;color:var(--accent);text-transform:uppercase}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:.06em;margin-top:6px}
.sec-head p{color:var(--muted);max-width:34em;font-size:14px}

/* business */
.biz{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.biz div{background:var(--card);padding:36px 30px 40px}
.biz .no{font-family:var(--latin);font-size:34px;color:var(--accent);line-height:1}
.biz h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:18px 0 12px;letter-spacing:.04em}
.biz p{font-size:14px;color:var(--muted)}
.biz .tag{display:inline-block;margin-top:16px;font-size:11.5px;letter-spacing:.06em;padding:3px 10px;background:var(--accent-soft);color:var(--accent)}

/* products */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.chip{font:inherit;font-size:13px;background:none;border:1px solid var(--line);padding:7px 16px;cursor:pointer;color:var(--muted);letter-spacing:.04em}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 24px}
.item{cursor:pointer;background:none;border:0;text-align:left;font:inherit;color:inherit}
.item .ph{overflow:hidden;background:#ece9e3}
.item img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s}
.item:hover img{transform:scale(1.04)}
.item .meta{padding-top:14px}
.item .code{font-family:var(--latin);font-size:13px;letter-spacing:.14em;color:var(--muted)}
.item .nm{font-family:var(--serif);font-size:15.5px;margin:2px 0 2px}
.item .cl{font-size:12px;color:var(--muted)}
.item .pr{font-size:13.5px;margin-top:6px}
.item .pr small{font-size:11px;color:var(--muted);margin-left:4px}
.spec{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--card)}
.spec div{padding:24px 22px;border-right:1px solid var(--line)}
.spec div:last-child{border-right:0}
.spec dt{font-size:11.5px;letter-spacing:.14em;color:var(--accent)}
.spec dd{font-size:14px;margin-top:6px}

/* wholesale */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:f}
.flow li{list-style:none;border-top:2px solid var(--ink);padding-top:18px}
.flow li::before{counter-increment:f;content:"STEP 0" counter(f);font-family:var(--latin);letter-spacing:.2em;font-size:13px;color:var(--accent)}
.flow h3{font-family:var(--serif);font-weight:500;font-size:17px;margin:8px 0 8px}
.flow p{font-size:13.5px;color:var(--muted)}
.ws-note{margin-top:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 34px;background:var(--accent-soft);flex-wrap:wrap}
.ws-note p{font-size:14px}

/* company */
.co{display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
.co .intro{font-family:var(--serif);font-size:17px;line-height:2.1}
table.info{width:100%;border-collapse:collapse;font-size:14px}
table.info th,table.info td{text-align:left;padding:16px 4px;border-bottom:1px solid var(--line);vertical-align:top}
table.info tr:first-child th,table.info tr:first-child td{border-top:1px solid var(--ink)}
table.info th{width:9em;font-weight:500;color:var(--muted)}
table.info ul{list-style:none}
table.info ul li::before{content:"・"}

/* contact */
.ct{display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
.ct .direct dt{font-size:11.5px;letter-spacing:.14em;color:var(--accent);margin-top:22px}
.ct .direct dd{font-size:18px;font-family:var(--serif)}
.ct .direct dd a{text-decoration:none}
.ct .direct dd.note{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:24px}
form.cf{display:grid;gap:18px}
form.cf label{display:grid;gap:6px;font-size:13px}
form.cf label span em{font-style:normal;color:#a33;font-size:11px;margin-left:6px}
form.cf input,form.cf select,form.cf textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:0}
form.cf input:focus,form.cf select:focus,form.cf textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
form.cf textarea{min-height:150px;resize:vertical}
form.cf .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.cf button{justify-self:start;cursor:pointer;font:inherit}
form.cf .hint{font-size:12px;color:var(--muted)}
.err{color:#a33;font-size:13px;min-height:1em}

/* footer */
footer{background:var(--ink);color:#c9ccd3;padding:56px 0 40px;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer .brand b{color:#fff}
footer .fl{display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none;color:#c9ccd3}
footer a:hover{color:#fff}
footer .cp{width:100%;margin-top:28px;padding-top:22px;border-top:1px solid #33363d;font-size:12px;color:#8b8f98}

/* modal */
.modal{position:fixed;inset:0;background:rgba(15,17,22,.6);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal.on{display:flex}
.modal .box{background:var(--card);max-width:860px;width:100%;display:grid;grid-template-columns:1.1fr 1fr;max-height:92vh;overflow:auto;position:relative}
.modal .box img{width:100%;height:100%;object-fit:cover}
.modal .txt{padding:40px 34px}
.modal .txt h3{font-family:var(--serif);font-weight:500;font-size:24px;margin:4px 0 6px}
.modal .txt .price{font-size:20px;margin:18px 0 4px}
.modal .txt .price small{font-size:12px;color:var(--muted);margin-left:6px}
.modal .txt dl{margin-top:22px;font-size:13.5px;border-top:1px solid var(--line)}
.modal .txt dl div{display:flex;padding:10px 0;border-bottom:1px solid var(--line)}
.modal .txt dt{flex:0 0 6.5em;color:var(--muted)}
.modal .txt .soon{margin-top:22px;font-size:12.5px;color:var(--muted)}
.modal .x{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.9);border:0;font-size:26px;width:40px;height:40px;cursor:pointer;line-height:1}

/* legal page */
.legal{padding:72px 0 96px}
.legal .wrap{max-width:820px}
.legal h1{font-family:var(--serif);font-weight:500;font-size:30px;margin-bottom:36px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:36px 0 10px}
.legal p,.legal li{font-size:14.5px}
.legal ol,.legal ul{padding-left:1.4em}

@media (max-width:960px){
  .hero .wrap,.co,.ct{grid-template-columns:1fr;gap:44px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .biz{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .spec{grid-template-columns:1fr 1fr}
  .spec div:nth-child(2){border-right:0}
  .spec div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:720px){
  body{font-size:14.5px}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:14px 24px;border-top:1px solid var(--line)}
  .menu-btn{display:block}
  .brand span{display:none}
  .hero{padding:52px 0 64px}
  .hero h1{font-size:31px}
  section.sec{padding:68px 0}
  .sec-head h2{font-size:24px}
  .grid{grid-template-columns:1fr 1fr;gap:28px 14px}
  .flow{grid-template-columns:1fr}
  form.cf .row2{grid-template-columns:1fr}
  .modal .box{grid-template-columns:1fr}
  .modal .box img{aspect-ratio:1;height:auto}
  .modal .txt{padding:26px 22px 30px}
}