/* 株式会社宝華：tokens は docs/reference-production-plan.md に合わせる */
@font-face{font-family:"Noto Serif JP";src:url(/assets/fonts/serif-jp.woff2) format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:"Noto Sans JP";src:url(/assets/fonts/sans-jp.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Noto Serif SC";src:url(/assets/fonts/serif-sc.woff2) format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url(/assets/fonts/sans-sc.woff2) format("woff2");font-weight:400 500;font-display:swap}

:root{
  --bg:#F2EFE9;--shade:#E4DDD1;--ink:#1F1B16;--muted:#6E675C;--cinnabar:#B03A2E;--white:#FFFFFF;
  --serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Noto Sans JP","Yu Gothic","Hiragino Sans",sans-serif;
  --serif-zh:"Noto Serif SC","Songti SC","SimSun",serif;
  --sans-zh:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --cloth:url(/assets/cloth-flat.jpg);
  --gutter:max(5.7vw,calc((100vw - 1640px)/2));
  --u:min(1vw,1.6vh);
  --text:clamp(15px,calc(var(--u)*1.2),19px);
  --small:clamp(12.5px,calc(var(--u)*.95),15px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 var(--text)/1.9 var(--sans);overflow-x:clip;word-break:auto-phrase}
:lang(zh-Hans){font-family:var(--sans-zh)}
img{display:block;max-width:100%;height:auto}
picture{display:block}
.sp{display:none}
.nb{white-space:nowrap}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
th{font-weight:400;text-align:left}
:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:300}
:lang(zh-Hans) h1,:lang(zh-Hans) h2,:lang(zh-Hans) h3{font-family:var(--serif-zh);font-weight:400}

.yt,:lang(zh-Hans).yt{font-family:var(--serif-zh);font-weight:400}
.site-nav .yt,.hero__entries .yt,.rows .yt{-webkit-text-stroke:.25px currentColor}
.link{border-bottom:1px solid currentColor;padding-bottom:.18em;transition:color .2s}
.link:hover{color:var(--cinnabar)}
.stitch{display:block;height:12px;background:url(/assets/stitch.svg) repeat-x left center}
.cloth{background:var(--bg) var(--cloth)}

/* 全局导航 */
.site-nav{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 32px;padding:clamp(18px,calc(var(--u)*2.5),44px) var(--gutter) 0}
.brand{font-family:var(--serif);font-weight:300;font-size:clamp(19px,calc(var(--u)*1.65),28px);letter-spacing:.08em;line-height:1.4}
.site-nav ul{display:flex;flex-wrap:wrap;font-size:clamp(12.5px,calc(var(--u)*1.05),16px);letter-spacing:.04em;line-height:1.6}
.site-nav li+li::before{content:"/";margin:0 .7em;color:var(--muted)}
.site-nav a{transition:color .2s}
.site-nav a:hover{color:var(--cinnabar)}
.site-nav a[aria-current]{border-bottom:1px solid currentColor}

/* 1 首屏 */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--bg)}
.hero__cloth{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:38% 50%}
.hero__text{position:absolute;left:var(--gutter);top:24%}
.hero h1{font-size:calc(var(--u)*4.9);line-height:1.36;letter-spacing:.05em}
.hero__text p{margin-top:calc(var(--u)*1.9);font-size:clamp(15px,calc(var(--u)*1.32),24px);letter-spacing:.03em}
.hero__entries{position:absolute;left:var(--gutter);bottom:9%;display:flex;gap:calc(var(--u)*3);font-size:clamp(14px,calc(var(--u)*1.2),20px);letter-spacing:.03em}

