/* Variables */
:root{
  --color-primary:#5a7568;
  --color-primary-dark:#4a6358;
  --color-bg:#f7f7f7;
  --color-bg-light:#f5f5f5;
  --color-text:#2c2c2c;
  --color-text-muted:#666666;
  --color-accent:#8b7355;
  --color-border:#d4cfc4;
  --header-height:10vh;
  --section-height:90vh;
  --contact-main-height:75vh;
  --footer-height:15vh;
  --container-max:1200px;
  --container-pad:20px;
  --section-pad:80px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --reveal:3s;
}

/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:clip}
html{scroll-padding-top:var(--header-height);scroll-behavior:smooth;font-size:16px}
body{font-family:'Noto Serif JP',serif;color:var(--color-text);background:var(--color-bg);line-height:1.8;letter-spacing:.05em}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.section{padding:var(--section-pad) 0;min-height:var(--section-height)}
.section h3{font-size:12px;font-weight:400;text-align:center;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:20px}
.about,.brands,.explorer{display:flex;align-items:center;justify-content:center;padding:0}
.about>.container,.explorer>.container{padding-top:clamp(28px,4vh,64px);padding-bottom:clamp(28px,4vh,64px)}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--header-height);background:rgba(241, 241, 241, 0.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(224, 224, 223, 0.45)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo a{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.08em;font-size:clamp(16px,4vw,18px)}
.nav-toggle{width:40px;height:40px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle-bar{position:relative;width:22px;height:2px;background:var(--color-text);display:block}
.nav-toggle-bar::before,.nav-toggle-bar::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--color-text)}
.nav-toggle-bar::before{top:-7px}
.nav-toggle-bar::after{top:7px}
.main-nav{position:fixed;inset:var(--header-height) 0 auto 0;background:rgba(238,238,238,.98);border-bottom:1px solid rgba(212,207,196,.45);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
body.nav-open .main-nav{opacity:1;transform:translateY(0);pointer-events:auto}
.main-nav-list{list-style:none;display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 0 16px}
.main-nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.mobile-nav-sns{display:flex;justify-content:center;gap:18px;padding:14px 0 18px}
.header-sns{display:none;align-items:center;justify-content:flex-end;gap:16px}
.lang-switch{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.lang-link{opacity:.7;transition:opacity 240ms var(--ease)}
.lang-link:hover{opacity:1}
.lang-link.is-active{opacity:1;color:var(--color-text)}
.lang-sep{opacity:.45}
.sns-icon{width:22px;height:22px;fill:currentColor;opacity:.75}
.nav-overlay{position:fixed;inset:var(--header-height) 0 0 0;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity 240ms var(--ease)}
body.nav-open .nav-overlay{opacity:1;pointer-events:auto}

/* Intro */
.intro{position:fixed;inset:0;z-index:2000;background:var(--color-bg-light);display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vh,24px);opacity:1;transition:opacity 900ms var(--ease),visibility 900ms var(--ease)}
.intro-inner{max-width:900px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.intro-message{font-family:'Noto Serif JP',serif;color:#111;font-size:clamp(14px,3.5vw,18px);letter-spacing:.12em;line-height:1.6;text-align:center;max-width:90%;word-break:keep-all;overflow-wrap:normal}
.intro.is-out{opacity:0;visibility:hidden;pointer-events:none}

/* Hero */
.hero{width:100%;min-height:100svh;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:var(--header-height) 0 0 0;background:url('/images/kv.png') center/cover no-repeat;opacity:1}
.hero-content{position:relative;z-index:1;width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* About */
.about-title{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,5.5vw,28px);text-align:center;letter-spacing:.12em;margin-bottom:clamp(20px,4vh,28px)}
.about-copy{max-width:720px;margin:0 auto;text-align:center;color:var(--color-text-muted);font-size:clamp(13px,3.2vw,14px);padding:0 10px;word-break:keep-all;overflow-wrap:normal;line-break:strict}
.about-copy br{display:block}
.about-copy .fade-in{display:inline-block}

/* Brands - Home Page */
.brands{background:var(--color-primary-dark);color:var(--color-bg-light);min-height:var(--section-height);display:flex;align-items:center}
.brands h3{color:rgba(235, 235, 235, 0.85);margin-top:30px}
#brands.brands{min-height:calc(100svh - var(--header-height));min-height:calc(100dvh - var(--header-height));max-height:calc(100svh - var(--header-height));max-height:calc(100dvh - var(--header-height));height:calc(100svh - var(--header-height));height:calc(100dvh - var(--header-height));overflow:hidden}
#brands.brands>.container{height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(16px,2vh,32px);padding-bottom:clamp(16px,2vh,32px)}
#brands.brands h3{flex:0 0 auto;margin-top:0;margin-bottom:clamp(12px,1.5vh,20px)}
#brands.brands .brands-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:0;overflow:hidden;gap:20px}
.brands .brands-grid.is-home{width:100%;max-width:1320px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.8vh,16px);place-content:center;max-height:100%;overflow:hidden}
.brands .brands-grid.is-home .brand-link{padding:clamp(8px,1.5vh,16px);border-radius:22px}
.brands .brands-grid.is-home .brand-logo{width:clamp(65px,13vh,112px);aspect-ratio:7/8;margin-bottom:clamp(4px,.8vh,8px);border-radius:12px;object-fit:cover}
.brands .brands-grid.is-home .brand-name{font-size:clamp(10px,.95vw,11px);letter-spacing:.12em;min-height:clamp(22px,2.8vh,30px);line-height:1.4;word-break:break-word;hyphens:auto}

/* Brands - All Brands Page */
.brands-page #brands.brands{max-height:none;min-height:100vh;overflow-y:auto}
.brands-page #brands.brands>.container{height:auto;padding-top:clamp(20px,3vh,40px);padding-bottom:clamp(40px,5vh,60px)}
.brands-page .brands-content{justify-content:flex-start;overflow:visible}
.brands-page .brands-grid.is-home{max-height:none}

/* View All Brands Link */
.brands-view-all{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:1px solid rgba(248,247,244,.22);background:rgba(0,0,0,.1);color:rgba(248,247,244,.8);font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:transform 240ms var(--ease),opacity 240ms var(--ease)}
.brands-view-all:hover{transform:translateY(-1px);opacity:.95}

/* Details */
.details{min-height:auto;padding-top:var(--header-height)}
.details-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-top:10px}
.detail-message{grid-column:1/-1;text-align:center;max-width:680px;margin:0 auto;font-size:clamp(14px,3.5vw,16px);line-height:2;color:var(--color-text)}
.detail-message p{margin:6px 0}
.event-info{background:transparent;padding:0;text-align:center}
.event-info dl{display:grid;gap:0}
.event-info dd{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(18px,3vh,23px) 0;text-align:center}
.event-info dd:not(:last-child){border-bottom:1px solid rgba(212,207,196,.75)}
body.js .event-info dd.fade-in:not(:last-child){border-bottom-color:rgba(212,207,196,0)}
body.js .event-info dd.fade-in.appear:not(:last-child){border-bottom-color:rgba(212,207,196,.75);transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease),filter var(--reveal) var(--ease),border-bottom-color var(--reveal) var(--ease)}
.event-info dd span{font-size:clamp(13px,3.2vw,14px);line-height:1.7}
.event-info dd span:first-child{font-size:clamp(14px,3.5vw,15px);letter-spacing:.08em;color:var(--color-text)}
.event-info dd span:nth-child(2){font-size:clamp(13px,3.2vw,14px);color:var(--color-text-muted)}
.event-info dd span:nth-child(3){font-size:clamp(15px,3.8vw,16px);letter-spacing:.1em;color:var(--color-text)}
.event-info dd:last-child span:nth-child(n+2){font-size:clamp(14px,3.5vw,15px);letter-spacing:.04em}
.map iframe{display:block;width:100%;height:clamp(320px,50vh,360px);border:0}

