/* ID: WBT-0180 / v35 / 2026-10-27 — UNI DONUTS TH flagship design proposal. */
:root{color-scheme:light;--uni-paper:#f7f4ed;--uni-ink:#39291f;--uni-brown:#50382b;--uni-milk:#eee4d4;--uni-line:#b8aa98;--uni-small:#6b5140}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--uni-paper);color:var(--uni-ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}p,h1,h2,figure,dl,dd{margin:0}img{display:block;width:100%;height:auto}figure{min-width:0}h1,h2{font-weight:900;line-height:1.27;letter-spacing:-.065em;word-break:auto-phrase;line-break:strict;text-wrap:balance}h1>span,h2>span{display:block;max-width:100%}a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.uni-skip{position:fixed;top:8px;left:8px;padding:12px 18px;background:var(--uni-ink);color:var(--uni-paper);z-index:10;transform:translateY(-150%)}.uni-skip:focus{transform:translateY(0)}
.uni-header{display:flex;justify-content:space-between;align-items:center;gap:30px;background:#fff;padding:19px 5.5%;border-bottom:1px solid var(--uni-line)}.uni-brand{display:block;width:230px;max-width:43%;flex:none}.uni-brand img{width:100%;height:auto}.uni-nav{display:flex;gap:30px;align-items:center;font-size:11px;font-weight:700;line-height:1.6}.uni-nav>a{padding-block:12px;min-height:44px;display:flex;align-items:center}.uni-nav__visit{border-bottom:1px solid currentColor;gap:18px}.uni-nav__visit>span{font-size:20px;line-height:1}
.uni-hero{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);gap:22px 4%;padding:34px 5.5% 22px;align-items:center;min-height:606px}.uni-hero__copy{min-width:0;padding-bottom:18px}.uni-kicker,.uni-section-label{font-size:10px;letter-spacing:.12em;line-height:1.6;font-weight:700}.uni-kicker>span{margin-inline:7px}.uni-hero h1{font-size:clamp(45px,6.2vw,76px);margin:28px 0 35px;max-width:6.4em}.uni-hero__tail>p{font-size:14px;font-weight:500;line-height:1.95;letter-spacing:.025em}.uni-link{display:inline-flex;align-items:center;justify-content:space-between;gap:27px;max-width:100%;min-height:48px;padding:12px 0 10px;border-bottom:1px solid currentColor;font-size:12px;font-weight:700;line-height:1.7}.uni-link>span:first-child{min-width:0}.uni-arrow{font-size:28px;line-height:1;flex:none}.uni-hero .uni-link{margin-top:26px}.uni-hero__photo{align-self:stretch;display:flex;flex-direction:column;min-height:0}.uni-hero__image{height:510px;overflow:hidden;background:#e9e8e5}.uni-hero__image img{width:100%;height:100%;object-fit:cover;object-position:50% 76%}.uni-hero__photo figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;font-size:9px;font-weight:500;line-height:1.5;letter-spacing:.1em}.uni-proposal{grid-column:1 / -1;font-size:9px;letter-spacing:.06em;line-height:1.5;color:var(--uni-small);padding-top:11px;border-top:1px solid var(--uni-line)}.uni-proposal>span{margin-inline:7px}
.uni-chocolate{display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,.44fr);background:var(--uni-ink);color:var(--uni-paper);align-items:center;padding:64px 5.5%;gap:7%}.uni-chocolate__photo{position:relative;overflow:hidden;height:558px}.uni-chocolate__photo img{width:100%;height:100%;object-fit:cover;object-position:center 75%}.uni-chocolate__photo figcaption{position:absolute;left:0;bottom:0;background:var(--uni-ink);color:var(--uni-paper);font-size:9px;letter-spacing:.12em;padding:10px 14px 0 0;line-height:1.5}.uni-chocolate__copy{min-width:0;padding-block:20px}.uni-chocolate .uni-section-label{color:var(--uni-milk)}.uni-chocolate h2{font-size:clamp(43px,5.8vw,74px);margin:35px 0;max-width:6.5em}.uni-small-copy{font-size:13px;font-weight:400;line-height:2;letter-spacing:.015em}.uni-fine-rule{display:block;width:60px;height:1px;background:var(--uni-line);margin:43px 0 18px}.uni-image-note{font-size:10px;letter-spacing:.04em;color:var(--uni-milk)}
.uni-original{display:grid;grid-template-columns:minmax(0,.54fr) minmax(0,.46fr);gap:6%;align-items:center;padding:68px 12%;border-bottom:1px solid var(--uni-line)}.uni-original__copy{min-width:0}.uni-original h2{font-size:clamp(38px,5vw,64px);margin:28px 0}.uni-original__photo{max-width:338px;justify-self:end}.uni-original__photo img{max-width:100%;height:auto;aspect-ratio:530 / 510;object-fit:contain;background:#fff}.uni-original__photo figcaption{font-size:9px;line-height:1.6;letter-spacing:.11em;margin-top:14px}
.uni-takeaway{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,.42fr);gap:30px 7%;align-items:center;padding:66px 5.5% 70px}.uni-takeaway__headline{grid-column:2;grid-row:1;align-self:end;min-width:0}.uni-takeaway h2{font-size:clamp(36px,4.7vw,61px);margin-top:28px;max-width:7.5em}.uni-takeaway__photo{grid-column:1;grid-row:1 / 3;align-self:stretch}.uni-takeaway__photo>img{width:100%;height:570px;object-fit:cover;object-position:center 62%}.uni-takeaway__photo figcaption{display:flex;justify-content:space-between;gap:16px;font-size:9px;line-height:1.7;letter-spacing:.08em;padding-top:13px}.uni-takeaway__aside{grid-column:2;grid-row:2;align-self:start;padding-top:2px}.uni-takeaway__aside>p{font-size:13px;line-height:2}.uni-takeaway .uni-link{margin-top:28px;min-width:190px}
.uni-visit{border-top:1px solid var(--uni-ink);display:grid;grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);gap:7%;padding:65px 5.5% 72px}.uni-visit h2{font-size:clamp(41px,5.5vw,68px);margin-top:28px}.uni-visit__info{min-width:0;padding-top:7px}.uni-visit__brand{font-size:21px;line-height:1.5;font-weight:800;letter-spacing:-.035em}.uni-visit__brand>span{font-size:11px;letter-spacing:.08em;margin-left:14px;vertical-align:middle;white-space:nowrap}.uni-visit__list{margin-top:28px;border-top:1px solid var(--uni-line)}.uni-visit__list>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:18px;padding:19px 0;border-bottom:1px solid var(--uni-line);font-size:11px;line-height:1.9}.uni-visit__list dt{font-weight:700}.uni-visit__sample{font-size:10px;line-height:1.9;margin-top:26px;color:var(--uni-small);max-width:60ch}
.uni-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--uni-ink);color:var(--uni-paper);padding:28px 5.5%;font-size:9px;line-height:1.7;letter-spacing:.05em}.uni-footer>p{font-weight:800;font-size:12px;letter-spacing:-.025em}.uni-footer>p>span{font-weight:400;margin-inline:8px}.uni-footer>a{padding-block:10px;min-height:44px;display:flex;align-items:center;gap:18px}
@media(min-width:1400px){.uni-header,.uni-hero,.uni-chocolate,.uni-takeaway,.uni-visit,.uni-footer{padding-left:max(5.5%,calc((100vw - 1320px)/2));padding-right:max(5.5%,calc((100vw - 1320px)/2))}.uni-hero{min-height:730px}.uni-hero__image{height:630px}.uni-hero h1{font-size:84px}.uni-chocolate__photo{height:650px}.uni-takeaway__photo>img{height:680px}}
@media(max-width:800px) and (min-width:641px){.uni-header{padding-inline:4%}.uni-brand{width:200px}.uni-nav{gap:20px;font-size:10px}.uni-hero{padding-inline:4%;gap:20px 4%;min-height:540px}.uni-hero h1{font-size:clamp(37px,6vw,48px)}.uni-hero__image{height:445px}.uni-hero__tail>p{font-size:12px}.uni-link{font-size:11px;gap:17px}.uni-chocolate{padding:46px 4%;gap:5%}.uni-chocolate__photo{height:470px}.uni-chocolate h2{font-size:45px}.uni-original{padding:55px 7%}.uni-original h2{font-size:40px}.uni-takeaway{padding:50px 4%;gap:25px 5%}.uni-takeaway h2{font-size:36px}.uni-takeaway__photo>img{height:510px}.uni-takeaway__photo figcaption{display:block}.uni-takeaway__photo figcaption>span{display:block;margin-top:3px}.uni-visit{padding:50px 4%;gap:6%}.uni-visit h2{font-size:43px}.uni-visit__list>div{grid-template-columns:70px minmax(0,1fr);gap:12px}.uni-visit__brand{font-size:18px}}
@media(max-width:640px){html{scroll-padding-top:18px}.uni-header{padding:14px 24px;gap:18px;min-height:65px}.uni-brand{width:180px;max-width:53%}.uni-nav{gap:0;font-size:10px;justify-content:flex-end}.uni-nav>a:not(.uni-nav__visit){display:none}.uni-nav__visit{gap:12px;padding:9px 0;min-height:36px}.uni-nav__visit>span{font-size:19px}.uni-hero{display:grid;grid-template-columns:minmax(0,1fr);padding:25px 24px 20px;gap:0;min-height:0}.uni-hero__copy{display:contents}.uni-kicker{grid-column:1;grid-row:1;font-size:9px;letter-spacing:.1em}.uni-hero h1{grid-column:1;grid-row:2;font-size:clamp(42px,13vw,66px);line-height:1.2;letter-spacing:-.06em;margin:20px 0 25px;max-width:100%}.uni-hero__photo{grid-column:1;grid-row:3;margin:0 -24px}.uni-hero__image{height:380px}.uni-hero__image img{object-position:50% 74%}.uni-hero__photo figcaption{font-size:9px;gap:12px;padding:11px 24px 0;letter-spacing:.08em}.uni-hero__tail{grid-column:1;grid-row:4;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:23px 0 20px}.uni-hero__tail>p{font-size:11px;line-height:1.9;flex:none}.uni-hero .uni-link{margin:0;font-size:10px;gap:12px;min-height:46px;max-width:54%}.uni-hero .uni-link>span:first-child{max-width:11em}.uni-arrow{font-size:24px}.uni-proposal{grid-row:5;font-size:9px;padding-top:10px}.uni-chocolate{display:flex;flex-direction:column;padding:0 0 39px;gap:0;align-items:stretch}.uni-chocolate__photo{height:415px;order:2;margin-top:27px}.uni-chocolate__photo img{object-position:50% 75%}.uni-chocolate__photo figcaption{font-size:9px;left:24px;padding:10px 14px 0 0}.uni-chocolate__copy{display:contents}.uni-chocolate .uni-section-label{order:0;padding:36px 24px 0;font-size:9px}.uni-chocolate h2{order:1;font-size:clamp(42px,12.2vw,61px);line-height:1.2;max-width:100%;margin:22px 24px 0}.uni-chocolate h2>span{display:inline}.uni-chocolate h2>span+span:before{content:"";display:block}.uni-chocolate .uni-small-copy{order:3;padding:24px 24px 0;font-size:12px;line-height:1.95}.uni-fine-rule,.uni-image-note{display:none}.uni-original{display:grid;grid-template-columns:minmax(0,1fr);gap:23px;padding:42px 24px}.uni-original__copy{display:contents}.uni-original .uni-section-label{grid-column:1;grid-row:1;font-size:9px}.uni-original h2{grid-column:1;grid-row:2;font-size:clamp(37px,10.7vw,49px);margin:0;line-height:1.25}.uni-original__photo{grid-column:1;grid-row:3;width:77%;max-width:290px;justify-self:end}.uni-original__photo figcaption{font-size:9px;margin-top:10px}.uni-original .uni-small-copy{grid-column:1;grid-row:4;font-size:12px;line-height:1.95}.uni-takeaway{display:grid;grid-template-columns:minmax(0,1fr);padding:40px 24px 42px;gap:26px}.uni-takeaway__headline{grid-column:1;grid-row:1;align-self:auto}.uni-takeaway .uni-section-label{font-size:9px}.uni-takeaway h2{font-size:clamp(35px,9.6vw,47px);line-height:1.3;margin-top:23px;max-width:100%}.uni-takeaway__photo{grid-column:1;grid-row:2;margin-inline:-24px}.uni-takeaway__photo>img{height:430px;object-position:center 63%}.uni-takeaway__photo figcaption{padding:12px 24px 0;font-size:9px;line-height:1.8;gap:12px}.uni-takeaway__aside{grid-column:1;grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:17px;padding:0}.uni-takeaway__aside>p{font-size:11px;line-height:1.9}.uni-takeaway .uni-link{font-size:10px;gap:13px;min-width:0;margin:0;flex:none}.uni-visit{grid-template-columns:minmax(0,1fr);gap:34px;padding:43px 24px 45px}.uni-visit .uni-section-label{font-size:9px}.uni-visit h2{font-size:clamp(39px,11.8vw,58px);line-height:1.2;margin-top:23px}.uni-visit h2>span{display:inline}.uni-visit h2>span+span:before{content:"";display:block}.uni-visit__info{padding:0}.uni-visit__brand{font-size:20px}.uni-visit__brand>span{font-size:10px;margin-left:12px}.uni-visit__list{margin-top:23px}.uni-visit__list>div{font-size:10px;grid-template-columns:74px minmax(0,1fr);gap:12px;padding:17px 0;line-height:1.9}.uni-visit__sample{font-size:9px;line-height:1.9;margin-top:24px}.uni-visit__sample>br{display:none}.uni-footer{display:grid;grid-template-columns:1fr auto;padding:24px;gap:9px 16px;font-size:9px}.uni-footer>p{grid-column:1;grid-row:1;font-size:10px}.uni-footer>span{grid-column:1;grid-row:2;font-size:9px}.uni-footer>a{grid-column:2;grid-row:1 / 3;gap:12px;font-size:9px}.uni-footer>p>span{margin-inline:5px}}
@media(max-width:360px){.uni-header{padding-inline:20px}.uni-brand{width:160px}.uni-hero{padding-inline:20px}.uni-hero h1{font-size:42px}.uni-hero__photo{margin-inline:-20px}.uni-hero__image{height:335px}.uni-hero__tail{gap:13px}.uni-hero__tail>p{font-size:10px}.uni-hero .uni-link{font-size:9px;gap:9px}.uni-chocolate__photo{height:365px}.uni-takeaway__aside{display:block}.uni-takeaway .uni-link{margin-top:15px}.uni-takeaway__photo>img{height:385px}.uni-takeaway__photo figcaption{display:block}.uni-takeaway__photo figcaption>span{display:block;margin-top:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.uni-skip{transition:none}}