/* 2 工厂 */
.factory{padding:clamp(56px,calc(var(--u)*6.4),120px) var(--gutter) clamp(44px,calc(var(--u)*5),96px)}
.factory h2{font-size:min(calc(var(--u)*3.5),62px);line-height:1.4;letter-spacing:.05em}
.factory__head{display:grid;grid-template-columns:minmax(0,1fr) 33%;column-gap:calc(var(--u)*2.6);align-items:end}
.factory__head p{margin-top:calc(var(--u)*1.7)}
.proof{border-top:1px solid var(--ink);font-size:clamp(14px,calc(var(--u)*1.15),18px)}
.proof th,.proof td{padding:calc(var(--u)*.6) 0;border-bottom:1px solid var(--ink);vertical-align:baseline;line-height:1.6}
.proof th{width:4.5em;padding-right:1em;color:var(--muted)}
.process{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,350px));column-gap:18px;justify-content:space-between;margin-top:calc(var(--u)*3)}
.process img{width:100%;aspect-ratio:1.45;object-fit:cover;object-position:50% 0}
.process figcaption{margin-top:calc(var(--u)*.4 + 36px);text-align:center;line-height:1.6;letter-spacing:.12em}
.process::after{content:"";position:absolute;left:calc(var(--gutter)*-1);width:100vw;bottom:calc(1.6em + var(--u)*.4 + 12px);height:12px;background:url(/assets/stitch.svg) repeat-x left center}

/* 3 寝具 */
.textile{display:grid;grid-template-columns:44% 56%;min-height:100vh}
.textile__photo{position:relative;overflow:hidden;background:var(--ink)}
.textile__photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 100%}
.image-note{position:absolute;left:14px;bottom:10px;color:var(--white);font-size:clamp(12.5px,calc(var(--u)*.87),16px);letter-spacing:.04em;line-height:1.6}
.wash-label{position:absolute;right:clamp(8px,calc(var(--u)*.97),14px);bottom:clamp(8px,calc(var(--u)*.97),14px);width:max(146px,calc(var(--u)*11.4));padding:7px 8px;background:var(--bg) var(--cloth);text-align:center;font-size:clamp(11px,calc(var(--u)*.83),16px);line-height:1.62;letter-spacing:.02em}
.wash-label::before,.wash-label::after{content:"";display:block;height:6px;margin:0 -2px;background:url(/assets/stitch.svg) repeat-x left center/240px 6px}
.wash-label p{padding:5px 0}
.textile__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,calc(var(--u)*5),96px) var(--gutter) clamp(48px,calc(var(--u)*5),96px) calc(var(--u)*4.4)}
.textile h2{font-size:calc(var(--u)*2.95);line-height:1.4;letter-spacing:.03em}
.textile__body>p:first-of-type{margin-top:calc(var(--u)*1.1)}
.uses{margin-top:calc(var(--u)*2.6);border-top:1px solid var(--muted)}
.uses th,.uses td{padding:calc(var(--u)*1.35) 0;border-bottom:1px solid var(--muted);vertical-align:baseline;line-height:1.7}
.uses th{width:37%;padding-right:1em;font-size:clamp(15px,calc(var(--u)*1.25),20px)}
.uses td{font-size:clamp(14px,calc(var(--u)*1.1),18px)}
.materials{margin-top:calc(var(--u)*1.5);color:var(--muted);font-size:clamp(13.5px,calc(var(--u)*1.02),17px)}
.textile__links{display:flex;gap:calc(var(--u)*2.6);margin-top:calc(var(--u)*1.7)}

/* 4 曜图 */
.yaotu{position:relative;display:grid;grid-template-columns:minmax(0,41%) minmax(0,1fr);gap:calc(var(--u)*4);align-items:center;min-height:100vh;padding:calc(var(--u)*5) var(--gutter) calc(var(--u)*3.4);background:var(--cinnabar);color:var(--white)}
.yaotu::before,.yt-head::after{content:"";position:absolute;left:0;right:0;top:calc(var(--u)*1.5);height:12px;background:url(/assets/stitch-white.svg) repeat-x left center}
.yaotu :focus-visible,.yt-head :focus-visible{outline-color:var(--white)}
.yaotu__mark{width:calc(var(--u)*4.4);height:calc(var(--u)*4.4)}
.yaotu h2{margin-top:calc(var(--u)*.6);font-family:var(--serif-zh);font-weight:400;font-size:calc(var(--u)*7.4);line-height:1.2;letter-spacing:.08em}
.yaotu__sub{font-family:var(--serif);font-weight:300;font-size:clamp(16px,calc(var(--u)*1.5),24px);letter-spacing:.06em;line-height:1.6}
.yaotu__desc{margin-top:calc(var(--u)*1.4);line-height:1.8}
.yaotu__list{margin-top:calc(var(--u)*1.4);line-height:1.85}
.yaotu__note{margin-top:calc(var(--u)*1.4);line-height:1.75}
.yaotu__link{display:inline-block;margin-top:calc(var(--u)*1.4)}
.yaotu .link:hover,.yt-head .link:hover{color:var(--white);opacity:.75}
.yaotu__screen img{width:100%}
.yaotu__screen figcaption{margin-top:8px;font-size:var(--small);line-height:1.6;text-align:right}