/* Explorer */
.explorer{background:var(--color-primary-dark);color:var(--color-bg-light)}
.explorer h3{color:rgba(248,247,244,.6)}
.explorer-content{display:flex;justify-content:center;padding-top:0}
.explorer-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:min(520px,100%);border:1px solid rgba(248,247,244,.22);background:rgba(0,0,0,.1);padding:clamp(28px,5vh,34px) 18px;text-align:center;transition:transform 240ms var(--ease),opacity 240ms var(--ease)}
.explorer-cta:hover{transform:translateY(-1px);opacity:.95}
.explorer-cta-title{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,6vw,30px);letter-spacing:.12em;color:rgba(248,247,244,.85)}
.explorer-cta-sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,247,244,.82)}

/* Special Thanks Section */
.special-thanks {background: #f7f7f7;padding: clamp(60px, 10vh, 100px) 0;text-align: center;}
.special-thanks .container {max-width: 800px;margin: 0 auto;padding: 0 20px;}
.special-thanks h3 {font-size: 12px;font-weight: 400;text-align: center;letter-spacing: 0.2em;text-transform: uppercase;color: #666666;margin-bottom: clamp(30px, 5vh, 50px);}
.thanks-grid {display: grid;gap: clamp(40px, 6vh, 60px);justify-items: center;text-align: center;}
.thanks-section {border-top: none;padding-top: clamp(30px, 5vh, 40px);}
.thanks-section:first-child {border-top: none;padding-top: 0;}
.thanks-item {font-size: clamp(13px, 3.2vw, 14px);color: #2c2c2c;line-height: 1.7;letter-spacing: 0.05em;text-align: center;}

/* Contact & Footer */
.contact{background:var(--color-text);color:var(--color-bg-light);text-align:center;display:flex;flex-direction:column;min-height:calc(var(--contact-main-height) + var(--footer-height));padding:0}
.contact-main{flex:0 0 var(--contact-main-height);display:flex;flex-direction:column;justify-content:center;padding:var(--section-pad) var(--container-pad)}
.contact h3{color:rgba(248,247,244,.6)}
.contact-info{margin-top:40px}
.sns-list{list-style:none;display:flex;justify-content:center;gap:clamp(24px,5vw,30px);padding:0;margin:0}
.sns-list a{width:clamp(40px,8vw,44px);height:clamp(40px,8vw,44px);display:inline-flex;align-items:center;justify-content:center;opacity:.75;transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
.sns-list a:hover{opacity:1;transform:translateY(-1px)}
.site-footer{flex:0 0 var(--footer-height);background:transparent;border-top:1px solid rgba(248,247,244,.1);padding:18px 0 22px;text-align:center}
.footer-nav-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;margin:0 0 18px;padding:0}
.footer-nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,247,244,.72)}
.footer-nav a:hover{color:var(--color-bg-light)}
.copyright{font-size:11px;color:rgba(248,247,244,.68);letter-spacing:.1em}

/* Pages */
.page{padding-top:calc(var(--header-height));padding-bottom:80px;background:#eeeeee}
.page-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,6vw,34px);letter-spacing:.08em;text-align:center;margin-bottom:8px}
.page-lede{text-align:center;color:var(--color-text-muted);margin-bottom:26px;font-size:clamp(13px,3.2vw,14px)}
.products-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2.5vw,14px)}
.product-card{border:1px solid var(--color-border);background:rgba(255,255,255,.35);border-radius:12px}
.product-link{display:flex;flex-direction:column;align-items:center;gap:10px;padding:clamp(14px,3vw,16px) clamp(10px,2vw,12px);text-align:center}
.product-name{font-size:clamp(11px,2.5vw,12px);letter-spacing:.12em}
.product-meta{min-width:180px;text-align:left}
.product-price{font-size:clamp(15px,3.5vw,16px);letter-spacing:.08em;margin-bottom:8px}
.product-volume{color:var(--color-text-muted);font-size:12px}
.quiz{max-width:760px;margin:0 auto}
.quiz-steps{display:grid;gap:18px;margin:24px 0}
.quiz-step{border:1px solid var(--color-border);background:rgba(255,255,255,.35);border-radius:12px;padding:18px 16px}
.quiz-step h4{font-size:14px;margin-bottom:10px}
.quiz-options{display:grid;gap:10px}
.quiz-options label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--color-text-muted)}
.quiz-actions{display:flex;gap:12px;justify-content:space-between}
.btn{appearance:none;border:1px solid var(--color-border);background:rgba(255,255,255,.35);padding:12px 16px;border-radius:10px;cursor:pointer;letter-spacing:.12em;font-size:12px;text-transform:uppercase}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{border-color:rgba(90,117,104,.45)}
.quiz-result{margin-top:24px;border:1px solid var(--color-border);background:rgba(255,255,255,.35);border-radius:12px;padding:18px 16px}
.result-list{display:grid;gap:12px;margin:14px 0 18px;padding-left:18px}
.result-list a{color:var(--color-text)}
.result-share{display:flex;gap:12px;flex-wrap:wrap}
.note{margin-top:10px;color:var(--color-text-muted);font-size:12px}

