/* saint-candles: 値はすべて saint-candles.md の固定値。色 #fff #000 #1D1D1D #F7F5F4 #424242 #4D4D4D rgba(255,255,255,.9) #DFDFDF */
:root{--gap:24px;--space:100px;--ease:cubic-bezier(0.215,0.61,0.355,1);--w:1116px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#000;font:400 14.53px/23.25px Jost,"Noto Sans JP","Noto Sans TC",sans-serif}
html[lang=zh-Hant] body{font-family:Jost,"Noto Sans TC","Noto Sans JP",sans-serif}
html[lang=ja] body{word-break:auto-phrase}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.nw{white-space:nowrap}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:500;letter-spacing:1px;text-transform:uppercase}
h2{font-size:33.31px;line-height:38.31px}
.sm,.sm-head,.btn,.tabs label,.cname,.add,.menu summary{font-size:12.75px;line-height:20.4px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase}
.sm,.sm-head{font-size:14.5px;line-height:23.25px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase}
.sm-head{margin:0 0 12px}
.rule{display:block;width:30px;height:3px;background:#DFDFDF;margin:0 auto 32px}
.gap{height:var(--space)}

/* header: 下層ページは白、高さ89px、下に薄い線。トップは透明で写真に重なり、白い文字 */
.hd{height:89px;display:flex;align-items:center;gap:32px;padding:0 52px;border-bottom:1px solid #DFDFDF;position:relative;background:#fff}
.hd.over{position:absolute;top:0;left:0;right:0;z-index:2;background:transparent;border-bottom:0;color:#fff}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{height:40px;width:auto}
.logo span{font-size:16px;line-height:18px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase}
.dnav{display:flex;gap:32px;flex:1;justify-content:center;text-transform:uppercase}
.dlang{display:flex;gap:16px;font-size:12.75px;letter-spacing:1.5px}
.hd a[aria-current],.ft a[aria-current]{border-bottom:1px solid currentColor}
.menu,.mlang{display:none}
nav a{display:inline-block;padding-bottom:2px;border-bottom:1px solid transparent}

/* hero: 写真の上に白い文字とボタンを直接置く */
.hero{position:relative;height:594px;background:#000;color:#fff}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:center 80%}
.hero-text{position:absolute;left:52px;bottom:52px;max-width:620px}
.hero-text>*{animation:heroFade 1s ease both}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
.hero-text h1{font-size:33.31px;line-height:41.64px;margin:4px 0 16px}
.hero-lead{font-size:21px;line-height:30px;margin-bottom:32px}
.hero-text .place{margin:0;text-transform:none}
.hero-text .hero-lead:last-child{margin-bottom:0}

/* ボタン: 角丸2px、padding 24px 48px、枠だけ */
.btn{display:inline-block;min-width:220px;text-align:center;padding:24px 48px;line-height:12.75px;border:1px solid #fff;border-radius:2px;color:#fff;background:transparent}
.btn.dark{border-color:#000;color:#000}

/* 区切りは余白と全幅の写真 */
.sec{padding:var(--space) 52px 0}
.sec.top0{padding-top:64px}
.center{text-align:center}
.narrow{max-width:620px;margin:0 auto}
.para{text-align:left}
.para+.para{margin-top:23.25px}
.act{margin-top:48px;text-align:center}
.band{margin-top:var(--space);height:594px}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.wrap{max-width:var(--w);margin:0 auto}
.list-h1{font-size:27.3px;line-height:31.4px;margin-bottom:24px}
.sec h2{margin-bottom:24px}

/* 小さな文字の列(FREE RETURNS / SUPPORT 型) */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:48px var(--gap);text-align:center;color:#424242}
.cols .sm{color:#000;margin-bottom:8px}
.cols.two{max-width:720px}
.cols.three{max-width:900px}

/* 3列のカード */
.grid{max-width:calc(var(--w) + 104px);margin-left:auto;margin-right:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space) var(--gap);margin-top:48px;padding:0 52px}
.card{text-align:center;min-width:0}
.card a{display:block}
.ph{position:relative;aspect-ratio:3/4;background:#fff;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:contain;padding:15%}
.badge{position:absolute;top:0;right:0;background:#F7F5F4;color:#000;padding:4px 8px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase}
.add{position:absolute;left:0;right:0;bottom:0;border:0;border-radius:0;background:#F7F5F4;color:#000;padding:12px 0;font-family:inherit;cursor:pointer;transition:opacity .5s var(--ease)}
.sub{font-size:16px;line-height:23.25px;font-weight:500;margin-top:24px}
.cname{margin:8px 0 8px}
.jp{font-size:12.75px;line-height:20.4px;color:#424242}
.price{font-size:12.75px;line-height:20.4px;margin-top:12px}

/* 願いのタブ: 選んでいるものだけ #F7F5F4 のピル(100px) */
.shop input{position:absolute;opacity:0;pointer-events:none}
.tabs{display:flex;justify-content:center;gap:12px;margin-top:24px;padding:0 52px;overflow-x:auto;white-space:nowrap}
.tabs label{flex:none;padding:12px 24px;border-radius:100px;background:transparent;color:#000;cursor:pointer;transition:background .5s var(--ease)}
#f-all:checked~.tabs label[for=f-all],#f-health:checked~.tabs label[for=f-health],#f-path:checked~.tabs label[for=f-path],#f-protect:checked~.tabs label[for=f-protect]{background:#F7F5F4}
#f-health:checked~.grid .card:not([data-tag=health]),#f-path:checked~.grid .card:not([data-tag=path]),#f-protect:checked~.grid .card:not([data-tag=protect]){display:none}
.center-t{text-align:center;margin-top:48px}

/* 由緒 */
.art h2{text-align:center}
.prose{max-width:620px;margin:0 auto}
.prose p+p{margin-top:23.25px}
.fine{color:#424242;padding-top:48px}
.fine p+p{margin-top:4px}

/* footer: 黒。下の帯 #1D1D1D */
.ft{margin-top:var(--space);background:#000;color:rgba(255,255,255,.9);padding-top:64px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding:0 52px}
.ft nav{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ft nav a{color:#DFDFDF}
.ft .sm{margin-bottom:8px}
.ft .op{margin-top:24px}
.credits{padding:32px 52px 0;font-size:12.75px;line-height:20.4px;color:#DFDFDF}
.base{background:#1D1D1D;margin-top:64px;padding:24px 52px;font-size:12.75px;line-height:20.4px}

@media (hover:hover){.add{opacity:0}.card:hover .add,.add:focus-visible{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-text>*{animation:none}}

/* mobile(390) */
@media (max-width:760px){
 :root{--space:48px}
 body{font-size:13.14px;line-height:21.02px}
 .hd{height:72px;padding:0 20px;gap:0;display:grid;grid-template-columns:1fr auto 1fr;column-gap:8px}
 .hd .dnav,.hd .dlang{display:none}
 .menu{display:block}
 .menu summary{list-style:none;cursor:pointer;width:24px;height:16px;position:relative;font-size:0;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
 .menu summary::-webkit-details-marker{display:none}
 .menu summary::after{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor}
 .panel{position:absolute;left:0;right:0;top:100%;background:#fff;color:#000;border-bottom:1px solid #DFDFDF;padding:24px 20px;z-index:3;display:grid;gap:24px}
 .panel nav{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-transform:uppercase}
 .panel .lg{font-size:12.75px;letter-spacing:1.5px}
 .logo{gap:8px}
 .logo span{font-size:12.75px;line-height:16px;letter-spacing:.5px;max-width:96px}
 .mlang{padding-left:12px}
 .mlang{display:flex;white-space:nowrap;gap:8px;justify-content:flex-end;font-size:12.75px;letter-spacing:1px}
 h2{font-size:23.2px;line-height:26.69px}
 .hero{height:500px}
 .hero-img{object-position:50% 80%}
 .hero-text{left:20px;right:20px;bottom:32px}
 .hero-text h1{font-size:23.2px;line-height:29px}
 .hero-lead{font-size:16px;line-height:24px;margin-bottom:24px}
 .sec{padding:var(--space) 20px 0}
 .sec.top0{padding-top:32px}
 .band{height:360px}
 .list-h1{font-size:20px;line-height:23px}
 .grid{grid-template-columns:repeat(2,1fr);gap:var(--space) 12px;padding:0 20px;margin-top:32px;max-width:none}
 .ph img{padding:10%}
 .sub{font-size:14.53px;line-height:21.02px;margin-top:12px}
 .tabs{padding:0 20px;gap:4px;flex-wrap:wrap;overflow-x:visible;white-space:normal}
 .tabs label{padding:12px 16px}
 .cols3{grid-template-columns:1fr;padding:0 20px;gap:32px}
 .credits,.base{padding-left:20px;padding-right:20px}
 .cols{gap:32px}
}