/* 5 结尾 */
.closing{display:flex;flex-direction:column;min-height:80vh;padding-top:calc(var(--u)*9)}
.closing__summary{padding:0 var(--gutter)}
.closing h2{font-size:clamp(17px,calc(var(--u)*1.5),24px);letter-spacing:.3em;line-height:1.6}
/* 表格右端对准线结：宽度 = 内容宽 - 邮箱字宽 - 线结 */
.summary{width:calc(100% - var(--u)*30.8 - 25px);margin-top:calc(var(--u)*2);border-top:1px solid var(--ink)}
.summary th,.summary td{padding:calc(var(--u)*1.05) calc(var(--u)*.4);border-bottom:1px solid var(--ink);line-height:1.7;vertical-align:baseline}
.summary th{width:7.5em}
.mail{margin:auto 0;padding-top:calc(var(--u)*3)}
.mail p{padding-right:var(--gutter);text-align:right;letter-spacing:.03em;line-height:1.6}
.thread-row{display:flex;align-items:center;margin-top:calc(var(--u)*.3);padding-right:var(--gutter)}
.thread-row .stitch{flex:1;min-width:24px}
.knot{flex:none;width:40px;height:40px;margin:0 calc(var(--u)*1.3) 0 -3px}
.mail-addr{flex:none;font-family:var(--serif);font-weight:300;font-size:calc(var(--u)*3.5);letter-spacing:.02em;line-height:1.3;transition:color .2s}
.mail-addr:hover{color:var(--cinnabar)}
.site-foot{padding:calc(var(--u)*4) var(--gutter) calc(var(--u)*2.6);text-align:right;font-size:var(--small);line-height:1.6}
.site-foot a:hover{color:var(--cinnabar)}

/* 子页面 */
.page{padding:calc(var(--u)*5.6) var(--gutter) 0}
.page h1{font-size:calc(var(--u)*3.5);line-height:1.4;letter-spacing:.05em}
.lead{margin-top:calc(var(--u)*1.5);max-width:46em}
.block{display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);gap:calc(var(--u)*4);margin-top:calc(var(--u)*5);padding-top:calc(var(--u)*2.4);border-top:1px solid var(--muted)}
.block h2{font-size:calc(var(--u)*2);line-height:1.5;letter-spacing:.04em}
.rows th,.rows td{padding:calc(var(--u)*.9) 0;border-bottom:1px solid var(--shade);vertical-align:baseline;line-height:1.8}
.rows tr:first-child th,.rows tr:first-child td{padding-top:0}
.rows th{width:12em;padding-right:1em;color:var(--muted)}
.factory-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1240px;margin-top:calc(var(--u)*1.6)}
.factory-row img{width:100%;aspect-ratio:1.45;object-fit:cover;object-position:50% 0}
.factory-row figcaption{margin-top:6px;font-size:var(--small);text-align:center;letter-spacing:.1em}
.flow+.flow{margin-top:calc(var(--u)*2.4)}
.flow h3{font-size:clamp(16px,calc(var(--u)*1.3),21px);letter-spacing:.04em}
.flow ol{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px calc(var(--u)*1.5);margin-top:6px;padding-top:18px}
.flow ol::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:url(/assets/stitch.svg) repeat-x left center}
.product{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:calc(var(--u)*3);align-items:start}
.product figcaption{margin-top:6px;font-size:var(--small);color:var(--muted)}
.product .rows th{width:6em}
.prose h2{font-size:calc(var(--u)*1.7);line-height:1.6;letter-spacing:.04em;margin-top:calc(var(--u)*3)}
.prose p,.prose ul{margin-top:calc(var(--u)*.8);max-width:46em}
.prose li{padding-left:1em;text-indent:-1em}
.prose li::before{content:"・"}
.page-end{margin-top:calc(var(--u)*5)}
.page-end .mail{margin-top:0;padding-top:0}