/* Brand Detail */
.brand-detail{min-height:auto}
.brand-detail .product-actions{width:100%;margin-top:clamp(12px,1.5vh,20px);display:flex;justify-content:center;align-items:center;flex-basis:100%;clear:both}
.breadcrumb{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:6px;text-align:left;margin-top:0;margin-bottom:clamp(4px,.5vh,8px);font-size:clamp(10px,2.2vw,12px)}
.breadcrumb a,.breadcrumb span{text-align:left}
.brand-header{max-width:70%;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px);margin:0 auto clamp(8px,1vh,14px)}
.brand-header .brand-detail-logo{margin:0;width:clamp(220px,16vh,220px);height:clamp(220px,16vh,220px);aspect-ratio:1/1;object-fit:contain;border-radius:12px;}
.brand-detail .page-title{text-align:center;margin-bottom:clamp(4px,.5vh,8px);font-size:clamp(24px,5.5vw,34px)}
.brand-social{max-width:70%;margin:0 auto clamp(6px,.8vh,10px);text-align:center;color:var(--color-text-muted);font-size:clamp(11px,2.5vw,13px);line-height:1.5}
.brand-social-link{display:inline-flex;align-items:center;gap:8px;font-size:clamp(11px,2.5vw,13px);color:var(--color-text-muted);text-decoration:none;transition:color 240ms var(--ease)}
.brand-social-link:hover{color:var(--color-text)}
.brand-social-link .sns-icon{width:18px;height:18px;opacity:.7}
.brand-social-link span{letter-spacing:.04em}
.brand-detail .brand-desc{white-space:pre-wrap;max-width:70%;margin:0 auto clamp(6px,.8vh,10px);text-align:left;color:var(--color-text-muted);font-size:clamp(11px,2.5vw,13px);line-height:1.5}
.brand-detail .subhead{text-align:center;font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:clamp(6px,.8vh,10px)}
.brand-detail .product-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(110px,25vw,180px),1fr));justify-content:center;align-items:stretch;gap:clamp(8px,2vw,12px);width:100%}
.brand-detail .product-card{flex:0 0 auto;display:flex;flex-direction:column}
.brand-detail .product-link{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:8px;text-align:center}
.brand-detail .product-thumb{width:100%;aspect-ratio:7/8;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center}
.brand-detail .product-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.brand-detail .product-meta{width:100%;text-align:center;display:flex;align-items:center;justify-content:center;flex:1}
.brand-detail .product-name{font-size:clamp(10px,2.2vw,12px);letter-spacing:.08em;line-height:1.4;word-break:break-word;hyphens:auto}
.brand-detail .product-price{display:none}

