:root{--y:#e8a317;--sub:#fff4d6;--ac:#c4412b;--ink:#3a2e26;--bg:#fcfaf5}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP",sans-serif;line-height:1.9}
header{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:6px 24px}
header img{height:96px;display:block;margin-left:-14px}
header nav{display:flex;gap:28px;font-size:15px;font-weight:700}
header nav a{color:var(--ink);text-decoration:none;position:relative;padding:4px 0}
header nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
header nav a:hover::after,header nav a:focus-visible::after{transform:scaleX(1)}
.hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;
 background:linear-gradient(to top,#fff0c9 0%,#fff7e3 38%,var(--bg) 75%)}
/* 動く背景：地平線から朝日がのぼり、朝日から3本の光が右上へ伸び、いちばん長い光の先に星 */
.sky{position:absolute;inset:0;pointer-events:none}
.glow{position:absolute;left:var(--cx);top:var(--hy);width:calc(var(--R)*7);height:calc(var(--R)*7);border-radius:50%;
 background:radial-gradient(circle,rgba(232,163,23,.38) 0%,rgba(232,163,23,.14) 35%,rgba(232,163,23,0) 66%);
 transform:translate(-50%,-50%) scale(.6);opacity:0;animation:glowin 4s ease .6s forwards, breathe 9s ease-in-out 4.6s infinite}
@keyframes glowin{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.8}}
.horizon{position:absolute;left:calc(var(--cx) - var(--R)*1.6);width:calc(var(--R)*3.2);top:var(--hy);height:max(3px,calc(var(--R)*.05));margin-top:calc(var(--R)*-.025);border-radius:9px;background:var(--ink);opacity:.85;
 transform:scaleX(0);animation:line 1.2s cubic-bezier(.2,.7,.2,1) .2s forwards}
@keyframes line{to{transform:scaleX(1)}}
.sunclip{position:absolute;left:calc(var(--cx) - var(--R));top:calc(var(--hy) - var(--R));width:calc(var(--R)*2);height:var(--R);overflow:hidden}
.sun{width:calc(var(--R)*2);height:calc(var(--R)*2);border-radius:50%;background:var(--y);transform:translateY(100%);animation:sunup 2.8s cubic-bezier(.2,.7,.2,1) .8s forwards}
@keyframes sunup{to{transform:translateY(0)}}
.beam{position:absolute;left:var(--cx);top:var(--hy);height:max(6px,calc(var(--R)*.11));margin-top:calc(var(--R)*-.055);transform-origin:0 50%;
 background:linear-gradient(90deg,transparent calc(var(--R)*1.18),var(--y) calc(var(--R)*1.18));border-radius:0 99px 99px 0;
 clip-path:inset(0 100% 0 0);animation:grow 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.b1{width:calc(var(--R)*2.05);rotate:-70deg;animation-delay:3.4s}
.b2{width:calc(var(--R)*1.7);rotate:-45deg;animation-delay:3.2s}
.b3{width:calc(var(--R)*1.5);rotate:-21deg;animation-delay:3.0s}
@keyframes grow{to{clip-path:inset(0 0 0 0)}}
.star{position:absolute;width:calc(var(--R)*.62);height:calc(var(--R)*.62);opacity:0;transform:translate(-50%,-50%) scale(.5);
 animation:appear 1.4s ease 4.6s forwards, glowstar 6s ease-in-out 6s infinite}
@keyframes appear{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes glowstar{0%,100%{filter:drop-shadow(0 0 0 rgba(232,163,23,0))}50%{filter:drop-shadow(0 0 12px rgba(232,163,23,.6))}}
.eb{font-family:Outfit;letter-spacing:.24em;font-size:13px;color:#8a6a1c;opacity:0;animation:up .9s ease .2s forwards}
.copy .sub{font-family:"Zen Kaku Gothic New";font-weight:700;font-size:clamp(18px,1.7vw,22px);margin:0 0 14px}
.lb{position:absolute;transform:translate(0,-50%);opacity:0;animation:up .8s ease forwards;line-height:1.35;white-space:nowrap}
.lb b{display:block;font-family:"Zen Kaku Gothic New";font-size:clamp(18px,1.8vw,24px)}
.lb small{display:block;font-size:13px;color:#6b5a4c}
.lb.main b{font-size:clamp(24px,2.6vw,34px);color:var(--ac)}.lb.main small{font-size:15px;font-weight:700;color:var(--ink)}
#l3{animation-delay:3.9s}#l2{animation-delay:4.1s}#l1{animation-delay:4.4s}
.copy{position:relative;z-index:2;padding:0 40px;max-width:640px;margin-left:6vw}
.copy h1{font-family:"Zen Kaku Gothic New";font-size:clamp(38px,5.6vw,72px);line-height:1.35;margin:0 0 22px;letter-spacing:.02em}
.copy h1 span{display:block;opacity:0;transform:translateY(18px);animation:up .9s ease forwards}
.copy h1 span:nth-child(1){animation-delay:.5s}.copy h1 span:nth-child(2){animation-delay:1.1s}.copy h1 span:nth-child(3){animation-delay:1.7s}
.copy p{font-size:17px;margin:0 0 30px;max-width:32em;opacity:0;animation:up .9s ease 2.4s forwards}
.hero{padding:120px 0 72px}
.copy .body{margin:0 0 30px}.copy .body p{margin:0 0 14px;line-height:1.75}.copy .body p:last-child{margin:0}
#about .more{text-decoration:none}
.btn{display:inline-block;padding:14px 30px;border:2px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700;opacity:0;animation:up .9s ease 2.8s forwards;transition:background .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--bg)}
@keyframes up{to{opacity:1;transform:none}}
.scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:Outfit;font-size:12px;letter-spacing:.2em;z-index:2;opacity:.7}
@media (max-width:760px){
 header{padding:4px 8px}header img{height:68px;margin-left:-8px}header nav{display:none}
 .hero{padding:0}.copy{margin:0;padding:0 16px;align-self:flex-start;margin-top:110px;margin-bottom:460px}.copy p{font-size:15px}.lb small{display:none}.lb b{font-size:17px}.lb.main b{font-size:22px}.lb.main small{display:block;font-size:12px}
 
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .glow{opacity:1;transform:translate(-50%,-50%)}.horizon{transform:none}.sun{transform:none}.beam{clip-path:none}.star{opacity:1;transform:translate(-50%,-50%)}
 .copy h1 span,.copy p,.btn,.eb,.lb{opacity:1;transform:translate(0,-50%)}.copy h1 span,.copy p,.btn,.eb{transform:none}.rv{opacity:1;transform:none}
}

:root{--line:#e8dcc0;--mute:#6b5a4c;--night:#2b221c}
a{color:inherit}:focus-visible{outline:3px solid var(--y);outline-offset:4px;border-radius:8px}
header a img{display:block}
.mnav{display:none}
.eyebrow{font-family:"Zen Kaku Gothic New",sans-serif;letter-spacing:.12em;font-size:15px;color:#8a6a1c}
.sec{padding:110px max(24px,6vw);max-width:1240px;margin:0 auto}
.sec h2{font-family:"Zen Kaku Gothic New";font-size:clamp(26px,3vw,40px);margin:6px 0 14px;line-height:1.45;text-wrap:balance}
.ib{display:inline-block}
.lead{max-width:38em;margin:0 0 44px;color:var(--mute)}
.band{background:var(--sub)}
.svc{border-top:1px solid var(--line)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}.rv.in{opacity:1;transform:none}
.three{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:end}
.three li{border-left:3px solid var(--y);padding:6px 0 6px 22px;min-width:0}
.three li:nth-child(1){border-color:rgba(232,163,23,.4)}.three li:nth-child(2){border-color:rgba(232,163,23,.65);transition-delay:.15s}
.three li.main{transition-delay:.3s}
.three .k{font-family:"Zen Kaku Gothic New";font-size:clamp(28px,2.8vw,38px);display:block;line-height:1.2}
.three li.main .k{color:var(--ac);font-size:clamp(34px,3.4vw,46px)}
.three h3{font-family:"Zen Kaku Gothic New";font-size:18px;margin:6px 0}
.three p{margin:0;font-size:15px;color:var(--mute)}
.feat{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;background:var(--night);color:#f7efe3;border-radius:24px;overflow:hidden;text-decoration:none;margin:12px 0 56px;transition:transform .3s ease,box-shadow .3s ease}
.feat:hover,.feat:focus-visible{box-shadow:0 18px 40px rgba(58,46,38,.18)}
.ft{padding:44px 46px}.ft h3{font-family:"Zen Kaku Gothic New";font-size:clamp(26px,2.8vw,36px);margin:10px 0 10px}.ft p{margin:0 0 18px;color:#e8ddcd}
.tw{display:inline-grid}.tw .tag{justify-self:stretch;text-align:center;font-size:clamp(15px,1.5vw,19px);padding:6px 14px}
.tag{display:inline-block;font-size:13px;font-weight:700;background:var(--y);color:var(--night);border-radius:99px;padding:2px 12px}
.more{font-weight:700;border-bottom:2px solid var(--y)}
.fv{display:grid;place-items:center;padding:30px}.mk{width:100%;max-width:300px}
.gh{font-family:"Zen Kaku Gothic New";font-size:20px;margin:0 0 6px}
.acc{border-top:1px solid var(--line);margin-bottom:56px}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:48px 1fr 28px;align-items:center;gap:12px;padding:20px 4px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:Outfit;font-size:24px;color:var(--y);text-align:center;transition:transform .25s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .no{font-family:Outfit;font-size:22px;color:var(--y)}.acc .tt{min-width:0}
.acc b{font-family:"Zen Kaku Gothic New";font-size:20px;margin-right:14px}.acc em{font-style:normal;font-size:14px;color:var(--mute)}
.acc .ad{margin:0 0 22px 64px;max-width:40em}.acc .ad p{margin:0 0 12px;font-size:15px}
.go{display:flex;gap:18px;flex-wrap:wrap}.go a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--y)}
.app{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;text-decoration:none;background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:22px 30px 22px 22px}
.app img{width:100%;border-radius:14px;display:block}.app h3{font-family:"Zen Kaku Gothic New";font-size:26px;margin:8px 0 6px}.app p{margin:0 0 14px}
.story{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;margin-bottom:64px}
.story p{margin:0 0 22px}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ladder li{display:flex;gap:16px;align-items:baseline;font-weight:700}.ladder b{font-family:Outfit;color:var(--y);font-size:18px;min-width:1.6em;flex:none}
.ladder li:nth-child(2){transition-delay:.1s}.ladder li:nth-child(3){transition-delay:.2s}.ladder li:nth-child(4){transition-delay:.3s}.ladder li:nth-child(5){transition-delay:.4s}
figure{margin:0}figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;display:block}
figcaption{font-size:13px;color:var(--mute);margin-top:10px}
.shelf{display:flex;gap:14px;align-items:flex-start}.shelf a{flex:var(--r) 1 calc(var(--r)*10%);min-width:0}.shelf img{width:100%;height:auto;border-radius:6px;display:block;box-shadow:0 6px 16px rgba(58,46,38,.12);transition:transform .25s}
.shelf a:hover img,.shelf a:focus-visible img{transform:translateY(-4px)}
.contact{background:var(--night);color:#f7efe3}.contact .eyebrow{color:var(--y)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.cta{display:block;text-decoration:none;border:2px solid #f7efe3;border-radius:20px;padding:26px 30px;transition:background .2s,color .2s}
.cta b{display:block;font-family:"Zen Kaku Gothic New";font-size:22px}.cta small{color:#d9cbb8;font-size:14px}
.cta:hover,.cta:focus-visible{background:#f7efe3;color:var(--night)}.cta:hover small{color:var(--mute)}
.cta.ac{background:var(--ac);border-color:var(--ac)}.cta.ac small{color:#fbe3dc}.cta.ac:hover{background:#a8341f;color:#fff}
footer{background:#221a15;color:#d9cbb8}footer .sec{padding-block:48px}footer img{height:64px;display:block;margin:0 0 18px -8px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px}footer a{text-decoration:none}footer a:hover{text-decoration:underline}
footer p{margin:22px 0 0;font-size:12px;opacity:.7}
@media (max-width:760px){
 .mnav{display:block;position:relative}.mnav summary{list-style:none;cursor:pointer;font-weight:700;border:2px solid var(--ink);border-radius:99px;padding:6px 16px;background:rgba(252,250,245,.85)}
 .mnav summary::-webkit-details-marker{display:none}
 .mnav nav{position:absolute;right:0;top:48px;display:flex;flex-direction:column;gap:2px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:10px;min-width:200px;box-shadow:0 12px 30px rgba(58,46,38,.12)}
 .mnav nav a{display:block;padding:10px 12px;text-decoration:none;font-weight:700}
 .sec{padding:72px 16px}.three,.cgrid{grid-template-columns:1fr}.three{gap:22px}
 .feat{grid-template-columns:1fr}.fv{order:-1;padding:26px 26px 0}.mk{max-width:200px}.ft{padding:22px 24px 30px}
 .acc summary{grid-template-columns:36px 1fr 24px}.acc b{display:block;font-size:18px}.acc .ad{margin-left:48px}
 .app{gap:18px;padding:20px}.app h3{font-size:22px}
 .story{grid-template-columns:1fr;gap:30px}.shelf{flex-wrap:wrap;gap:12px 10px}.shelf a{flex-basis:calc(var(--r)*30%)}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}