@charset "UTF-8";
/* ===== テーマカラー ===== */
:root{
  --green:#5B9471;      /* メインのグリーン */
  --green-text:#426B51; /* 文字用の濃いグリーン */
}
html{scroll-behavior:smooth}
body{margin:0;background:#FBF6EC}
img{max-width:100%}

/* ===== 各要素のスタイル（u+番号は自動で付けたクラス名） ===== */
.u1{min-height: 100vh; background: #FBF6EC; color: #3E2E22; font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif; line-height: 1.8; overflow-x: clip}
.u2{position: fixed; top: 0; left: 0; width: 100%; height: 5px; background: #E9B841; z-index: 50}
.u3{max-width: 1200px; margin: 0 auto; padding: 14px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px}
.u4{text-decoration: none; display: flex; align-items: baseline; gap: 10px; font-family: 'Zen Maru Gothic', sans-serif}
.u5{font-weight: 900; font-size: 1.35rem; letter-spacing: 0.08em}
.u6{font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em}
.u7{display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 0.92rem; font-weight: 500}
.u8{text-decoration: none; padding: 10px 0}
.u9{width: 48px; height: 48px; padding: 0; border: none; border-radius: 12px; background: rgba(255,255,255,0.16); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px}
.u10{flex-direction: column; gap: 4px; padding: 8px 24px 28px; border-top: 1px solid rgba(255,255,255,0.3)}
.u11{display: flex; align-items: center; min-height: 56px; text-decoration: none; font-size: 1.1rem; font-weight: 700; border-bottom: 1px dashed rgba(255,255,255,0.35)}
.u12{position: relative; max-width: 1200px; margin: 0 auto; padding: 64px 32px 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 56px}
.u13{position: absolute; inset: 0; pointer-events: none; overflow: hidden}
.u14{position: absolute; top: -70px; left: 6%; width: 18px; opacity: 0.75; animation-duration: 11s; animation-delay: -0.0s}
.u15{position: absolute; top: -70px; left: 18%; width: 25px; opacity: 0.75; animation-duration: 14s; animation-delay: -2.3s}
.u16{position: absolute; top: -70px; left: 31%; width: 32px; opacity: 0.75; animation-duration: 17s; animation-delay: -4.6s}
.u17{position: absolute; top: -70px; left: 44%; width: 39px; opacity: 0.75; animation-duration: 11s; animation-delay: -6.9s}
.u18{position: absolute; top: -70px; left: 57%; width: 24px; opacity: 0.75; animation-duration: 14s; animation-delay: -9.2s}
.u19{position: absolute; top: -70px; left: 66%; width: 31px; opacity: 0.75; animation-duration: 17s; animation-delay: -11.5s}
.u20{position: absolute; top: -70px; left: 78%; width: 38px; opacity: 0.75; animation-duration: 11s; animation-delay: -13.8s}
.u21{position: absolute; top: -70px; left: 88%; width: 23px; opacity: 0.75; animation-duration: 14s; animation-delay: -16.1s}
.u22{position: absolute; top: -70px; left: 95%; width: 30px; opacity: 0.75; animation-duration: 17s; animation-delay: -18.4s}
.u23{position: absolute; left: 0; top: 16px; width: 108px; height: 108px; padding: 0; border: none; background: transparent; cursor: pointer; z-index: 2}
.u24{width: 100%; height: 100%}
.u25{flex: 1 1 440px; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; padding-top: 48px}
.u26{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(1.2rem, 2.2vw, 1.6rem); letter-spacing: 0.12em}
.u27{color: #1C8FC4}
.u28{color: #D0135C}
.u29{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(3.2rem, 8vw, 6.2rem); line-height: 1.15; letter-spacing: 0.04em}
.u30{color: #4A3524}
.u31{width: min(100%, 520px); height: 16px; margin-top: -12px}
.u32{display: flex; flex-direction: column; gap: 6px; margin-top: 8px}
.u33{display: flex; flex-wrap: wrap; align-items: center; gap: 16px}
.u34{font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(4.5rem, 10vw, 7rem); line-height: 1; color: #231815; letter-spacing: -0.02em}
.u35{display: inline-flex; align-items: center; padding: 6px 22px; background: #D0135C; color: #FFFFFF; border-radius: 999px; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 2rem; line-height: 1.2}
.u36{font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 2rem; color: #C2552A}
.u37{display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px}
.u38{display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 32px; background: #C2552A; color: #FFFFFF; text-decoration: none; border-radius: 999px; font-weight: 700; letter-spacing: 0.08em}
.u39{flex: 1 1 380px; position: relative; min-width: 300px; max-width: 520px; display: flex; justify-content: center}
.u40{position: absolute; inset: -24px -40px auto auto; width: 70%; height: 55%; background: #E9B841; border-radius: 58% 42% 50% 50% / 50% 60% 40% 50%; opacity: 0.55}
.u41{position: relative; width: 100%; aspect-ratio: 1000 / 1094; object-fit: cover; object-position: 50% 30%; border-radius: 40% 40% 44% 56% / 26% 26% 60% 60%}
.u42{position: absolute; right: -8px; top: 22%; margin: 0; padding: 18px 10px; background: rgba(251,246,236,0.92); border-radius: 999px; writing-mode: vertical-rl; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 1.15rem; letter-spacing: 0.2em; line-height: 1.6}
.u43{font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 1.02rem; line-height: 1.45}
.u44{color: #C2552A}
.u45{position: absolute; left: 34%; top: -36px; margin: 0; padding: 8px 20px; background: #F6E0A8; border-radius: 999px; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 0.95rem}
.u46{max-width: 1000px; margin: 0 auto; padding: 104px 32px; display: flex; flex-direction: column; gap: 40px}
.u47{display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center}
.u48{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.5; letter-spacing: 0.04em}
.u49{margin: 0; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.4rem); color: #C2552A}
.u50{font-size: 0.7em}
.u51{display: flex; flex-direction: column; gap: 20px; font-size: 1.08rem}
.u52{margin: 0; font-weight: 700; font-size: 1.15rem}
.u53{margin: 0}
.u54{background: #FFFFFF; border: 2px solid #CC1F2D; border-radius: 20px; padding: 28px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px}
.u55{flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px}
.u56{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 1.4rem}
.u57{color: #CC1F2D}
.u58{margin: 0; font-size: 0.95rem; color: #5A4636}
.u59{display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; background: #C2552A; color: #FFFFFF; text-decoration: none; border-radius: 999px; font-weight: 700; letter-spacing: 0.06em}
.u60{list-style: none; margin: 0; padding: 0; font-size: 1.05rem}
.u61{display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed #D8CBB8}
.u62{flex-shrink: 0; margin-top: 4px}
.u63{background: #F2EADB; padding: 104px 32px}
.u64{max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px}
.u65{display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center}
.u66{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: 0.06em}
.u67{display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 24px}
.u68{flex: 1 1 340px; max-width: 500px; background: #FFFFFF; border-radius: 24px; padding: 40px 36px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box}
.u69{display: flex; justify-content: space-between; align-items: center}
.u70{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 1.7rem; color: #C2552A}
.u71{margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.3rem; color: #C2552A}
.u72{font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 0.85rem; margin-left: 4px}
.u73{margin: 0; padding-top: 14px; border-top: 2px dotted #D8CBB8; font-size: 1.05rem}
.u74{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 1.7rem; color: #9A6A0E}
.u75{margin: 0; font-weight: 700; font-size: 1.2rem; color: #9A6A0E}
.u76{max-width: 1000px; margin: 0 auto; padding: 104px 32px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start}
.u77{flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px}
.u78{align-self: flex-start; padding: 4px 16px; background: #F3C9B6; color: #8A3416; border-radius: 6px; font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: 0.1em; transform: rotate(-4deg)}
.u79{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: 0.04em}
.u80{align-self: flex-start; margin-top: 16px}
.u81{width: 88px; height: 88px; padding: 0; border: none; background: transparent; cursor: pointer}
.u82{flex: 2 1 420px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px}
.u83{display: flex; align-items: center; gap: 16px; padding: 18px 24px; background: #FFFFFF; border-radius: 16px; font-size: 1.15rem; font-weight: 500}
.u84{flex-shrink: 0}
.u85{background: #F2EADB; padding: 104px 32px; position: relative}
.u86{max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 56px}
.u87{flex: 1.3 1 480px}
.u88{background: #FFFFFF; padding: 14px 14px 18px; border-radius: 8px; box-shadow: 0 12px 30px rgba(62,46,34,.16)}
.u89{display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px}
.u90{flex: 1 1 340px; display: flex; flex-direction: column; gap: 18px}
.u91{align-self: flex-start; padding: 6px 18px; background: #D0135C; color: #FFFFFF; border-radius: 999px; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; letter-spacing: 0.08em}
.u92{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.2; letter-spacing: 0.04em}
.u93{align-self: flex-start; display: flex; align-items: center; gap: 14px; padding: 14px 22px; background: #FFFFFF; border: 2px dashed #C2552A; border-radius: 12px}
.u94{font-weight: 700; font-size: 1.05rem}
.u95{margin: 0; font-size: 1.05rem}
.u96{background: #F6E0A8; padding: 96px 32px}
.u97{max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px}
.u98{flex: 1 1 360px; display: flex; flex-direction: column; gap: 16px}
.u99{margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.4em; color: #8A5A08}
.u100{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.6rem)}
.u101{align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 32px; background: #C2552A; color: #FFFFFF; text-decoration: none; border-radius: 999px; font-weight: 700; letter-spacing: 0.08em}
.u102{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; color: #FFFFFF}
.u103{display: flex; flex-direction: column; gap: 6px}
.u104{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 1.9rem; letter-spacing: 0.06em}
.u105{font-size: 1.1rem}
.u106{margin: 0; font-size: 0.95rem}
.u107{display: flex; flex-wrap: wrap; gap: 24px 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.4)}
.u108{flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px}
.u109{align-self: flex-start; padding: 2px 14px; border: 1.5px solid #FFFFFF; border-radius: 4px; font-weight: 700; font-size: 0.9rem}
.u110{margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-weight: 700}
.u111{flex: 1 1 360px; display: flex; gap: 14px; align-items: flex-start}
.u112{display: flex; flex-direction: column; gap: 14px; align-items: flex-start}
.u113{display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 2px solid #FFFFFF; border-radius: 999px; text-decoration: none; font-weight: 700}
.u114{margin: 0; font-family: 'Outfit', sans-serif; font-size: 0.85rem; letter-spacing: 0.06em; text-align: center; color: #FFFFFF}
.u115{text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; padding: 10px 0}
.u116{position: relative; max-width: 1000px; margin: 0 auto; padding: 72px 32px 56px; display: flex; flex-direction: column; gap: 18px}
.u117{margin: 0; display: flex; align-items: center; gap: 16px; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.2; letter-spacing: 0.04em}
.u118{display: inline-flex}
.u119{margin: 0; font-size: 1.1rem}
.u120{background: #F2EADB; padding: 88px 32px}
.u121{max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px}
.u122{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: 0.04em}
.u123{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px}
.u124{background: #FFFFFF; border-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 8px}
.u125{display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem}
.u126{font-size: 1rem}
.u127{margin: 0; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 90px}
.u128{display: flex; align-items: center; gap: 12px; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5}
.u129{max-width: 1000px; margin: 0 auto; padding: 88px 32px; display: flex; flex-direction: column; gap: 32px}
.u130{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px}
.u131{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: #FFFFFF; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 1.05rem}
.u132{display: flex; align-items: center; gap: 10px}
.u133{margin: 0; padding: 18px 22px; background: #FFF2DC; border-radius: 14px}
.u134{display: flex; flex-direction: column; gap: 64px; margin-top: 24px}
.u135{flex-shrink: 0; width: 8px; align-self: stretch; border-radius: 4px; background: #E0577A}
.u136{flex-shrink: 0; width: 8px; align-self: stretch; border-radius: 4px; background: #1A8BC9}
.u137{flex-shrink: 0; width: 8px; align-self: stretch; border-radius: 4px; background: #F29A1E}
.u138{background: #F6E0A8; padding: 80px 32px}
.u139{max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px}
.u140{display: flex; flex-direction: column; gap: 8px}
.u141{margin: 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.4rem)}
.u142{display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 32px; background: #C2552A; color: #FFFFFF; text-decoration: none; border-radius: 999px; font-weight: 700; letter-spacing: 0.06em}

/* ===== アニメーション・動き・レスポンシブ ===== */

a{color:inherit}a:hover{opacity:.8}
section{scroll-margin-top:80px}
@keyframes sway{0%{transform:translateY(-10px) rotate(-8deg)}50%{transform:translateY(10px) rotate(8deg)}100%{transform:translateY(-10px) rotate(-8deg)}}
.sway{animation:sway 7s ease-in-out infinite;transform-origin:50% 50%}
.sway.slow{animation-duration:11s}
@keyframes fall{0%{transform:translate3d(0,0,0) rotate(0deg)}25%{transform:translate3d(34px,240px,0) rotate(90deg)}50%{transform:translate3d(-24px,480px,0) rotate(200deg)}75%{transform:translate3d(28px,720px,0) rotate(290deg)}100%{transform:translate3d(-8px,980px,0) rotate(400deg)}}
.fall{animation:fall linear infinite}
@keyframes hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-12px) scale(1.04,.96)}50%{transform:translateY(0) scale(.96,1.04)}70%{transform:translateY(-4px)}}
.hop:hover,.hop:focus-visible{animation:hop .6s cubic-bezier(.34,1.56,.64,1)}
.pop{display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1);cursor:default}
.pop:hover{transform:translateY(-16px) rotate(-8deg) scale(1.1)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(6deg)}}
.bob{display:inline-block;animation:bob 2.4s ease-in-out infinite}
@keyframes jump{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-14px)}80%{transform:translateY(0)}88%{transform:translateY(-5px)}}
.jump{display:inline-block;animation:jump 2.6s ease-in-out infinite}
@keyframes wiggle{0%,84%,100%{transform:rotate(0deg)}88%{transform:rotate(-12deg) scale(1.08)}92%{transform:rotate(10deg) scale(1.08)}96%{transform:rotate(-5deg)}}
.wiggle{animation:wiggle 3.2s ease-in-out infinite}
@keyframes morph{0%,100%{border-radius:58% 42% 50% 50%/50% 60% 40% 50%}33%{border-radius:40% 60% 62% 38%/58% 38% 62% 42%}66%{border-radius:52% 48% 36% 64%/40% 62% 38% 60%}}
.morph{animation:morph 9s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.floaty{animation:floaty 5s ease-in-out infinite}
.badge{transition:transform 1s cubic-bezier(.34,1.56,.64,1)}
.badge:hover{transform:rotate(360deg) scale(1.08)}
.bubble{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.bubble:hover{transform:scale(1.15) rotate(-4deg)}
.card{transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.card:hover{transform:translateY(-12px) rotate(-1.2deg);box-shadow:0 20px 40px rgba(62,46,34,.15)}
.card:hover .ico{animation:hop .7s cubic-bezier(.34,1.56,.64,1)}
.check{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .3s}
.check:hover{transform:translateX(12px);background-color:#FFF2DC}
.tick{stroke-dasharray:26;stroke-dashoffset:0}
.check:hover .tick{animation:draw .5s ease-out}
@keyframes draw{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
.qr{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.qr:hover{transform:rotate(-5deg) scale(1.07)}
.bus-row:hover .bus{animation:drive .9s ease-in-out}
@keyframes drive{0%,100%{transform:translateX(0)}40%{transform:translateX(12px) rotate(-4deg)}70%{transform:translateX(-3px)}}
.spin-btn{transition:transform 1.1s cubic-bezier(.34,1.56,.64,1)}
.spin-btn:hover{filter:brightness(1.08)}
.spin-btn:focus-visible{outline:3px solid #E9B841;outline-offset:4px;border-radius:50%}
.progress{display:none}
.burger{display:none!important}
.mnav{display:none!important}
@keyframes menuIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.mnav a{animation:menuIn .45s cubic-bezier(.34,1.56,.64,1) both}
.mnav a:nth-child(2){animation-delay:.05s}.mnav a:nth-child(3){animation-delay:.1s}.mnav a:nth-child(4){animation-delay:.15s}.mnav a:nth-child(5){animation-delay:.2s}.mnav a:nth-child(6){animation-delay:.25s}.mnav a:nth-child(7){animation-delay:.3s}
.tilt{transform:rotate(-2.5deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.tilt:hover{transform:rotate(0deg) scale(1.03);box-shadow:0 24px 48px rgba(62,46,34,.22)}
.ticket{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.ticket:hover{transform:rotate(-3deg) scale(1.05)}
.burger:focus-visible{outline:3px solid #E9B841;outline-offset:2px}
@media (max-width: 480px){.brand-sub{display:none}}
@media (max-width: 760px){.dnav{display:none!important}.burger{display:inline-flex!important}.mnav:not([hidden]){display:flex!important}}
@supports (animation-timeline: view()){
.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
@keyframes reveal{from{opacity:0;transform:translateY(56px) scale(.96)}to{opacity:1;transform:none}}
.roll{animation:roll linear both;animation-timeline:view()}
@keyframes roll{from{transform:rotate(-270deg)}to{transform:rotate(270deg)}}
.drift{animation:drift linear both;animation-timeline:view()}
@keyframes drift{from{transform:translateY(70px) rotate(-30deg)}to{transform:translateY(-70px) rotate(30deg)}}
.progress{display:block;animation:grow linear both;animation-timeline:scroll(root);transform-origin:0 50%}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.px-1{translate:calc(var(--mx,0) * -14px) calc(var(--my,0) * -10px)}
.px-2{translate:calc(var(--mx,0) * -30px) calc(var(--my,0) * -22px)}
.px-3{translate:calc(var(--mx,0) * 22px) calc(var(--my,0) * 16px)}
.cursor-ring{display:none;position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:70}
.fx-on .cursor-ring{display:block}
.cursor-ring span{position:absolute;left:-18px;top:-18px;width:36px;height:36px;box-sizing:border-box;border:2px solid #C2552A;border-radius:50%;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .3s,border-color .3s}
.cursor-hover .cursor-ring span{transform:scale(1.75);background-color:rgba(233,184,65,.18);border-color:#E9B841}
.cursor-down .cursor-ring span{transform:scale(.7)}
.trail{position:fixed;left:-100px;top:-100px;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;z-index:65;opacity:0}
.trail.go{animation:trail 1.3s ease-out forwards}
@keyframes trail{0%{opacity:.9;transform:translate(0,0) rotate(var(--r0,0deg)) scale(1)}100%{opacity:0;transform:translate(var(--dx,0px),80px) rotate(calc(var(--r0,0deg) + 220deg)) scale(.5)}}
.fx-on .hop{transition:translate .3s cubic-bezier(.34,1.56,.64,1)}
.glare{position:relative}
.glare::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(233,184,65,.25),transparent 65%);opacity:0;transition:opacity .3s}
.fx-on .glare:hover::after{opacity:1}
.fx-on .tilt3d:hover{transform:perspective(900px) rotateX(calc(var(--ty,0) * -7deg)) rotateY(calc(var(--tx,0) * 9deg)) translateY(-10px);transition:transform .15s ease-out,box-shadow .3s}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ハンバーガーの3本線 */
.bar{display:block;width:24px;height:2.5px;border-radius:2px;background:#FFFFFF;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.burger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] .bar:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* スクロール連動アニメーションに非対応のブラウザ向け（JSで .in を付与） */
.io .reveal{opacity:0;transform:translateY(48px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.io .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.io .reveal{opacity:1;transform:none}}