/* Carousel */
.product-carousel{width:min(560px,100%);position:relative;margin:0 auto}
.carousel-viewport{overflow:hidden;border-radius:18px}
.carousel-track{display:flex;gap:0;padding:0;transform:translate3d(0,0,0);will-change:transform;transition:transform 400ms cubic-bezier(.22,1,.36,1)}
.carousel-slide{flex:0 0 100%;width:100%;aspect-ratio:7/8;border-radius:18px;overflow:hidden;background:transparent}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.7);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity 200ms var(--ease),transform 200ms var(--ease);z-index:2}
.carousel-btn span{font-size:26px;line-height:1}
.carousel-btn.is-prev{left:10px}
.carousel-btn.is-next{right:10px}
.carousel-btn:hover{opacity:.92;transform:translateY(-50%) scale(1.02)}
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:10px}
.carousel-dots button{width:8px;height:8px;border-radius:999px;border:1px solid rgba(0,0,0,.2);background:transparent;opacity:.55;cursor:pointer;transition:opacity 200ms var(--ease),background 200ms var(--ease),transform 200ms var(--ease)}
.carousel-dots button.is-active{opacity:1;background:rgba(0,0,0,.35)}
.carousel-dots button:hover{opacity:.9;transform:scale(1.12)}

/* Product Detail */
.page.product-detail .breadcrumb{width:80%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:8px;text-align:left;margin-bottom:clamp(8px,1vh,14px)}
.page.product-detail .breadcrumb a,.page.product-detail .breadcrumb span{text-align:left}
.page.product-detail .container{text-align:center}
.product-layout{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2.2vh,26px)}
.product-media{width:100%;display:flex;flex-direction:column;align-items:center}
.product-info{width:min(760px,100%);margin:0 auto}
.product-info .page-title{margin-bottom:6px}
.product-brand{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:2px}
.product-caption{color:var(--color-text-muted);font-size:clamp(12px,2.8vw,14px);line-height:1.7;margin:0 auto 18px}
.product-caption p{margin-top:10px;text-align:left}
.product-overview{white-space:pre-line;text-align:left;}
.product-type-volume {font-size: 0.95rem;color: var(--color-text-muted);margin: 6px 0 12px;letter-spacing: 0.08em;text-align: center;}
.product-spec,.product-notes{margin-top:14px}
.product-spec h3,.product-notes h3{font-size:10px;font-weight:400;text-align:center;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:2px}
.product-spec p{font-size:clamp(12px,2.8vw,13px);letter-spacing:.08em;text-align:center;color:var(--color-text)}
.notes-list{list-style:none;padding:0;margin:0 auto;max-width:560px;display:grid;gap:8px;align-items:center}
.notes-list li{display:grid;grid-template-columns:clamp(70px,18vw,80px) 1fr;align-items:start;gap:12px;text-align:left;font-size:clamp(12px,2.8vw,13px);line-height:1.7}
.note-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.note-value{color:var(--color-text)}
.product-actions{margin-top:18px;display:flex;justify-content:center;gap:12px}
.ghost-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid rgba(212,207,196,.9);background:transparent;border-radius:999px;font-size:12px;letter-spacing:.12em;color:var(--color-text-muted);transition:opacity 240ms var(--ease),transform 240ms var(--ease),border-color 240ms var(--ease)}
.ghost-link:hover{opacity:.9;transform:translateY(-1px);border-color:rgba(90,117,104,.45)}

/* 404 */
.notfound .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.notfound-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:8px}

