/* enkouji 基調。色: #1C1C1C 文字 / #FAFAFA 暗い面の上 / #F1F1EF 地 / 紋は PNG の紫。角丸 0・影なし */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html[lang=en]{--f:"Crimson Text","Shippori Mincho B1",serif}
html[lang=ja]{--f:"Shippori Mincho B1",serif}
html[lang=zh-Hant]{--f:"Noto Serif TC","Shippori Mincho B1",serif}
body{background:#F1F1EF;color:#1C1C1C;font:500 16px/28.8px var(--f);overflow-x:hidden}
html[lang=en] body{font-size:17px;line-height:28.9px;font-weight:400}
a{color:inherit;text-decoration:none;transition:opacity .4s}
a:hover{opacity:.5}
:focus-visible{outline:1px solid #1C1C1C;outline-offset:5px}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.v{writing-mode:vertical-rl;font:500 22px/33px "Shippori Mincho B1",serif;letter-spacing:3.2px}

/* 右上に固定のメニュー(罫線 1px で囲う) */
.nv{position:fixed;top:12px;right:20px;z-index:10;display:flex;flex-wrap:nowrap;white-space:nowrap;column-gap:20px;padding:0 20px;background:#F1F1EF;border:1px solid #1C1C1C}
.nv a{font-weight:500;font-size:17px;letter-spacing:2.21px;min-height:44px;display:inline-flex;align-items:center}
.nv a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

.mn{display:none}

/* header: 紙の面 */
.hd{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:62px 20px 0 54px}
.hd.tall{min-height:438px}
.logo{display:block;width:fit-content}
.crest{width:49px;height:49px;object-fit:contain}
.logo .nm{display:block;writing-mode:vertical-rl;margin-top:20px;font:500 22px/1 "Shippori Mincho B1",serif;letter-spacing:3.2px}
.p-order .hd{padding-bottom:62px}
.lg{display:flex;align-items:center;font:500 14px/28px "Shippori Mincho B1",serif}
.lg a[lang=zh-Hant]{font-family:"Noto Serif TC","Shippori Mincho B1",serif}
.lg a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;opacity:.72}
.lg a+a{border-left:1px solid #1C1C1C}
.lg a:last-child{padding-right:0}
.lg a[aria-current]{opacity:1}
.lg a[aria-current]::after{content:"";position:absolute;left:50%;bottom:6px;width:3px;height:3px;margin-left:-1px;background:#1C1C1C}

/* 最初の写真: クロスフェード */
.fv{position:relative;height:690px;overflow:hidden}
.fv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s linear}
.fv img.on{opacity:1}

/* about: 小さな文字の塊(中央やや左) */
.about{padding:267px 20px 245px}
.about .in{width:430px;max-width:100%;margin-left:max(0px,calc(50% - 335px));display:flex;gap:20px}
.about h1,.about h2{font:500 22px/33px var(--f);letter-spacing:3.2px;margin-bottom:20px}
.about h2:not(:first-child){margin-top:62px}
.about p{margin-bottom:20px}
.about b{font-weight:500;letter-spacing:1.02px}
.about .lead{font-size:17px;line-height:28.9px}
.deco{flex:none;margin-top:5px}
.js .about .in:not(.on){opacity:0;transform:translateY(20px)}
.js .about .in{transition:opacity 1s ease-out,transform 1s ease-out}

/* 詳しく見る */
.more{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:0 20px 0 0;font-weight:500;letter-spacing:1.02px}
.more:hover{opacity:1}
.more svg{flex:none;transition:opacity .6s}
.more:hover svg{opacity:.5}
.more .lb .w{display:inline-block;white-space:nowrap}
.more .lb span span{display:inline-block;white-space:pre;transition:opacity .6s ease-out}
.more .lb span span.dim{opacity:.35;transition:opacity .4s ease-out}

/* ギャラリー: 左右 20px・列の間 5px */
.gal2,.quad{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 20px;margin-top:5px}
.gal2 div{aspect-ratio:698/860;overflow:hidden}
.quad div{aspect-ratio:698/480;overflow:hidden}
.gal2 img,.quad img{width:100%;height:100%;object-fit:cover}
.about+.gal2,.about+.quad{margin-top:0}
.band{padding:0 20px;margin-top:5px}
.band img{width:100%;height:784px;object-fit:cover}

/* 注文: 見出しの帯 */
.ob{display:grid;grid-template-columns:1fr 1fr;min-height:280px;border-bottom:1px solid #1C1C1C}
.ot{padding:62px 31px 62px 54px;align-self:center}
.ot h1{font:500 22px/33px var(--f);letter-spacing:3.2px;margin-bottom:20px}
.ot p{margin:0}
.oi{overflow:hidden;min-height:280px}
.oi img{width:100%;height:100%;object-fit:cover}
.flt{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;align-items:center;column-gap:20px;padding:62px 20px;font-weight:500;letter-spacing:1.02px;white-space:nowrap}
.flt::-webkit-scrollbar{display:none}
.flt span{margin-right:20px;flex:none}
.flt button{flex:none;min-height:44px;padding:0;letter-spacing:1.02px;transition:opacity .4s}
.flt button:hover{opacity:.5}
.flt button[aria-pressed=true]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:5px;row-gap:20px;padding:0 20px}
.card{display:flex;flex-direction:column;padding-bottom:62px}
.card[hidden]{display:none}
.card .ph{position:relative;aspect-ratio:698/860;display:flex;align-items:center;justify-content:center;background:#F1F1EF}
.card .ph img{height:70%;width:auto;max-width:90%;object-fit:contain}
.tag{position:absolute;left:0;top:0;background:#1C1C1C;color:#FAFAFA;font:500 14px/18px var(--f);letter-spacing:1.02px;padding:8px 12px}
.ct{padding:20px 12px 0 0;display:flex;flex-direction:column;flex:1}
.ct .ln{font-size:17px;line-height:28.9px;font-weight:500}
.ct h2{font:500 15px/28.8px var(--f);letter-spacing:1.02px;margin-top:5px}
.ct .sm{font-size:15px;line-height:24px;margin-top:5px}
.buy{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pr{font-weight:500;letter-spacing:1.02px;font-size:16px}
.add{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:15px;letter-spacing:1.02px;transition:opacity .4s}
.add:hover{opacity:.5}
.add span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* footer */
.ft{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:90px 79px 84px;border-top:1px solid #1C1C1C;margin-top:20px}
.fl p{margin-bottom:5px}
.fn{font-weight:500;letter-spacing:1.95px}
.fnav{display:flex;flex-wrap:wrap;column-gap:20px;margin-top:20px}
.fnav a{min-height:44px;display:inline-flex;align-items:center;letter-spacing:1.02px}
.fr{display:flex;gap:20px}
.fr .v{font-size:15px;line-height:30px;letter-spacing:1.95px}
.ft small{flex-basis:100%;font-size:14px}

@media (max-width:720px){
.nv{display:none}
.mn{display:block;position:fixed;top:12px;right:12px;z-index:10;background:#F1F1EF;border:1px solid #1C1C1C}
.mn summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 20px;font-weight:500;font-size:16px;letter-spacing:2.21px}
.mn summary::-webkit-details-marker{display:none}
.ml{display:flex;flex-direction:column;padding:0 20px 12px}
.ml a{min-height:44px;display:flex;align-items:center;font-weight:500;font-size:16px;letter-spacing:1.02px}
.ml a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.p-order .hd{padding-bottom:20px}
.ob{grid-template-columns:1fr;min-height:0}
.ot{padding:20px 31px 31px}
.ot .lead{font-size:16px;line-height:28.8px}
.oi{display:none}
.flt{flex-wrap:wrap;overflow:visible;padding:20px 20px 31px;row-gap:0;white-space:normal}
.hd{padding:62px 20px 0 20px;gap:12px}
.hd.tall{min-height:260px}
.fv{height:520px}
.about{padding:120px 31px 110px}
.about .in{margin-left:0;width:100%}
.band img{height:420px}
.grid{padding:0 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ft{padding:90px 31px 84px}
}