/* 曜图子页面 */
.yt-head{position:relative;padding:calc(var(--u)*5.4) var(--gutter) calc(var(--u)*3.4);background:var(--cinnabar);color:var(--white)}
.yt-head::after{top:calc(var(--u)*1.4)}
.yt-head__top{display:flex;align-items:center;gap:calc(var(--u)*1.6)}
.yt-head__top img{width:calc(var(--u)*4.6);height:calc(var(--u)*4.6)}
.yt-head h1{font-family:var(--serif-zh);font-weight:400;font-size:calc(var(--u)*5.2);line-height:1.2;letter-spacing:.08em}
.yt-head__sub{margin-top:calc(var(--u)*1);font-family:var(--serif);font-weight:300;font-size:clamp(17px,calc(var(--u)*1.6),26px);letter-spacing:.05em;line-height:1.6}
.yt-head__sub:lang(zh-Hans){font-family:var(--serif-zh);font-weight:400}
.yt-head__lead{margin-top:calc(var(--u)*.9);max-width:46em}
.yt-head__note{margin-top:calc(var(--u)*.9)}
.lang{margin-top:calc(var(--u)*1.2);font-size:var(--small);line-height:1.6}
.feature{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:calc(var(--u)*4);align-items:start;margin-top:calc(var(--u)*4.6);padding-top:calc(var(--u)*2.4);border-top:1px solid var(--muted)}
.feature h2{font-size:calc(var(--u)*2.3);line-height:1.45;letter-spacing:.04em}
.feature__one{margin-top:calc(var(--u)*.9)}
.feature ul{margin-top:calc(var(--u)*1.2);color:var(--muted);font-size:clamp(14px,calc(var(--u)*1.06),17px);line-height:1.85}
.feature li{padding-left:1em;text-indent:-1em}
.feature li::before{content:"・"}
.feature figure img{width:100%;border:1px solid var(--shade)}
.feature figcaption{margin-top:8px;font-size:var(--small);color:var(--muted);line-height:1.6;text-align:right}

/* 竖放的平板：屏幕很高，整屏高度的版面会空掉 */
@media (min-width:761px) and (max-aspect-ratio:1/1){
  .hero{min-height:72vh}
  .factory__head{display:block}
  .proof{margin-top:24px}
  .textile,.yaotu,.closing{min-height:0}
  .textile__photo{min-height:620px}
  .textile__photo>img{object-position:30% 100%}
  .wash-label{width:150px;font-size:11px}
  .yaotu{padding:64px var(--gutter) 40px}
  .closing{padding-top:64px}
  .mail{margin:0;padding-top:72px}
  .site-foot{padding-top:48px}
}