/* Reveal Animations */
.fade-in{opacity:1;transform:none;filter:none}
body.js .fade-in{opacity:0;transform:translate3d(0,8px,0) scale(.995);filter:blur(6px);transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease),filter var(--reveal) var(--ease);will-change:opacity,transform,filter}
body.js .fade-in.delay-01{transition-delay:.1s}
body.js .fade-in.delay-02{transition-delay:.2s}
body.js .fade-in.delay-03{transition-delay:.3s}
body.js .fade-in.delay-04{transition-delay:.4s}
body.js .fade-in.delay-05{transition-delay:.5s}
body.js .fade-in.delay-06{transition-delay:.6s}
body.js .fade-in.delay-07{transition-delay:.7s}
body.js .fade-in.delay-08{transition-delay:.8s}
body.js .fade-in.delay-09{transition-delay:.9s}
body.js .fade-in.delay-10{transition-delay:1s}
body.js .fade-in.appear{opacity:1;transform:none;filter:none}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Extra Small Mobile (〜374px) - iPhone SE, small devices */
@media(max-width:374px){
  .intro-message{font-size:clamp(13px,3.2vw,14px);letter-spacing:.1em}
  .about-title{font-size:22px}
  .about-copy{font-size:12px;padding:0 8px}
  .brands .brands-grid.is-home{gap:clamp(6px,1.5vh,10px)}
  .brands .brands-grid.is-home .brand-logo{width:clamp(60px,11vh,83px);aspect-ratio:7/8}
  .brands .brands-grid.is-home .brand-name{font-size:10px;min-height:clamp(20px,2.5vh,26px)}
  .event-info dd span{font-size:12px}
  .event-info dd span:first-child{font-size:13px}
  .event-info dd span:nth-child(3){font-size:14px}
}

/* Small to Medium Mobile (375px〜767px) */
@media(min-width:375px) and (max-width:767px){
  .intro-message{font-size:clamp(15px,3.8vw,17px)}
  .brands .brands-grid.is-home{gap:clamp(10px,2.5vh,20px)}
  .brands .brands-grid.is-home.is-collapsed>li:nth-child(n+10){display:none}
  .brands-grid.is-home .brand-link{padding:clamp(12px,2.5vh,20px);display:flex;flex-direction:column;align-items:center}
  .brands-grid.is-home .brand-logo{width:clamp(92px,23vw,145px);aspect-ratio:7/8}
  .brands-grid.is-home .brand-name{text-align:center;font-size:clamp(10px,2.5vw,11px)}
}

/* Mobile Landscape (〜767px in landscape) */
@media(max-width:767px) and (orientation:landscape){
  .intro{padding:clamp(16px,3vh,20px)}
  .intro-message{font-size:clamp(12px,2.5vh,14px);letter-spacing:.1em;writing-mode:horizontal-tb;max-height:80vh;overflow-y:auto}
  .brands .brands-grid.is-home{gap:clamp(8px,1.5vh,12px)}
  .brands .brands-grid.is-home .brand-logo{width:clamp(53px,10vh,79px);aspect-ratio:7/8}
  .brands .brands-grid.is-home .brand-name{font-size:10px;min-height:clamp(18px,2vh,24px)}
}

/* All Mobile Devices (〜767px) */
@media(max-width:767px){
  /* Mobile Portrait: Vertical Writing */
  .intro-message{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.15em}
  
  .map iframe{height:clamp(320px,50vh,360px)}
  .carousel-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;width:min(420px,84vw);margin:0 auto}
  .carousel-track{gap:0;padding:0 0 10px 0}
  .carousel-slide{flex:0 0 auto;width:min(420px,84vw);max-height:70vh;aspect-ratio:auto;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;background:transparent}
  .carousel-slide img{width:100%;height:auto;max-height:70vh;object-fit:contain}
  .carousel-slide+.carousel-slide{margin-left:12px}
  .carousel-btn{display:none}
  .page.product-detail{padding-top:10px;padding-bottom:10px}
  .notes-list li{grid-template-columns:clamp(65px,16vw,74px) 1fr}
  .page{padding-bottom:0}
  .page .brand-detail{padding-bottom:40px}
  .brand-header{align-items:center;gap:clamp(14px,2.5vh,16px);padding-top:clamp(20px,3vh,32px)}
  .brand-header .brand-detail-logo{width:clamp(280px,32vh,440px);height:clamp(280px,32vh,440px);aspect-ratio:1/1;object-fit:contain;  border-radius:12px;}
  .brand-header .page-title{text-align:center;padding-bottom:0}
  .brand-social{align-items:center}
  .section.brand-detail{padding-top:26px}
  .brands-page #brands.brands{min-height:auto;max-height:none;height:auto;overflow-y:visible;padding-top:80px}
  .brands-page #brands.brands>.container{height:auto}
  .thanks-sub-instructors {grid-template-columns: 1fr;gap: clamp(24px, 4vh, 32px);}
}

