/* ═══════════════════════════════════════════════ BAR SNOW — event.css (今日だけの夏イベント一式) Dormant unless carries .has-event. Revert = remove that class. ═══════════════════════════════════════════════ */ .efuda,.noren,.epage{display:none} /* ── 入口: ヒーローに吊るした木札 ── */ html.has-event .efuda{ display:block;position:absolute;right:clamp(10px,4vw,72px);top:0;z-index:6; transform-origin:top center; animation:efudaSway 4.2s ease-in-out infinite; } @keyframes efudaSway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}} .efuda__cord{ display:block;width:2px;height:clamp(38px,7vh,74px);margin:0 auto; background:linear-gradient(180deg,rgba(140,100,60,.2),#8F6D3F); } .efuda__board{ display:flex;flex-direction:column;align-items:center;gap:5px; width:clamp(108px,11vw,138px); padding:16px 10px 13px; background: radial-gradient(120% 90% at 30% 0%,rgba(255,246,220,.5),transparent 55%), linear-gradient(180deg,#2C4770,#22385A); border:1.5px solid #17263D; box-shadow:inset 0 0 0 2px rgba(237,231,218,.22),0 6px 16px rgba(10,16,28,.4); color:var(--cream); } .efuda__board b{ font-family:var(--font-jp);font-weight:800;font-size:clamp(16px,1.6vw,19px); letter-spacing:.3em;text-indent:.3em; } .efuda__board span{ font-family:var(--font-ui);font-weight:700;font-size:10.5px;letter-spacing:.08em; color:rgba(237,231,218,.85); } .efuda__board i{ font-style:normal;font-family:var(--font-wood);font-size:7.5px;letter-spacing:.2em; color:var(--amber-soft,#E8B96A);margin-top:3px; animation:efudaBlink 2.4s ease-in-out infinite; } @keyframes efudaBlink{0%,100%{opacity:.6}50%{opacity:1}} .efuda:hover .efuda__board{filter:brightness(1.12)} @media(max-width:900px){ html.has-event .efuda{right:10px;top:30px} .efuda__cord{height:30px} .efuda__board{width:96px;padding:11px 7px 9px;gap:4px} .efuda__board b{font-size:13.5px;letter-spacing:.14em;text-indent:.14em;white-space:nowrap} .efuda__board span{font-size:8.5px;letter-spacing:.02em;line-height:1.5;text-align:center} .efuda__board i{font-size:6px} } /* ── 暖簾 (transition curtain) ── */ html.has-event .noren{ display:block;position:fixed;inset:0;z-index:240; pointer-events:none;visibility:hidden; } .noren__rod{ position:absolute;left:-2%;right:-2%;top:0;height:14px; background:linear-gradient(180deg,#4A3320,#2C1D10); box-shadow:0 3px 8px rgba(0,0,0,.5); transform:translateY(-120%); } .noren__strips{position:absolute;inset:0;display:flex} .noren__strip{ position:relative;flex:1; background: repeating-radial-gradient(circle at 30% 120%, transparent 0 10px, rgba(255,252,240,.07) 10px 11px, transparent 11px 24px), linear-gradient(180deg,#2E4A75 0%,#243C60 55%,#1D3050 100%); border-left:1px solid rgba(12,20,36,.55); box-shadow:inset 0 -30px 50px rgba(10,16,30,.35); transform:translateY(-102%); will-change:transform; clip-path:polygon(0 0,100% 0,100% 97.4%,86% 99.2%,70% 97.8%,52% 99.5%,34% 97.9%,16% 99.3%,0 98%); } .noren__strip--crest{display:flex;align-items:center;justify-content:center} .noren__crest{ display:flex;flex-direction:column;align-items:center;gap:10px; width:min(220px,60%);aspect-ratio:1;border-radius:50%; border:3px solid rgba(237,231,218,.9); box-shadow:inset 0 0 0 7px rgba(237,231,218,.18); justify-content:center;color:var(--cream); } .noren__crest svg{width:44%;height:auto;fill:var(--cream)} .noren__crest b{ font-family:var(--font-jp);font-weight:800;font-size:clamp(14px,1.6vw,18px); letter-spacing:.34em;text-indent:.34em; } /* ── 特設ページ (overlay page) ── */ html.has-event .epage{ display:block;position:fixed;inset:0;z-index:220; background: radial-gradient(120% 70% at 50% -10%,#25406B 0%,transparent 55%), linear-gradient(180deg,#152540 0%,#101E36 40%,#0B1526 100%); } .epage[hidden]{display:none!important} .epage__scroll{ position:absolute;inset:0;overflow-y:auto;overflow-x:clip; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .epage__fireflies{position:fixed;inset:0;width:100%;height:100%;pointer-events:none} .epage__hero{ position:relative;min-height:72svh; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;color:var(--cream); padding:clamp(150px,20vh,200px) 20px 48px; } .epage__lanterns{ position:absolute;left:0;right:0;top:0;height:0; display:flex;justify-content:space-around;align-items:flex-start; } .elantern{ display:block;position:relative;width:clamp(38px,5vw,58px);aspect-ratio:.72; border-radius:46% 46% 42% 42% / 38% 38% 46% 46%; background: repeating-linear-gradient(180deg,transparent 0 17%,rgba(120,40,20,.25) 17% 19%), radial-gradient(50% 42% at 50% 46%,#FFE9B0 0%,#FFC46B 55%,#E8933C 100%); box-shadow:0 0 26px 6px rgba(255,180,90,.35),inset 0 -4px 8px rgba(150,60,20,.4); margin-top:46px; transform-origin:top center; animation:lanternSway 5.5s ease-in-out infinite; animation-delay:var(--d,0s); } .elantern::before{ content:"";position:absolute;left:50%;top:-46px;width:2px;height:46px; background:rgba(20,14,8,.8);transform:translateX(-50%); } .elantern::after{ content:"";position:absolute;left:20%;right:20%;top:-6px;height:8px;border-radius:4px; background:#3A2415; } .elantern--red{ background: repeating-linear-gradient(180deg,transparent 0 17%,rgba(90,10,10,.3) 17% 19%), radial-gradient(50% 42% at 50% 46%,#FF9F86 0%,#E85840 55%,#B93524 100%); box-shadow:0 0 26px 6px rgba(240,90,60,.3),inset 0 -4px 8px rgba(110,20,10,.45); } @keyframes lanternSway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}} .epage__eyebrow{ font-family:var(--font-ui);font-weight:700;font-size:11.5px;letter-spacing:.34em; color:#9FB6D8;margin-bottom:20px; } .epage__eyebrow i{font-style:normal;color:var(--amber);font-size:9px} .epage__title{ font-family:var(--font-jp);font-weight:800; font-size:clamp(46px,9vw,92px);letter-spacing:.18em;text-indent:.18em; text-shadow:0 0 40px rgba(90,140,220,.35); } .epage__sub{ margin-top:14px; font-family:var(--font-ui);font-weight:700;font-size:clamp(13px,1.6vw,16px); letter-spacing:.22em;color:#C7D5EC; } .epage__open{ margin-top:26px; font-family:var(--font-wood);font-size:clamp(13px,1.7vw,17px);letter-spacing:.26em; color:var(--amber-soft,#E8B96A); border-block:2px solid rgba(199,213,236,.4); padding:10px 18px; } .epage__open b{color:#9FB6D8;font-weight:400} .epage__body{ position:relative;max-width:860px;margin:0 auto; padding:10px clamp(18px,4vw,40px) 90px; display:flex;flex-direction:column;gap:34px;align-items:center; } .epage__card{ width:100%; background:linear-gradient(180deg,#F6F1E4,#EDE3CC); color:var(--ink); border:1px solid rgba(36,27,18,.3); padding:clamp(26px,4vw,44px); box-shadow:0 6px 16px rgba(5,10,20,.4),0 26px 60px rgba(5,10,20,.45); transform:rotate(-.4deg); position:relative; } .epage__card::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image:var(--tex-paper);background-size:220px 220px; mix-blend-mode:multiply;opacity:.26; } .epage__kicker{ font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.26em;color:#2C4770; margin-bottom:12px; } .epage__kicker i{font-style:normal;color:var(--verm);font-size:9px} .epage__card h2{ font-family:var(--font-jp);font-weight:800;font-size:clamp(20px,2.6vw,27px); letter-spacing:.08em;margin-bottom:14px; } .epage__text{font-size:clamp(13.5px,1.5vw,15px);line-height:2.15;color:var(--ink-soft)} .epage__text a{color:var(--verm);border-bottom:1.5px solid rgba(216,64,47,.5)} .pc-br{display:inline} @media(max-width:640px){.pc-br{display:none}} .epage__photo{ position:relative;width:min(78%,430px);margin:26px auto 4px; background:#FBF7EC;padding:10px 10px 30px; box-shadow:0 3px 8px rgba(43,33,24,.2),0 16px 34px rgba(43,33,24,.24); transform:rotate(1.2deg); } .epage__photo figcaption{ position:absolute;left:16px;bottom:7px; font-family:var(--font-note);font-size:13px;color:var(--ink-soft); } .epage__join{text-align:center} .epage__note{ margin-top:12px; font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;color:#9FB6D8; } .epage__back{ font-family:var(--font-jp);font-weight:600;font-size:14px;letter-spacing:.2em; color:#C7D5EC;padding:14px 10px; border-bottom:1px solid rgba(199,213,236,.4); transition:color .3s; } .epage__back:hover{color:var(--cream)} .epage__back span{color:var(--amber);font-size:9px} /* ═══════════ コラボ特別営業（あいぱい工房 × BAR SNOW） ═══════════ */ .epage__fireworks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none} /* sand-coloured ground at the very bottom, like the poster */ /* 電飾 — a swag of bulbs across the top of the hero */ .estring{position:absolute;left:0;right:0;top:0;height:90px;pointer-events:none} .estring svg{width:100%;height:100%;display:block} .estring__bulbs{position:absolute;inset:0} .estring__bulbs i{ position:absolute;left:var(--x);top:var(--y); width:7px;height:9px;border-radius:50% 50% 46% 46%; background:radial-gradient(circle at 40% 32%,#FFF3CE,#FFCE7A 60%,#E8A93C); box-shadow:0 0 10px 3px rgba(255,206,122,.5); animation:bulbGlow 3.4s ease-in-out infinite; animation-delay:var(--d,0s); } @keyframes bulbGlow{0%,100%{opacity:.55}50%{opacity:1}} /* コラボ表記 */ .epage__collab{ display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,20px); margin-bottom:14px; font-family:var(--font-note); font-size:clamp(15px,2.2vw,22px);letter-spacing:.1em;color:#E7EDF8; } .epage__collab b{ font-family:var(--font-en);font-style:italic;font-weight:400; font-size:.9em;color:var(--amber-soft,#E8B96A); } .epage__when{ margin-top:24px; display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap; color:var(--cream); } .epage__when b{ font-family:var(--font-jp);font-weight:800; font-size:clamp(30px,5.4vw,52px);letter-spacing:.04em; } .epage__when span{font-family:var(--font-jp);font-weight:600;font-size:clamp(15px,2vw,20px);color:#C7D5EC} .epage__when em{ font-style:normal;font-family:var(--font-en);font-weight:600; font-size:clamp(17px,2.8vw,28px);letter-spacing:.1em; color:var(--amber-soft,#E8B96A); border-bottom:2px solid rgba(232,185,106,.5); padding-bottom:3px;margin-left:6px; } .epage__scrollcue{ display:block;width:1px;height:44px;margin:34px auto 0; background:linear-gradient(180deg,rgba(199,213,236,.7),transparent); animation:cueDrop 2.4s ease-in-out infinite; } @keyframes cueDrop{0%,100%{opacity:.3;transform:translateY(-4px)}50%{opacity:1;transform:translateY(4px)}} /* 市松の敷物 — divider between cards */ .ecloth{ width:min(100%,760px);height:20px; background: repeating-linear-gradient(90deg,#C4462F 0 22px,#E0A02F 22px 44px); opacity:.85; clip-path:polygon(3% 0,97% 0,100% 100%,0 100%); box-shadow:0 4px 12px rgba(5,10,20,.45); } /* 浴衣2種のカード */ .eitems{display:flex;flex-direction:column;gap:clamp(20px,3vw,30px);margin-top:24px} .eitem{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(16px,3vw,28px);align-items:center; padding:clamp(14px,2.2vw,20px); background:rgba(255,252,244,.5); border:1px solid rgba(36,27,18,.18); } .eitem__shot{display:block;position:relative;overflow:hidden;background:#EFE8DA} .eitem__shot img{ width:100%;height:auto;display:block; transition:transform .6s var(--ease-soft); } .eitem__shot:hover img{transform:scale(1.04)} .eitem__tag{ font-family:var(--font-ui);font-weight:700;font-size:10px;letter-spacing:.22em; color:var(--verm);margin-bottom:8px; } .eitem__tag--sub{color:#2C4770} .eitem__name{ font-family:var(--font-jp);font-weight:800; font-size:clamp(20px,2.6vw,26px);letter-spacing:.1em;color:var(--ink); display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px; } .eitem__name span{ font-family:var(--font-en);font-style:italic;font-size:12.5px;letter-spacing:.14em;color:var(--ink-mute); } .eitem__note{font-size:13.5px;line-height:2;color:var(--ink-soft);margin-bottom:14px} .eitem__link{ display:inline-block; font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:.08em; color:var(--ink); border-bottom:2px solid var(--verm);padding-bottom:3px; transition:color .3s,border-color .3s; } .eitem__link:hover{color:var(--verm)} @media(max-width:640px){ .eitem{grid-template-columns:1fr;gap:14px} } /* Special Thanks */ .ethanks{ width:100%;max-width:520px;text-align:center; padding:clamp(22px,3.4vw,32px) 24px; border:1px solid rgba(199,213,236,.35); background:rgba(21,37,64,.5); color:var(--cream); } .ethanks__label{ font-family:var(--font-ui);font-weight:700;font-size:10.5px;letter-spacing:.3em;color:#9FB6D8; margin-bottom:12px; } .ethanks__name{ font-family:var(--font-note);font-size:clamp(22px,3.4vw,30px);letter-spacing:.08em; margin-bottom:8px; } .ethanks__note{font-size:12.5px;line-height:1.9;color:#C7D5EC;margin-bottom:14px} .ethanks__link{ font-family:var(--font-ui);font-weight:700;font-size:12.5px;letter-spacing:.08em; color:var(--amber-soft,#E8B96A); border-bottom:1px solid rgba(232,185,106,.5);padding-bottom:2px; } .ethanks__link:hover{color:var(--cream);border-color:var(--cream)} @media(max-width:560px){ .ecollab__name{font-size:clamp(26px,8.4vw,38px);letter-spacing:.06em;text-indent:.06em} .epage__title{font-size:clamp(17px,5vw,22px);letter-spacing:.16em;text-indent:.16em} .ecollab__x{width:min(78%,300px)} .epage__when{gap:6px} .epage__when b{font-size:clamp(26px,8vw,34px)} .epage__hero{padding:clamp(130px,17vh,170px) 16px 40px} .elantern{width:clamp(30px,10vw,44px)} } /* ═══════════ 夏の夜空レイヤー（固定＝スクロールしても途切れない） ═══════════ */ .esky{position:fixed;inset:0;pointer-events:none;overflow:hidden} .esky__milkyway{ position:absolute;left:-25%;right:-25%;top:-16%;height:105%; background: radial-gradient(58% 26% at 50% 50%,rgba(190,208,244,.085),transparent 72%), radial-gradient(38% 15% at 34% 44%,rgba(226,206,248,.07),transparent 74%), radial-gradient(34% 13% at 68% 58%,rgba(180,224,236,.06),transparent 74%); transform:rotate(-19deg); filter:blur(9px); } .esky__stars{ position:absolute;inset:0; background-image: radial-gradient(1.6px 1.6px at 12% 14%,rgba(255,252,240,.9),transparent), radial-gradient(1.3px 1.3px at 28% 8%,rgba(214,230,255,.75),transparent), radial-gradient(1.7px 1.7px at 41% 22%,rgba(255,252,240,.8),transparent), radial-gradient(1.2px 1.2px at 57% 11%,rgba(226,238,255,.7),transparent), radial-gradient(1.8px 1.8px at 69% 26%,rgba(255,250,230,.85),transparent), radial-gradient(1.3px 1.3px at 82% 9%,rgba(214,230,255,.7),transparent), radial-gradient(1.5px 1.5px at 91% 30%,rgba(255,252,240,.8),transparent), radial-gradient(1.2px 1.2px at 7% 38%,rgba(226,238,255,.6),transparent), radial-gradient(1.6px 1.6px at 34% 44%,rgba(255,252,240,.6),transparent), radial-gradient(1.3px 1.3px at 63% 47%,rgba(214,230,255,.55),transparent), radial-gradient(1.4px 1.4px at 88% 52%,rgba(255,250,230,.5),transparent), radial-gradient(1.2px 1.2px at 19% 58%,rgba(226,238,255,.45),transparent); animation:starTwinkle 6s ease-in-out infinite; } @keyframes starTwinkle{0%,100%{opacity:.75}50%{opacity:1}} /* 遠くの夏祭りの灯り — 画面下に常に居座る地平の明かり */ .esky__horizon{ position:absolute;left:-10%;right:-10%;bottom:-6%;height:42%; background: radial-gradient(50% 100% at 22% 100%,rgba(255,178,96,.16),transparent 70%), radial-gradient(46% 100% at 55% 100%,rgba(255,206,130,.14),transparent 72%), radial-gradient(52% 100% at 84% 100%,rgba(246,138,96,.12),transparent 70%), linear-gradient(180deg,transparent,rgba(232,216,182,.10)); filter:blur(6px); } /* 風鈴 */ .efurin{ position:fixed;right:clamp(26px,7vw,110px);top:0;z-index:3;pointer-events:none; transform-origin:top center; animation:furinSway 4.6s ease-in-out infinite; } .efurin__cord{display:block;width:2px;height:clamp(150px,24vh,230px);margin:0 auto;background:linear-gradient(180deg,transparent,rgba(226,214,190,.45) 40%,rgba(226,214,190,.5))} .efurin__bell{ display:block;width:clamp(26px,3vw,36px);aspect-ratio:1.05;margin:0 auto; border-radius:50% 50% 44% 44% / 62% 62% 38% 38%; background: linear-gradient(180deg,rgba(255,255,255,.5),rgba(198,226,238,.32) 45%,rgba(150,196,220,.22)); border:1px solid rgba(226,240,248,.5); box-shadow:inset -3px -3px 8px rgba(120,170,200,.25),0 0 14px rgba(190,226,242,.25); } .efurin__paper{ display:block;width:8px;height:clamp(24px,3.4vh,34px);margin:2px auto 0; background:linear-gradient(180deg,rgba(246,240,228,.85),rgba(246,240,228,.5)); transform-origin:top center; animation:furinPaper 3.1s ease-in-out infinite; } @keyframes furinSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}} @keyframes furinPaper{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}} @media(max-width:760px){.efurin{display:none}} /* ═══════════ コラボ見出し（主役） ═══════════ */ .ecollab{ display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,14px); margin-bottom:clamp(14px,2.4vh,24px); } .ecollab__row{display:block} .ecollab__name{ font-family:var(--font-jp);font-weight:800; font-size:clamp(30px,6.4vw,66px);letter-spacing:.1em;text-indent:.1em; color:var(--cream); text-shadow:0 0 42px rgba(120,160,230,.4); white-space:nowrap; } .ecollab__name--en{ font-family:var(--font-en);font-weight:700;font-style:italic; letter-spacing:.03em;text-indent:0; } .ecollab__x{ display:flex;align-items:center;gap:clamp(12px,2.4vw,26px); width:min(86%,420px); } .ecollab__x i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(232,185,106,.7),transparent)} .ecollab__x b{ font-family:var(--font-en);font-weight:400;font-size:clamp(18px,2.6vw,26px); color:var(--amber-soft,#E8B96A); } /* 「浴衣コラボ営業」= サブの大見出し */ .epage__title{ font-family:var(--font-jp);font-weight:800; font-size:clamp(22px,3.6vw,38px);letter-spacing:.24em;text-indent:.24em; color:var(--amber-soft,#E8B96A); text-shadow:none; padding:8px 0 0; } /* 実際に着ている写真（ファイルが無い間は自動で隠れる） */ .eworn{ display:flex;gap:clamp(18px,4vw,44px);justify-content:center;align-items:flex-end; margin:28px 0 10px;flex-wrap:wrap; } /* one render is a bust shot and the other full-length — match heights, not widths, or the men's figure towers over the collab piece */ .eworn__fig{position:relative;flex:0 0 auto;margin:0;text-align:center;max-width:46%} .eworn__fig img{ height:clamp(210px,32vh,330px);width:auto;max-width:100%;display:block;margin:0 auto; object-fit:contain; filter:drop-shadow(3px 8px 12px rgba(52,34,16,.28)); } .eworn__fig--star img{height:clamp(230px,35vh,360px)} .eworn__fig--star figcaption{color:var(--verm);font-weight:600} .eworn__fig img:not([src]),.eworn__fig img[src=""]{display:none} .eworn__fig figcaption{ margin-top:8px;font-family:var(--font-note);font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft); } .eworn.is-empty{display:none}