:root { --color-primary: #173f30; --color-secondary: #fcfaf5; --color-accent: #d53100; --color-gold: #ba965a; --color-tea-number: #d98970; --font-sans-ja: 'Noto Sans JP', sans-serif }
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; min-width: 0; font-family: var(--font-sans-ja); color: var(--color-primary) }
img { display: block; max-width: 100% }
.page-width { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 24px }
.brand-logo { width: auto; max-width: min(52vw, 220px); height: 34px; object-fit: contain; object-position: left center }
.brand-fallback { color: var(--color-primary); font-size: 11px; font-weight: 800 }
.site-header { display: none }
.washi-bg { background-color: var(--color-secondary); background-image: radial-gradient(circle at 15% 24%,#c4a66710 0 1px,transparent 2px), radial-gradient(circle at 72% 65%,#b4945010 0 1px,transparent 2px), linear-gradient(115deg,#fffdf9a3,#f6f1e880 60%,#fffdf9a3); background-size: 19px 19px,27px 27px,auto }
#set-value { background-color: var(--color-secondary); background-image: url("https://storage.googleapis.com/one-orchestra-prod.firebasestorage.app/n8n-tools/upload-image/ai-edit-openai-direct/image_e2812061925aca63_0"); background-position: center; background-repeat: no-repeat; background-size: cover }
#set-value::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(255,255,255,.9); pointer-events: none }
#set-value .set-value-patterns { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none }
#set-value .set-value-pattern { position: absolute; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; filter: brightness(1.12) saturate(.7); -webkit-mask-image: radial-gradient(ellipse at center,#000 7%,transparent 74%); mask-image: radial-gradient(ellipse at center,#000 7%,transparent 74%) }
#set-value .set-value-pattern:nth-child(1) { top: -60px; left: -65px; width: 250px; height: 195px; opacity: .19 }
#set-value .set-value-pattern:nth-child(2) { bottom: -65px; left: 17%; width: 220px; height: 155px; opacity: .17 }
#set-value .set-value-pattern:nth-child(3) { top: -55px; right: 4%; width: 195px; height: 150px; opacity: .18 }
#set-value .set-value-pattern:nth-child(4) { bottom: -60px; right: -35px; width: 235px; height: 175px; opacity: .16 }
#set-value .set-value-pattern:nth-child(5) { top: 39%; left: -85px; width: 155px; height: 145px; opacity: .07 }
@media (max-width:767px) {
  #set-value .set-value-pattern:nth-child(1) { top: -60px; left: -80px; width: 165px; height: 140px }
  #set-value .set-value-pattern:nth-child(2) { top: 22%; right: -85px; bottom: auto; left: auto; width: 145px; height: 125px }
  #set-value .set-value-pattern:nth-child(3) { top: auto; right: auto; bottom: 27%; left: -100px; width: 160px; height: 140px }
  #set-value .set-value-pattern:nth-child(4) { right: -70px; bottom: -55px; width: 155px; height: 130px }
  #set-value .set-value-pattern:nth-child(5) { top: auto; bottom: -50px; left: 9%; width: 130px; height: 105px }
}
.hero { background-color: #fbf8f1; background-image: radial-gradient(circle at 88% 44%,#d6b87921 0 18%,transparent 18.2%), radial-gradient(circle at 88% 44%,transparent 0 22%,#d6b87917 22.1% 22.4%,transparent 22.5%), linear-gradient(115deg,#fffdfa,#f9f3e8) }
.hero-copy { align-self: start }
.hero-title { font-size: 43px; letter-spacing: -.06em; line-height: 1.33 }
.year-badge { display: grid; place-content: center; position: absolute; top: 55px; right: 12%; width: clamp(96px,11vw,132px); aspect-ratio: 1; border: 2px solid var(--color-gold); border-radius: 50%; color: var(--color-accent); background: #fffaf0; text-align: center; font-weight: 900; font-size: 32px; line-height: 1.2; box-shadow: inset 0 0 0 5px #fffaf0,inset 0 0 0 6px #ba965a70 }
.year-badge span { font-size: .7em }
.hero-label { display: inline-block; padding: 5px 15px; background: var(--color-accent); color: white; font-size: 18px; font-weight: 800; letter-spacing: .08em }
.photo-window { position: relative; overflow: hidden; isolation: isolate }
.photo-window > img { position: absolute; max-width: none; height: auto }
.hero-photo { width: 100%; aspect-ratio: 1.6 }
.hero-photo > img { inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain }
.furoshiki-seal { position: absolute; right: 9%; bottom: 7%; display: grid; width: clamp(102px,13vw,125px); aspect-ratio: 1; place-items: center; border: 3px solid var(--color-gold); border-radius: 50%; background: #fffaf2; color: var(--color-primary); text-align: center; font-size: clamp(13px,1.6vw,19px); font-weight: 800; line-height: 1.45; box-shadow: 0 5px 18px #46370b24 }
.set-title { color: var(--color-accent); font-size: clamp(2.75rem,2.75vw,4rem); font-weight: 900; line-height: 1.45; letter-spacing: -.045em }
.set-subtitle { font-size: clamp(2.25rem,2.5vw,3rem); font-weight: 800; line-height: 1.5 }
.set-photo { width: min(100%,440px); aspect-ratio: 1; margin-inline: auto; border-radius: 50% }
.set-photo > img { inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain }
.shipping-heading { margin: 0; padding: 17px 24px; background: var(--color-accent); color: #fff; font-size: clamp(2.25rem,2.5vw,3rem); font-weight: 800; text-align: center }
.shipping-item { position: relative; padding-left: 36px }
.shipping-item::before { position: absolute; top: .35em; left: 0; display: grid; width: 23px; height: 23px; place-items: center; border: 2px solid var(--color-accent); border-radius: 50%; color: var(--color-accent); content: '✓'; font-size: 15px; font-weight: 800; line-height: 1 }
.story-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'intro round' 'wrap detail'; align-items: center; column-gap: 9%; row-gap: 40px }
.story-intro { grid-area: intro }
.story-round { grid-area: round; width: min(100%,420px); aspect-ratio: 1; justify-self: center; border-radius: 50% }
.story-round > img { inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain }
.story-box { display: none }
.story-wrap { grid-area: wrap }
.story-detail { grid-area: detail }
.story-photo { width: 100%; aspect-ratio: 1.15 }
.story-photo > img { inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain }
.story-text { font-size: clamp(15px,1.6vw,19px); font-weight: 600; line-height: 2.2 }
.tea-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0 }
.tea-card { display: grid; grid-template-columns: minmax(0,44%) minmax(0,1fr); align-items: center; gap: clamp(24px,5vw,70px); min-width: 0; padding: 35px 0 }
.tea-image { width: 100%; aspect-ratio: 1.4; background: transparent }
.tea-image-sheet { container-type: inline-size }
.tea-image-sheet img { width: 230%; left: -4cqw }
.tea-image-sheet.row-one img { top: -7cqw }
.tea-image-sheet.row-two img { top: -78cqw }
.tea-image-sheet.row-three img { top: -153cqw }
.tea-image-h img { width: 195%; left: -4%; top: var(--h-position); transform: translateY(calc(-1 * var(--h-position))) }
#teas .tea-image.tea-image-single > img { inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; transform: none }
.tea-copy { display: grid; grid-template-columns: max-content minmax(0,1fr); column-gap: 12px; min-width: 0 }
.tea-number { display: block; color: var(--color-gold); font-size: clamp(27px,3.5vw,43px); font-weight: 900; line-height: 1 }
.tea-category { grid-column: 1; grid-row: 2 / span 2; align-self: start; display: inline-block; margin: 0; padding: 7px 6px; background: var(--tea-category-color); color: white; font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.35; writing-mode: vertical-rl }
.tea-copy h3 { margin: 0; font-size: clamp(20px,2.4vw,28px); font-weight: 800; line-height: 1; overflow-wrap: anywhere }
.tea-amount { margin: 6px 0 0; font-size: 14px; font-weight: 700 }
.tea-description { margin: 13px 0 0; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere }
:root { --tea-japan: #718b77; --tea-china: #ac8646; --tea-black: #ad4936; --tea-rooibos: #cc6951 }
#teas .tea-card:nth-child(-n+3) { --tea-category-color: var(--tea-japan) }
#teas .tea-card:nth-child(n+4):nth-child(-n+5) { --tea-category-color: var(--tea-china) }
#teas .tea-card:nth-child(n+6):nth-child(-n+12) { --tea-category-color: var(--tea-black) }
#teas .tea-card:nth-child(n+13) { --tea-category-color: var(--tea-rooibos) }
#teas .tea-number { grid-column: 1 / -1; margin-bottom: 14px; color: var(--color-tea-number); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; font-style: italic; font-weight: 400; letter-spacing: .02em; line-height: 1.05; transform: rotate(-3deg); transform-origin: left center }
#teas .tea-copy h3, #teas .tea-amount { grid-column: 2 }
#teas .tea-description { grid-column: 1 / -1 }
#set-value > .page-width { position: relative; z-index: 1 }
#story { position: relative; isolation: isolate; background-color: #fffdf9; background-image: radial-gradient(ellipse at 10% 16%,#f8e6e865,transparent 48%),radial-gradient(ellipse at 88% 78%,#f9edcf72,transparent 48%),radial-gradient(circle at 15% 24%,#c4a66710 0 1px,transparent 2px),radial-gradient(circle at 72% 65%,#b4945010 0 1px,transparent 2px),linear-gradient(115deg,#fffefd,#faf8f3 60%,#fffefd); background-size: auto,auto,19px 19px,27px 27px,auto }
#story::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45; background-image: repeating-linear-gradient(45deg,transparent 0 35px,#ba965a75 36px 37px,transparent 38px 72px),repeating-linear-gradient(-45deg,transparent 0 35px,#ba965a75 36px 37px,transparent 38px 72px),radial-gradient(circle at 0 0,transparent 0 17px,#ba965a85 18px 19px,transparent 20px); background-size: 72px 72px,72px 72px,48px 48px; -webkit-mask-image: radial-gradient(ellipse 240px 220px at 0 0,#000,transparent),radial-gradient(ellipse 240px 220px at 100% 0,#000,transparent),radial-gradient(ellipse 240px 220px at 0 100%,#000,transparent),radial-gradient(ellipse 240px 220px at 100% 100%,#000,transparent); mask-image: radial-gradient(ellipse 240px 220px at 0 0,#000,transparent),radial-gradient(ellipse 240px 220px at 100% 0,#000,transparent),radial-gradient(ellipse 240px 220px at 0 100%,#000,transparent),radial-gradient(ellipse 240px 220px at 100% 100%,#000,transparent) }
#story > .page-width { position: relative; z-index: 1 }
#shipping .shipping-item { font-size: 16px; line-height: 30px; }
#shipping .shipping-date { color: var(--color-accent); font-size: clamp(22px,2.6vw,30px); font-weight: 800; white-space: nowrap }
#hero .hero-title > span { font-size: 1em }
#hero .year-badge > span { font-size: .7em }
#hero .furoshiki-seal > span { font-size: 25px }
#story .story-text > p { font-size: clamp(15px,1.6vw,19px) }
#story .story-wrap > p { font-size: 13px }
.animate-on-scroll { opacity: 1 }
html.js .animate-on-scroll { opacity: 0; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1) }
html.js .animate-on-scroll[data-anim="fade-up"] { transform: translateY(28px) }
html.js .animate-on-scroll[data-anim="fade-left"] { transform: translateX(-32px) }
html.js .animate-on-scroll[data-anim="fade-right"] { transform: translateX(32px) }
html.js .animate-on-scroll[data-anim="zoom-in"] { transform: scale(.94) }
html.js .animate-on-scroll:not([data-anim]) { transform: translateY(28px) }
html.js .animate-on-scroll.is-visible { opacity: 1; transform: none }
@media (prefers-reduced-motion:reduce) {
  html.js .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important }
}
@media (min-width:768px) {
  .page-width { padding-inline: 40px }
  .hero .page-width { max-width: 1250px }
  .hero { background-image: radial-gradient(circle at 76% 44%,#d6b87921 0 15%,transparent 15.2%), radial-gradient(circle at 76% 44%,transparent 0 19%,#d6b87917 19.1% 19.4%,transparent 19.5%), linear-gradient(115deg,#fffdfa,#f9f3e8) }
  .hero-photo { margin-top: -80px; overflow: visible }
  .hero-photo > img { transform: translate(-20px,-18px) }
  .tea-card:nth-child(even) { background: #f6f1e750 }
}
@media (max-width:767px) {
  .page-width { padding-inline: 18px }
  .site-header { display: block; position: absolute; z-index: 20; top: 0; left: 0; width: 100%; background: transparent }
  .site-header .page-width { padding-top: 15px; padding-bottom: 0 }
  .header-year { display: grid; width: 75px; aspect-ratio: 1; place-content: center; border: 2px solid var(--color-gold); border-radius: 50%; background: #fffbf3; color: var(--color-accent); text-align: center; font-size: 17px; font-weight: 900; line-height: 1.2 }
  .header-year span { font-size: 12px }
  .site-header .header-year { display: none }
  .hero .year-badge { top: 50px; right: 18px; z-index: 11; }
  .hero .page-width { padding-bottom: 24px }
  .hero-title { font-size: clamp(1.9rem,8vw,2.75rem) }
  .hero-label { padding: 5px 10px; font-size: 15px }
  .hero-photo { margin-top: 4px; aspect-ratio: 1.12 }
  .hero-photo > img { inset: 0; width: 100%; height: 100%; object-fit: contain }
  .furoshiki-seal { right: 1%; bottom: 1%; width: 90px; font-size: 17px }
  .set-photo { width: min(85%,320px) }
  .story-layout { grid-template-columns: 1fr; grid-template-areas: 'box' 'intro' 'wrap' 'detail'; row-gap: 0 }
  .story-round { display: none }
  .story-box { display: block; grid-area: box; width: 100%; aspect-ratio: 1.1; margin-bottom: 32px }
  .story-box > img { inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain }
  .story-intro, .story-detail { text-align: center }
  .story-detail { margin-top: 0 }
  .story-text { font-size: 15px; line-height: 2.1 }
  .story-wrap { margin-top: 32px }
  .tea-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: clamp(14px,4vw,28px); row-gap: 22px }
  .tea-card { display: block; padding: 0 0 28px; min-width: 0 }
  .tea-image { aspect-ratio: 1.12 }
  .tea-copy { padding: 11px 2px 0 }
  .tea-number { font-size: 26px }
  .tea-category { margin: 0; padding: 5px 4px; font-size: 12px; writing-mode: vertical-rl }
  .tea-copy h3 { font-size: clamp(19px,3.9vw,19px); line-height: 1 }
  .tea-amount { font-size: 13px }
  .tea-description { font-size: clamp(13px,3.4vw,14px); line-height: 1.75 }
  #teas .tea-copy { column-gap: 6px }
  #teas .tea-number { margin-bottom: 9px; font-size: 30px }
  #shipping .shipping-item { font-size: 15px }
  #shipping .shipping-date { font-size: clamp(22px,5.7vw,26px) }
  #hero .furoshiki-seal > span { font-size: 17px }
  #story .story-text > p { font-size: 15px }
  #story .story-wrap > p { font-size: 13px }
}
@media (max-width:350px) {
  .page-width { padding-inline: 12px }
  .tea-grid { column-gap: 12px }
  .tea-copy h3 { font-size: 14px }
  .tea-description { font-size: 13px }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style:  }
::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style:  }
*, ::after, ::before { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb }
::after, ::before { --tw-content: '' }
:host, html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent }
body { margin: 0; line-height: inherit }
hr { height: 0; color: inherit; border-top-width: 1px }
abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit }
a { color: inherit; text-decoration: inherit }
b, strong { font-weight: bolder }
code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sub { bottom: -.25em }
sup { top: -.5em }
table { text-indent: 0; border-color: inherit; border-collapse: collapse }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0 }
button, select { text-transform: none }
button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) { -webkit-appearance: button; background-color: transparent; background-image: none }
:-moz-focusring { outline: auto }
:-moz-ui-invalid { box-shadow: none }
progress { vertical-align: baseline }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px }
::-webkit-search-decoration { -webkit-appearance: none }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit }
summary { display: list-item }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0 }
fieldset { margin: 0; padding: 0 }
legend { padding: 0 }
menu, ol, ul { list-style: none; margin: 0; padding: 0 }
dialog { padding: 0 }
textarea { resize: vertical }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af }
[role=button], button { cursor: pointer }
:disabled { cursor: default }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle }
img, video { max-width: 100%; height: auto }
[hidden]:where(:not([hidden=until-found])) { display: none }
.absolute { position: absolute }
.relative { position: relative }
.bottom-0 { bottom: 0px }
.right-0 { right: 0px }
.z-10 { z-index: 10 }
.mx-auto { margin-left: auto; margin-right: auto }
.ml-auto { margin-left: auto }
.mt-4 { margin-top: 1rem }
.mt-5 { margin-top: 1.25rem }
.flex { display: flex }
.grid { display: grid }
.hidden { display: none }
.max-w-\[920px\] { max-width: 920px }
.max-w-\[940px\] { max-width: 940px }
.max-w-full { max-width: 100% }
.flex-wrap { flex-wrap: wrap }
.items-center { align-items: center }
.justify-between { justify-content: space-between }
.gap-2 { gap: 0.5rem }
.gap-4 { gap: 1rem }
.gap-8 { gap: 2rem }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)) }
.overflow-hidden { overflow: hidden }
.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) }
.py-12 { padding-top: 3rem; padding-bottom: 3rem }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem }
.py-4 { padding-top: 1rem; padding-bottom: 1rem }
.pb-12 { padding-bottom: 3rem }
.pb-14 { padding-bottom: 3.5rem }
.pb-20 { padding-bottom: 5rem }
.pb-8 { padding-bottom: 2rem }
.pt-12 { padding-top: 3rem }
.pt-8 { padding-top: 2rem }
.pt-9 { padding-top: 2.25rem }
.text-center { text-align: center }
.text-right { text-align: right }
.text-sm { font-size: 0.875rem; line-height: 1.25rem }
.text-xs { font-size: 0.75rem; line-height: 1rem }
.font-black { font-weight: 900 }
.leading-8 { line-height: 2rem }
.text-\[\#26382c\] { --tw-text-opacity: 1; color: rgb(38 56 44 / var(--tw-text-opacity, 1)) }
.text-\[color\:var\(--color-accent\)\] { color: var(--color-accent) }
.text-\[color\:var\(--color-primary\)\] {  }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
@media (min-width:768px) {
  .md\:ml-0 { margin-left: 0px }
  .md\:block { display: block }
  .md\:hidden { display: none }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .md\:gap-16 { gap: 4rem }
  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem }
  .md\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
  .md\:pb-12 { padding-bottom: 3rem }
  .md\:pb-20 { padding-bottom: 5rem }
  .md\:pb-28 { padding-bottom: 7rem }
  .md\:pt-12 { padding-top: 3rem }
  .md\:pt-14 { padding-top: 3.5rem }
  .md\:text-left { text-align: left }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem }
}
#tea-ware { --ware-price-size: clamp(24px, 3vw, 32px); padding-block: 56px 80px }
#tea-ware .ware-inner { max-width: 920px; margin-inline: auto }
#tea-ware .ware-heading { margin: 0; padding: 20px 24px; border-radius: 0; background: var(--color-primary); color: #fff; text-align: center; font-size: clamp(23px, 3vw, 32px); font-weight: 800; line-height: 1.5; letter-spacing: .03em }
#tea-ware .ware-content { padding: 32px clamp(16px, 4vw, 40px) 40px }
#tea-ware .ware-intro { margin: 0 0 32px; font-size: 16px; font-weight: 500; line-height: 1.9; text-align: center }
#tea-ware .ware-list { display: grid; gap: 24px }
#tea-ware .ware-card { min-width: 0; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 5px 22px rgba(23, 63, 48, .09) }
#tea-ware .ware-card-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px; padding: 18px 24px; background: #eef2e9 }
#tea-ware .ware-number { color: var(--color-primary); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 31px; font-style: italic; line-height: 1 }
#tea-ware .ware-card h3 { min-width: 0; margin: 0; color: var(--color-primary); font-size: clamp(24px, 2.8vw, 30px); font-weight: 800; line-height: 1.5; overflow-wrap: anywhere }
#tea-ware .ware-card-body { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 40px); padding: 24px }
#tea-ware .ware-image { display: flex; align-items: center; justify-content: center; min-width: 0; height: 230px }
#tea-ware .ware-image img { width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain }
#tea-ware .ware-card[data-edit="tea-ware-02"] .ware-image { height: 320px; padding: 20px }
#tea-ware .ware-copy { min-width: 0 }
#tea-ware .ware-label { margin: 0 0 4px; font-weight: 700; line-height: 1.45 }
#tea-ware .ware-label, #tea-ware .ware-price { font-size: var(--ware-price-size) }
#tea-ware .ware-price { margin: 0 0 16px; color: var(--color-accent); font-weight: 800; line-height: 1.45 }
#tea-ware .ware-price small { color: #26382c; font-size: .5em; white-space: nowrap }
#tea-ware .ware-description { margin: 0; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere }
@media (min-width:768px) {
  #tea-ware { padding-block: 80px 112px }
}
@media (max-width:767px) {
  #tea-ware { --ware-price-size: clamp(23px, 6vw, 29px); padding-block: 48px 72px }
  #tea-ware .ware-heading { padding: 18px 12px }
  #tea-ware .ware-content { padding: 24px 0 32px }
  #tea-ware .ware-intro { margin-bottom: 24px; padding-inline: 14px; font-size: 15px; text-align: left }
  #tea-ware .ware-list { gap: 20px }
  #tea-ware .ware-card { width: 100%; min-width: 0; margin-inline: 0; box-sizing: border-box }
  #tea-ware .ware-card-heading { gap: 10px; padding: 14px 16px }
  #tea-ware .ware-number { font-size: 42px }
  #tea-ware .ware-card h3 { font-size: clamp(18px, 4.7vw, 23px) }
  #tea-ware .ware-card-body { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px }
  #tea-ware .ware-image { height: clamp(180px, 55vw, 260px); background: color-mix(in srgb, var(--color-primary) 4%, white) }
  #tea-ware .ware-card[data-edit="tea-ware-02"] .ware-image { height: clamp(260px, 85vw, 360px) }
  #tea-ware .ware-description { font-size: 14px }
  #tea-ware .ware-description { border-top: 1px solid rgba(23, 63, 48, .18); margin-top: 16px; padding-top: 16px }
}