/* Tablet Portrait (768px〜1023px) */
@media(min-width:768px) and (max-width:1023px){
  :root{--container-pad:30px;--section-pad:100px}
  .intro-message{font-size:clamp(18px,3vw,20px);writing-mode:horizontal-tb;text-orientation:initial}
  .about-title{font-size:30px}
  .about-copy{font-size:14px;padding:0}
  .products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .map iframe{height:400px}
  
  /* Brands Grid - 4-5-4-5-4 Layout (すべて同一サイズ) */
  #brands.brands{
    min-height:calc(100svh - var(--header-height));
    min-height:calc(100dvh - var(--header-height));
    max-height:calc(100svh - var(--header-height));
    max-height:calc(100dvh - var(--header-height));
    height:calc(100svh - var(--header-height));
    height:calc(100dvh - var(--header-height));
  }
  
  .brands>.container{max-width:100%;padding:0 clamp(20px,3vw,40px)}
  .brands .brands-content{max-width:100%;margin:0}
  .brands .brands-grid.is-home{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(8px,1.2vh,12px);
    max-width:100%;
  }
  .brands .brands-grid.is-home .brand-card{
    flex:0 0 auto;
    width:clamp(110px,14vw,135px);
  }
  .brands .brands-grid.is-home .brand-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:clamp(8px,1.2vh,12px);
  }
  .brands .brands-grid.is-home .brand-logo{
    width:clamp(96px,12.5vw,118px);
    aspect-ratio:7/8;
  }
  .brands .brands-grid.is-home .brand-name{
    font-size:clamp(10px,1.2vw,11px);
    min-height:clamp(20px,2.5vh,28px);
  }
}

/* Tablet Landscape (768px〜1024px in landscape) - iPadを含む */
@media(min-width:768px) and (max-width:1024px) and (orientation:landscape){
  .intro-message{font-size:clamp(16px,2.5vh,18px);max-height:70vh}
  
  /* Brand Detail Page */
  .page .brand-detail{padding-bottom:0}
  
  .brand-header{
    align-items:center;
    gap:clamp(10px,1.5vh,14px);
    padding-top:clamp(16px,2vh,24px);
    margin-bottom:clamp(8px,1vh,12px);
  }
  
  .brand-header .brand-detail-logo{
    width:clamp(200px,24vh,280px);
    height:clamp(200px,24vh,280px);
    aspect-ratio:1/1;
    object-fit:contain;
    border-radius:12px;
  }
  
  .brand-header .page-title{text-align:center;padding-bottom:0;margin-bottom:clamp(4px,.5vh,6px)}
  .brand-social{align-items:center;margin-bottom:clamp(6px,.8vh,8px)}
  .brand-detail .brand-desc{margin-bottom:clamp(8px,1vh,12px)}
  .brand-detail .subhead{margin-bottom:clamp(6px,.8vh,8px)}
  
  .section.brand-detail{
    padding-top:0;
    padding-bottom:0;
    min-height:auto;
  }
  
  .brand-detail>.container{
    height:calc(100vh - var(--header-height));
    max-height:calc(100vh - var(--header-height));
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    padding-top:0;
    padding-bottom:0;
  }
  
  .brand-detail .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    align-content:center;
    max-width:560px;
    width:100%;
    margin:0 auto;
    gap:clamp(8px,1vh,12px);
    flex:0 0 auto;
    max-height:clamp(180px,28vh,240px);
  }
  
  .brand-detail .product-card{
    height:clamp(160px,25vh,200px);
    max-height:clamp(160px,25vh,200px);
  }
  
  .brand-detail .product-link{
    flex:none !important;
    height:100%;
    max-height:100%;
    display:flex;
    flex-direction:column;
    padding:clamp(6px,.8vh,8px);
    gap:4px;
  }
  
  .brand-detail .product-thumb{
    width:100%;
    flex:0 0 auto;
    height:clamp(120px,18vh,150px);
    max-height:clamp(120px,18vh,150px);
    aspect-ratio:auto;
  }
  
  .brand-detail .product-thumb-img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  
  .brand-detail .product-meta{
    flex:0 0 auto;
    height:auto;
    min-height:clamp(24px,3vh,32px);
    max-height:clamp(32px,4vh,40px);
    overflow:hidden;
  }
  
  .brand-detail .product-name{
    font-size:clamp(9px,.9vw,10px);
    line-height:1.3;
  }
  
  .brand-detail .product-actions{
    width:100%;
    margin-top:clamp(16px,2vh,24px);
    display:flex;
    justify-content:center;
    align-items:center;
    flex:0 0 auto;
    clear:both;
    padding-bottom:clamp(16px,2vh,24px);
  }
}

