.tea-diagram{width:100%;max-width:850px;margin:28px 0 34px;padding:22px 24px 20px;border:1px solid #cbdcd1;border-radius:10px;background:#e9f0e9;color:#183b2d;font:inherit;line-height:1.4}
.tea-diagram figcaption{margin:0 0 18px;font:400 24px/1.2 Georgia,serif;letter-spacing:-.02em;color:#143f3b}
.tea-diagram__icon{width:28px;height:28px;flex:none;color:#143f3b}
.tea-diagram__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;margin:0;padding:0;list-style:none;counter-reset:tea-stage}
.tea-diagram__steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tea-diagram .tea-diagram__steps li{counter-increment:tea-stage;min-width:0;margin:0;padding:12px 10px 10px;border:1px solid #d6e2d8;border-radius:7px;background:#f6f9f5;font-size:13px;line-height:1.25}
.tea-diagram__steps li::before{content:counter(tea-stage,decimal-leading-zero);float:right;color:#8a713e;font-size:11px;font-weight:600;line-height:1.5}
.tea-diagram__step-label,.tea-diagram__step-detail{display:block}
.tea-diagram__step-label{margin-top:7px;font-size:14px;font-weight:700}
.tea-diagram__step-detail{margin-top:2px;color:#526a61}
.tea-diagram .tea-diagram__note{margin:14px 0 0;color:#486257;font-size:13px;line-height:1.45}
.tea-diagram__mug{display:flex;align-items:center;gap:18px;padding:13px 16px;border-left:3px solid #b89659;background:#f6f9f5}
.tea-diagram__mug .tea-diagram__icon{width:40px;height:40px}
.tea-diagram__mug strong,.tea-diagram__mug div>span{display:block}
.tea-diagram__mug strong{font:400 clamp(23px,3vw,30px)/1.2 Georgia,serif}
.tea-diagram__mug div>span{margin-top:3px;font-size:14px}
.tea-diagram__gaiwan{display:block;width:min(100%,500px);height:auto;margin:0 auto;background:#f6f9f5;border:1px solid #d6e2d8;border-radius:7px}
.tea-diagram__ranges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tea-diagram__ranges>div{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:center;padding:15px 17px;background:#f6f9f5;border:1px solid #d6e2d8;border-radius:7px}
.tea-diagram__ranges .tea-diagram__icon{grid-row:1/3}
.tea-diagram__ranges span{font-size:14px;font-weight:700}
.tea-diagram__ranges strong{font:400 26px/1.1 Georgia,serif;color:#143f3b}
.tea-diagram .tea-diagram__enemies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.tea-diagram .tea-diagram__enemies li{display:flex;align-items:center;gap:9px;min-width:0;margin:0;padding:13px;background:#f6f9f5;border:1px solid #d6e2d8;border-radius:7px;font-size:14px;font-weight:700}
.tea-diagram--mug,.tea-diagram--water,.tea-diagram--storage,.tea-diagram--gaiwan{max-width:700px}
@media(max-width:640px){.tea-diagram{margin-block:24px 30px;padding:18px}.tea-diagram figcaption{font-size:22px}.tea-diagram__steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}.tea-diagram .tea-diagram__enemies{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){.tea-diagram{padding:16px}.tea-diagram__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.tea-diagram .tea-diagram__steps li{padding:9px 8px}.tea-diagram__step-label{font-size:13px}.tea-diagram__step-detail{font-size:12px}.tea-diagram__ranges{gap:7px}.tea-diagram__ranges>div{padding:11px 9px;grid-template-columns:24px minmax(0,1fr);column-gap:6px}.tea-diagram__ranges .tea-diagram__icon{width:23px;height:23px}.tea-diagram__ranges span{font-size:12px}.tea-diagram__ranges strong{font-size:19px}.tea-diagram__mug{gap:11px;padding:11px}.tea-diagram__mug strong{font-size:22px}}