:root{--green:#43b655;--ink:#171717;--max:960px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#EFEFF0;color:var(--ink);font-family:"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;font-size:16px;line-height:1.9}img{display:block;max-width:100%}.hero,.section,.slider-section,footer{width:min(calc(100% - 40px),var(--max));margin-inline:auto}.hero{min-height:760px;padding-top:52px;position:relative}.eyebrow{font-size:14px;letter-spacing:.08em}.hero-title{margin:70px 0 20px;color:var(--green);font-size:clamp(64px,11vw,150px);line-height:.77;font-weight:300;letter-spacing:-.06em}.hero-sub{position:absolute;right:8%;top:370px;color:var(--green);line-height:1.4}.hero-sub span{border:1px solid var(--green);padding:2px 8px}.tagline{text-align:center;margin-top:80px;font-size:18px}.section{padding:90px 0}.intro{max-width:720px}.intro p{margin:34px auto;max-width:680px}.pill{display:table;margin:0 auto 36px;border:1px solid var(--green);border-radius:999px;padding:6px 25px;color:var(--green);font-size:16px;font-weight:400;line-height:1.4;text-align:center}.link-pill{text-decoration:none}.theme{text-align:center;padding-top:20px}.theme-copy{margin:60px 0;font-size:18px}.works{padding-top:20px}.slider-section{padding:80px 0 120px}.category{text-align:center;color:var(--green);font-size:13px;font-weight:400}.dots{display:flex;justify-content:center;gap:14px;margin:24px 0 38px}.dots button{width:11px;height:11px;border:0;border-radius:50%;background:var(--green);opacity:.28;padding:0}.dots button.active{opacity:1}.slider-frame{position:relative;max-width:900px;margin:auto}.slides{max-width:620px;margin:auto;overflow:hidden}.slide{display:none}.slide.active{display:block;animation:fade .35s ease}.slide > img{width:100%;aspect-ratio:4/3;object-fit:cover}.work-text{margin-top:36px}.work-text h3{font-size:14px;color:var(--green);font-weight:400;text-align:center}.work-text>p:first-of-type{text-align:center;font-size:12px}.work-text>p:last-child{margin-top:30px;font-size:16px;letter-spacing:.05em}.arrow{position:absolute;top:34%;transform:translateY(-50%);border:0;background:transparent;color:var(--green);font-size:72px;font-weight:200;cursor:pointer}.prev{left:0}.next{right:0}.judges{max-width:760px}.judge-list article{display:grid;grid-template-columns:180px 1fr;gap:45px;align-items:start;margin:45px 0}.judge-list img{width:180px;height:120px;object-fit:cover}.judge-list p{margin:0}.product{max-width:700px}.product-grid{display:grid;grid-template-columns:1fr 180px;gap:80px;align-items:center}.product-grid img{width:150px;margin:auto}footer{text-align:center;padding:60px 0 100px}footer p{font-size:12px;margin-top:50px}@keyframes fade{from{opacity:.25}to{opacity:1}}@media(max-width:700px){body{font-size:14px}.hero{min-height:620px;padding-top:30px}.hero-title{margin-top:70px;font-size:19vw}.hero-sub{top:320px;right:4%;font-size:11px}.tagline{margin-top:75px}.section{padding:65px 0}.slider-section{padding:55px 0 80px}.slides{width:78%}.arrow{font-size:54px}.work-text>p:last-child{font-size:14px}.judge-list article{grid-template-columns:110px 1fr;gap:20px}.judge-list img{width:110px;height:90px}.product-grid{grid-template-columns:1fr 110px;gap:25px}.product-grid img{width:100px}}

/* Revision: image-based main visual */
.hero { padding: 0; }
.main-visual { display:block; width:100%; height:auto; }

/* rev06: related event and portrait-oriented photo slides (height:width = 4:3) */
.related-event{max-width:760px;text-align:center}
.related-event .event-image{width:min(100%,620px);height:auto;margin:0 auto 32px;object-fit:contain}
.related-event .event-text{text-align:center;margin-inline:auto}
.related-event .event-text h2{font-size:clamp(18px,3vw,25px);font-weight:500;line-height:1.5}
.related-event .event-text p{font-size:14px;line-height:2.1}
.slider-section:has(img[src*="/photo/"]) .slide > img{aspect-ratio:3/4;object-fit:contain;object-position:center}

/* rev08: movie image height:width 2:3; judges square; event copy centered as a block, left-aligned internally */
.slider-section:has(img[src*="/movie/"]) .slide > img { aspect-ratio: 3 / 2; object-fit: contain; object-position: center; }
.related-event .event-text { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.related-event .event-text h2, .related-event .event-text p { text-align: left; }
.judge-list img { width: 180px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width:700px) { .judge-list img { width: 110px; height: auto; aspect-ratio: 1 / 1; } }


/* rev10: refined layout, consistent brand green, and uniform stroke arrows */
body { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; }
.section { padding-top: 64px; padding-bottom: 64px; }
.slider-section { padding-top: 56px; padding-bottom: 76px; }
.theme { padding-top: 12px; }
.works { padding-top: 8px; }
.pill.link-pill, .pill.link-pill:visited, .pill.link-pill:hover { color: var(--green); }
.slider-section:has(img[src*="/art/"]) .slide > img { aspect-ratio: 4 / 3; object-fit: contain; object-position: center; }
.arrow { width: 54px; height: 76px; font-size: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.arrow::before { content: ""; display: block; width: 19px; height: 19px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.arrow.prev::before { transform: rotate(225deg); }
.arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-width: 700px) {
 .section { padding-top: 46px; padding-bottom: 46px; }
 .slider-section { padding-top: 40px; padding-bottom: 56px; }
 .arrow { width: 38px; height: 60px; }
 .arrow::before { width: 15px; height: 15px; }
}

/* rev12: requested typography, headings and image-aligned arrows */
body { font-size:14pt; }
.pill { background:#fff; border-radius:12px; font-size:16pt; }
.category, .theme-copy, .product h3, .related-event .event-text h2 { font-size:16pt; }
.intro p, .judge-list p, .related-event .event-text p, .product p { font-size:14pt; }
.work-text > p, .work-text > p:first-of-type, .work-text > p:last-child {
  color:var(--green); font-size:16pt; text-align:center;
}
.slider-frame { --image-width: min(100%, 620px); }
.slides { max-width:620px; }
.slide { position:relative; }
.arrow { top:0; transform:translateY(-50%); }
.slider-section:has(img[src*="/photo/"]) .arrow { top:calc(min(100vw - 40px, 620px) * .75 * 4 / 3 / 2); }
.slider-section:has(img[src*="/movie/"]) .arrow { top:calc(min(100vw - 40px, 620px) * .75 * 2 / 3 / 2); }
.slider-section:has(img[src*="/art/"]) .arrow { top:calc(min(100vw - 40px, 620px) * .75 * 3 / 4 / 2); }
@media(min-width:701px) {
.slider-section:has(img[src*="/photo/"]) .arrow { top:413.333px; }
.slider-section:has(img[src*="/movie/"]) .arrow { top:206.667px; }
.slider-section:has(img[src*="/art/"]) .arrow { top:232.5px; }
}
@media(max-width:700px) {
body {font-size:14pt;}
.pill {font-size:16pt;}
.work-text > p, .work-text > p:last-child {font-size:16pt;}
.slider-section:has(img[src*="/photo/"]) .arrow {top:calc((100vw - 40px) * .78 * 4 / 3 / 2);}
.slider-section:has(img[src*="/movie/"]) .arrow {top:calc((100vw - 40px) * .78 * 2 / 3 / 2);}
.slider-section:has(img[src*="/art/"]) .arrow {top:calc((100vw - 40px) * .78 * 3 / 4 / 2);}
}

/* rev13: typography sizes in px (desktop and mobile) */
body { font-size: 12px; }
.pill, .category, .theme-copy, .product h3,
.related-event .event-text h2 { font-size: 14px; }
.intro p, .judge-list p, .related-event .event-text p,
.product p, .work-text > p, .work-text > p:first-of-type,
.work-text > p:last-child { font-size: 12px; }
@media (max-width:700px) {
 body { font-size:12px; }
 .pill, .category, .theme-copy, .product h3,
 .related-event .event-text h2 { font-size:14px; }
 .intro p, .judge-list p, .related-event .event-text p,
 .product p, .work-text > p, .work-text > p:first-of-type,
 .work-text > p:last-child { font-size:12px; }
}

/* rev14: smartphone-only spacing and full-width judge comments */
@media (max-width:700px) {
  .intro.section { padding-top: 12px; }
  .judge-list article {
    display: grid;
    grid-template-columns: 110px minmax(0,1fr);
    column-gap: 20px;
    row-gap: 16px;
    align-items: center;
  }
  .judge-list article > img { grid-column: 1; grid-row: 1; }
  .judge-list .judge-name { grid-column: 2; grid-row: 1; min-width:0; }
  .judge-list article > p {
    grid-column: 1 / -1;
    grid-row: 2;
    width:100%;
    margin:0;
  }
}
@media (min-width:701px) {
  .judge-list article { grid-template-columns:180px minmax(0,1fr); }
  .judge-list article > img { grid-column:1; grid-row:1 / span 2; }
  .judge-list .judge-name { grid-column:2; grid-row:1; }
  .judge-list article > p { grid-column:2; grid-row:2; }
}

/* rev16: responsive hero, judges and product layout */
.hero { min-height:0; height:auto; padding:0; }
.main-visual { width:100%; height:auto; display:block; }
.work-text > p, .work-text > p:first-of-type, .work-text > p:last-child {
  color:var(--ink); font-size:14px; font-weight:400;
}
.judge-name { font-size:1.17em; line-height:1.5; margin:0; }
.product { max-width:620px; }
.product-grid { grid-template-columns:minmax(0,1fr) 125px; gap:28px; max-width:540px; margin:0 auto; align-items:center; }
.product-grid > img { display:block; width:100%; max-width:125px; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; margin:0 auto; }
@media(min-width:701px) {
  .judge-list article { grid-template-columns:125px minmax(0,1fr); column-gap:24px; row-gap:4px; align-items:start; }
  .judge-list article > img { width:125px; height:auto; aspect-ratio:1/1; grid-row:1 / span 2; }
  .judge-list .judge-name { grid-column:2; grid-row:1; align-self:end; }
  .judge-list article > p { grid-column:2; grid-row:2; margin:0; }
}
@media(max-width:700px) {
  .hero { min-height:0; height:auto; padding:0; }
  .intro.section { padding-top:8px; }
  .judge-list .judge-name { margin:0; }
  .product { max-width:100%; }
  .product-grid { grid-template-columns:minmax(0,1fr) 90px; gap:14px; max-width:440px; }
  .product-grid > img { width:100%; max-width:90px; height:auto; object-fit:contain; }
  .work-text > p, .work-text > p:last-child { color:var(--ink); font-size:14px; }
}

/* rev19: tighten award-section heading spacing */
.works > .slider-section { padding-top: 36px; }
.works > .slider-section:first-child { padding-top: 12px; }
.pill.link-pill[href="#works"] { margin-bottom: 0; }
@media (max-width: 700px) {
  .works > .slider-section { padding-top: 26px; }
  .works > .slider-section:first-child { padding-top: 8px; }
}

/* rev20: fixed CSS dot-pattern background on all screen sizes */
body { background-color: #EFEFF0; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #EFEFF0;
  background-image: radial-gradient(circle, #51B257 0.96px, transparent 0.96px);
  background-size: 50px 50px;
  background-position: 0 0;
  opacity: 0.8;
}

/* rev21: fixed image background (replaces the rev20 dot pattern) */
body::before {
  background-color: #EFEFF0;
  background-image: url("../images/main/fixed-background.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 1;
}

/* rev22: fixed logo layer, naturally scrolling transparent bottle layer.
   Both supplied exports share a 2048 x 1448 canvas. */
body { background-color:#EFEFF0; isolation:isolate; }
body::before {
  content:""; position:fixed; z-index:-1; pointer-events:none;
  top:0; left:50%; transform:translateX(-50%);
  width:min(calc(100% - 40px), var(--max));
  height:auto; aspect-ratio:2048 / 1448;
  background:transparent url("../images/main/logo-only.webp") center top / 100% 100% no-repeat;
  opacity:1;
}
.hero { min-height:0; height:auto; padding:0; }
.hero .main-visual { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:700px) { .hero {min-height:0; height:auto;} }

/* rev23: larger synchronized logo/bottle artwork and scroll-triggered blur */
:root { --hero-art-width: 1400px; --logo-blur: 0px; }
.hero {
  width: min(100%, var(--hero-art-width));
  max-width: none;
  margin-inline: auto;
}
body::before {
  width: min(100%, var(--hero-art-width));
  filter: blur(var(--logo-blur));
  will-change: filter;
}
@media (max-width:700px) {
  .hero { width:100%; }
  body::before { width:100%; }
}

/* rev24: scroll-driven logo blur and subtle lightening */
:root { --logo-brightness: 1; --logo-opacity: 1; }
body::before {
  filter: blur(var(--logo-blur)) brightness(var(--logo-brightness));
  opacity: var(--logo-opacity);
}

/* rev25: expand synchronized hero artwork on large displays without cropping */
:root { --hero-art-width: 2200px; }
.hero, body::before { width:min(100%, var(--hero-art-width)); }
/* rev25: art-piece slides share the same displayed width, retaining natural aspect ratios */
.slider-section:has(img[src*="/art/"]) .slide > img {
  display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain;
}
/* The active artwork's actual rendered height sets the arrow center. */
.slider-section:has(img[src*="/art/"]) .arrow { top:var(--active-art-half-height, 232.5px); }
@media (max-width:700px) {
  .slider-section:has(img[src*="/art/"]) .arrow { top:var(--active-art-half-height, 120px); }
}

/* rev26: legibility tuning, shared across desktop and mobile */
.pill { font-size: 16px; }
.intro p { font-size: 14px; }
.work-text > p,
.work-text > p:first-of-type,
.work-text > p:last-child { font-size: 16px; }

/* Transition the fixed logo from green to a subtle gray, while retaining blur. */
:root { --logo-grayscale: 0; }
body::before {
  filter: blur(var(--logo-blur)) grayscale(var(--logo-grayscale)) brightness(var(--logo-brightness));
  opacity: var(--logo-opacity);
}

/* rev27: larger slider chevrons and event details */
.arrow::before { width:38px; height:38px; }
.arrow { width:76px; }
.related-event .event-text p { font-size:14px; }
.related-event .event-text a { color:inherit; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
@media (max-width:700px) {
  .arrow { width:54px; }
  .arrow::before { width:30px; height:30px; }
  .related-event .event-text p { font-size:14px; }
}

/* rev30: crossfade between slides, preserving natural artwork heights. */
.slides { position:relative; transition:height .35s ease; }
.slide { display:block; position:absolute; inset:0 auto auto 0; width:100%; opacity:0; visibility:hidden; pointer-events:none; animation:none; transition:opacity .42s ease, visibility 0s linear .42s; }
.slide.active { display:block; opacity:1; visibility:visible; pointer-events:auto; animation:none; transition:opacity .42s ease, visibility 0s; z-index:1; }
@media (prefers-reduced-motion:reduce) {
  .slides {transition:none;}
  .slide,.slide.active {transition:none;}
}

/* rev33: judges name/title brand color */
.judge-list .judge-name { color: var(--green); }

/* rev34: emphasize the three award category labels only */
.slider-section .category { font-size: 16px; font-weight: 500; color: var(--green); }

/* rev36: trophy placeholder beside every award concept, responsive and replaceable */
.work-text {
  display:grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items:center;
  margin-top:36px;
}
.work-text .award-trophy {
  display:block;
  width:96px;
  height:120px;
  max-width:100%;
  object-fit:contain;
}
.work-text > p,
.work-text > p:first-of-type,
.work-text > p:last-child {
  margin:0;
  text-align:left;
  font-size:16px;
  color:var(--ink);
  min-width:0;
}
@media (max-width:700px) {
  .work-text { grid-template-columns:60px minmax(0,1fr); gap:14px; margin-top:24px; }
  .work-text .award-trophy {width:60px; height:88px;}
}

/* rev37: literary concept typography and text centered to artwork width */
.work-text {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  width:100%;
  padding:0 108px;
  gap:0;
}
.work-text .award-trophy {
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:96px;
  height:120px;
}
.work-text > p,
.work-text > p:first-of-type,
.work-text > p:last-child {
  width:100%;
  margin:0;
  font-family:"Zen Old Mincho", "Noto Serif JP", serif;
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.04em;
  text-align:center;
}
@media (max-width:700px) {
  .work-text { min-height:88px; padding:0 0 0 74px; }
  .work-text .award-trophy { width:60px; height:88px; }
  .work-text > p, .work-text > p:first-of-type, .work-text > p:last-child { font-size:14px; }
}

/* rev38: artwork image sizing independent from nested trophy images. */
.slider-section:has(.slide > img[src*="/art/"]) .slide > img {
  display:block; width:100%; height:auto; max-width:100%; aspect-ratio:auto; object-fit:contain;
}
/* Keep the concept centered on the artwork axis, even with a left-side trophy. */
@media(max-width:700px) {
  .work-text {padding-left:74px; padding-right:74px;}
}

/* rev40: award guide image and footer notice */
.award-guide { text-align:center; padding-top:60px; padding-bottom:80px; }
.award-guide-image { display:block; width:100%; max-width:900px; height:auto; margin:0 auto; }
footer .drinking-notice { font-size:14px; line-height:1.9; margin:0 auto; font-weight:400; }
@media (max-width:700px) {
  .award-guide { padding-top:45px; padding-bottom:55px; }
  .award-guide-image { width:100%; }
  footer .drinking-notice { font-size:14px; }
}