/* Desktop (1024px+) */
@media(min-width:1024px){
  :root{--container-pad:40px;--section-pad:120px}
  
  /* Intro */
  .intro-message{font-size:clamp(20px,2vw,22px);writing-mode:horizontal-tb;text-orientation:initial}
  
  /* Header Desktop Navigation */
  .header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
  .nav-toggle{display:none}
  .nav-overlay{display:none}
  .main-nav{position:static;inset:auto;background:transparent;border:0;opacity:1;transform:none;pointer-events:auto;justify-self:center}
  .main-nav-list{flex-direction:row;justify-content:center;align-items:center;gap:26px;padding:0;flex-wrap:nowrap;white-space:nowrap}
  .mobile-nav-sns{display:none}
  .header-sns{display:flex}
  
  .about-title{font-size:34px}
  .about-copy{font-size:15px;padding:0}
  .products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .product-carousel{width:min(560px,80%);max-width:560px}
  .carousel-slide{max-height:560px;aspect-ratio:7/8}
  .carousel-slide img{object-fit:contain}
  
  /* Details Section */
  .details{height:calc(100svh - var(--header-height));height:calc(100dvh - var(--header-height));min-height:0;padding-bottom:clamp(18px,1vh,40px);display:flex;align-items:center}
  .details>.container{height:100%;display:flex;flex-direction:column;justify-content:center}
  .details-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:30px}
  .event-info,.map{height:100%;min-height:0}
  .map{overflow:hidden}
  .map iframe{height:100%;min-height:0}
  .event-info dd{padding:clamp(18px,2.6vh,28px) 0}
  
  /* Brand Detail Page */
  body:has(.brand-detail){min-height:100vh;display:flex;flex-direction:column}
  body:has(.brand-detail) main{flex:1;display:flex;flex-direction:column}
  .brand-detail{flex:1;display:flex;align-items:flex-start;overflow-y:auto;padding-top:var(--header-height);padding-bottom:20px;box-sizing:border-box}
  .section.brand-detail{padding:0}
  .brand-detail>.container{width:70%;max-width:none;display:flex;flex-direction:column;justify-content:flex-start;padding-top:5px;padding-bottom:0;gap:clamp(6px,.8vh,10px)}
  
  /* Product Detail Page */
  body:has(main.page.product-detail){min-height:100vh;display:flex;flex-direction:column}
  main.page.product-detail{flex:1;display:flex;flex-direction:column}
  .page.product-detail{padding-top:0;padding-bottom:0;background:#fdfcfa;flex:1;display:flex;flex-direction:column}
  .product-detail-section{flex:1;display:flex;align-items:flex-start;padding-top:var(--header-height);padding-bottom:10px;box-sizing:border-box;overflow-y:auto}
  .product-detail-section>.container{width:90%;max-width:1400px;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:clamp(30px,4vw,60px);row-gap:clamp(12px,1.5vh,20px);padding-top:5px;padding-bottom:5px}
  .page.product-detail .breadcrumb{grid-column:1;grid-row:1;margin-bottom:0}
  .product-layout{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,4vw,60px);height:100%;align-items:stretch}
  .product-media{grid-column:1;display:flex;align-items:center;justify-content:center}
  .product-carousel{width:80%;max-width:none;margin:0 auto}
  .carousel-slide{max-height:none}
  .product-info{grid-column:2;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.2vh,16px);padding-right:10px;overflow-y:auto}
  .product-info .page-title{margin-bottom:4px}
  .product-brand{margin-bottom:12px}
  .product-caption{margin-bottom:14px}
  .product-spec,.product-notes{margin-top:10px}
  .product-actions{margin-top:14px}
  .carousel-slide{max-height:640px}
}

/* Desktop Landscape - Brands Grid (1024px+ in landscape only) */
@media(min-width:1024px) and (orientation:landscape){
  .intro-message{font-size:clamp(20px,2.2vw,22px);max-height:80vh}
  
  .brands>.container{max-width:100%;padding:0 20px}
  .brands .brands-content{max-width:100%;margin:0}
  .brands .brands-grid.is-home{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(10px,1.2vh,18px);
    max-width:100%;
  }
  .brands .brands-grid.is-home .brand-card{
    flex:0 0 auto;
  }
  .brands .brands-grid.is-home .brand-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .brands .brands-grid.is-home .brand-logo{
    aspect-ratio:7/8;
  }
  /* Calculate item width: (100% - 7 gaps) / 8 items */
  .brands .brands-grid.is-home .row-8{
    width:calc((100% - (7 * clamp(10px,1.2vh,18px))) / 8);
  }
  /* Calculate item width for 7-item rows */
  .brands .brands-grid.is-home .row-7{
    width:calc((100% - (7 * clamp(10px,1.2vh,18px))) / 8);
  }
}