/* 手机 */
@media (max-width:760px){
  :root{--gutter:24px;--u:14.4px;--text:15px;--small:12.5px}
  .site-nav ul{flex-wrap:nowrap;font-size:clamp(11px,3.2vw,13px);letter-spacing:0;white-space:nowrap}
  .site-nav li+li::before{margin:0 .4em}
  .brand{font-size:19px}
  .hero{display:flex;flex-direction:column;background:var(--bg) var(--cloth)}
  .hero__cloth{position:static;flex:1 1 0;order:9;width:100%;min-height:230px;height:auto;object-position:72% 70%}
  .hero__text,.hero__entries{position:static}
  .hero__text{padding:40px var(--gutter) 0}
  .hero h1{font-size:clamp(22px,7.1vw,40px)}
  .hero__text p{margin-top:12px;font-size:15px}
  .hero__entries{flex-direction:column;align-items:flex-start;gap:8px;padding:20px var(--gutter) 16px;font-size:15px}
  .factory{padding:52px var(--gutter) 40px}
  .factory h2{font-size:clamp(18px,5.4vw,30px)}
  .factory__head{display:block}
  .factory__head p br{display:none}
  .proof{margin-top:22px;font-size:14px}
  .proof th,.proof td{padding:9px 0}
  .proof th{width:4.8em}
  .process{grid-template-columns:1fr 1fr;gap:20px 12px;margin-top:24px}
  .process::after{display:none}
  .process figure{position:relative}
  .process figcaption{margin-top:26px;font-size:14px}
  .process figure::after{content:"";position:absolute;bottom:26px;height:12px;background:url(/assets/stitch.svg) repeat-x left center}
  .process figure:nth-child(odd)::after{left:-24px;right:-6px}
  .process figure:nth-child(even)::after{left:-6px;right:-24px;background-position:-14px center}
  .textile{display:block;min-height:0}
  .textile__photo{overflow:visible;background:none}
  .textile__photo>img{position:static;height:auto;aspect-ratio:1;object-position:0 88%}
  .image-note{position:static;padding:6px var(--gutter) 0;color:var(--muted)}
  .wash-label{position:static;width:auto;margin:14px var(--gutter) 0;font-size:13px}
  .textile__body{padding:36px var(--gutter) 48px}
  .textile h2{font-size:clamp(19px,5.4vw,28px)}
  .uses{margin-top:22px}
  .uses th,.uses td{display:block;width:auto;padding:0;border:0}
  .uses tr{display:block;padding:12px 0;border-bottom:1px solid var(--muted)}
  .uses th{font-size:15.5px}
  .uses td{font-size:14px;color:var(--muted)}
  .materials{margin-top:18px}
  .textile__links{gap:24px;margin-top:20px}
  .yaotu{display:block;min-height:0;padding:48px var(--gutter) 40px}
  .yaotu::before{top:18px}
  .yaotu__mark{width:52px;height:52px}
  .yaotu h2{font-size:64px}
  .yaotu__sub{font-size:17px}
  .yaotu__desc,.yaotu__list,.yaotu__note,.yaotu__link{margin-top:14px}
  .yaotu__screen{margin-top:28px}
  .closing{min-height:0;padding-top:56px}
  .closing h2{font-size:17px}
  .summary{width:100%;margin-top:18px}
  .summary th,.summary td{padding:11px 2px}
  .summary th{width:5.5em}
  .mail{margin:0;padding-top:56px}
  .knot{width:32px;height:32px;margin-right:8px}
  .mail-addr{font-size:clamp(24px,7.2vw,34px)}
  .site-foot{padding:36px var(--gutter) 24px}
  .page{padding-top:40px}
  .page h1{font-size:clamp(22px,7.1vw,40px)}
  .sp{display:inline}
  .block,.feature{display:block;margin-top:40px;padding-top:20px}
  .block h2{font-size:19px;margin-bottom:12px}
  .rows th,.rows td{display:block;width:auto;padding:0;border:0}
  .rows tr{display:block;padding:9px 0;border-bottom:1px solid var(--shade)}
  .rows tr:first-child{padding-top:0}
  .rows td{line-height:1.75}
  .factory-row{grid-template-columns:1fr 1fr}
  .product{grid-template-columns:1fr}
  .product .rows th{width:auto}
  .flow ol{justify-content:flex-start}
  .prose h2{font-size:17px;margin-top:28px}
  .prose p,.prose ul{margin-top:8px}
  .page-end{margin-top:48px}
  .yt-head{padding:44px var(--gutter) 32px}
  .yt-head::after{top:16px}
  .yt-head__top{gap:14px}
  .yt-head__top img{width:52px;height:52px}
  .yt-head h1{font-size:52px}
  .yt-head__sub{margin-top:12px;font-size:16.5px}
  .yt-head__lead,.yt-head__note,.lang{margin-top:12px}
  .feature h2{font-size:21px}
  .feature__one{margin-top:8px}
  .feature ul{margin-top:10px}
  .feature figure{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}