/* Large Desktop (1440px+) */
@media(min-width:1440px){
  :root{font-size:18px}
  .about-title{font-size:36px}
  .about-copy{font-size:16px}
}
/* Product Purchase Button */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid #b4915c;
  background: linear-gradient(135deg, #C9A876 0%, #d4b88a 100%);
  color: #3a2c10;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

.cta-button:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.product-type,
.product-volume {
  font-size: 0.95rem;
  color: #666;
  margin: 0.5rem 0;
}

/* ===== Archive ドロップダウン（過去開催導線） ===== */
.archive-dd { position: relative; display: inline-flex; align-items: center; }
.archive-trigger {
  display: inline-flex; align-items: center; gap: .4em;
  background: none; border: 0; cursor: pointer; color: inherit; font-family: inherit;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: .6; padding: .35em .25em; transition: opacity .2s ease;
}
.archive-trigger:hover, .archive-dd.is-open .archive-trigger { opacity: 1; }
.archive-ico { width: 13px; height: 11px; border: 1px solid currentColor; border-radius: 2px; position: relative; display: inline-block; flex: 0 0 auto; }
.archive-ico::before, .archive-ico::after { content: ""; position: absolute; left: 2px; right: 2px; height: 1px; background: currentColor; opacity: .75; }
.archive-ico::before { top: 3px; }
.archive-ico::after { top: 6px; }
.archive-menu {
  position: absolute; z-index: 140; min-width: 212px; max-width: 78vw;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(20,30,25,.16); padding: .4rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .24s ease, transform .26s cubic-bezier(.22,1,.36,1), visibility .26s;
}
.archive-dd.is-open .archive-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.archive-dd--header .archive-menu { top: calc(100% + .55rem); right: 0; }
.archive-dd--footer .archive-menu { bottom: calc(100% + .55rem); left: 50%; transform: translate(-50%, 8px); }
.archive-dd--footer.is-open .archive-menu { transform: translate(-50%, 0); }
.archive-menu a { display: block; padding: .55rem .75rem; border-radius: 8px; color: #2b2b2b; text-decoration: none; transition: background .16s ease; }
.archive-menu a:hover, .archive-menu a:focus { background: rgba(90,117,104,.1); }
.archive-vol { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; line-height: 1.15; letter-spacing: .06em; color: #1f2a24; }
.archive-sub { display: block; font-size: .72rem; opacity: .62; margin-top: .12em; }
.footer-archive-wrap { margin: 1.4rem 0 .2rem; text-align: center; }
.archive-dd--footer .archive-trigger { opacity: .78; font-size: .74rem; }
/* ハンバーガー内 */
.archive-mobile { margin-top: .6rem; border-top: 1px solid rgba(127,127,127,.22); padding-top: .6rem; }
.archive-mobile-label { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-bottom: .35em; }
.archive-mobile-list { list-style: none; padding: 0; margin: 0; }
.archive-mobile-list a { opacity: .9; }
@media (max-width: 767px) { .archive-dd--header { display: none; } }

/* ===== 言語スイッチ ===== */
.lang-dd { position: relative; display: inline-flex; align-items: center; margin-right: .25rem; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: .3em;
  background: none; border: 0; cursor: pointer; color: inherit; font-family: inherit;
  font-size: .72rem; letter-spacing: .08em; opacity: .7; padding: .35em .4em; transition: opacity .2s ease;
}
.lang-trigger::after { content: "▾"; font-size: .8em; opacity: .7; }
.lang-trigger:hover, .lang-dd.is-open .lang-trigger { opacity: 1; }
.lang-menu {
  position: absolute; z-index: 140; top: calc(100% + .5rem); right: 0; min-width: 132px;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20,30,25,.15); padding: .3rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .24s cubic-bezier(.22,1,.36,1), visibility .24s;
}
.lang-dd.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a { display: block; padding: .45rem .7rem; border-radius: 7px; color: #2b2b2b; text-decoration: none; font-size: .85rem; transition: background .15s; }
.lang-menu a:hover { background: rgba(90,117,104,.1); }
.lang-menu a[aria-current="true"] { font-weight: 600; color: #5a7568; }
.lang-mobile { margin-top: .6rem; border-top: 1px solid rgba(127,127,127,.22); padding-top: .6rem; }
.lang-mobile-label { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: .35em; }
.lang-mobile-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.lang-mobile-list a[aria-current="true"] { font-weight: 600; }
@media (max-width: 767px) { .lang-dd { display: none; } }
@media (min-width: 768px) { .lang-mobile { display: none; } }

/* ===== アクセシビリティ: キーボードフォーカスの可視化（SC2.4.7） ===== */
:focus-visible { outline: 2px solid #5a7568; outline-offset: 2px; border-radius: 2px; }
/* 暗色セクション上では明色アウトラインに切替 */
.contact :focus-visible, .brands :focus-visible, .explorer :focus-visible { outline-color: #f4efe6; }

/* ===== アクセシビリティ: 動きの抑制を尊重（SC2.3.3） ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; filter: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ── Cloudflare移行で追加（CSP対応: インラインstyle属性を使わない表示制御） ── */
.is-hidden{display:none}
.map iframe{border:0}