/* Chalkart Yumi */
:root{
  --board:#1b2420; --board2:#232e29; --line:#3a4842;
  --chalk:#f3f0e6; --dim:#b9bdb2;
  --pink:#f4a6b8; --yellow:#f6d675; --blue:#8cc8e8; --mint:#9fdcc0;
  --hand:"Zen Kurenaido","Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-behavior:smooth;scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--board);color:var(--chalk);font-family:var(--body);line-height:1.9;
  background-image:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.07),transparent 55%),radial-gradient(ellipse at 90% 60%,rgba(255,255,255,.04),transparent 50%);}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--board);z-index:30}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
section{padding:88px 0 24px}
h2{font-family:var(--hand);font-weight:400;font-size:clamp(30px,5vw,44px);margin:0 0 8px;letter-spacing:.06em;position:relative;display:inline-block}
h2::after{content:"";display:block;height:6px;margin-top:6px;background:currentColor;opacity:.7;border-radius:6px;transform:rotate(-.6deg);clip-path:polygon(0 40%,30% 10%,60% 60%,100% 20%,100% 80%,60% 100%,30% 50%,0 90%)}
.sub{color:var(--dim);margin:0 0 36px;font-size:14px}
h3{font-family:var(--hand);font-weight:400;font-size:22px;margin:0 0 6px}

/* nav */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(27,36,32,.92);backdrop-filter:blur(8px);border-bottom:1px dashed var(--line)}
.bar{display:flex;align-items:center;gap:20px;height:56px}
.logo{font-family:var(--hand);font-size:20px;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:6px;overflow-x:auto;margin-left:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{padding:6px 12px;text-decoration:none;font-size:14px;border-radius:99px;white-space:nowrap;color:var(--dim)}
nav a:hover{color:var(--chalk);background:rgba(255,255,255,.08)}

/* hero */
.hero{padding:clamp(56px,12vh,120px) 0 40px;text-align:center}
.hero h1{font-family:var(--hand);font-weight:400;font-size:clamp(44px,11vw,112px);line-height:1.1;margin:0;letter-spacing:.04em;color:var(--chalk)}
.hero h1 span{display:inline-block}
.hero p{font-family:var(--hand);font-size:clamp(17px,3.4vw,24px);color:var(--dim);margin:18px 0 0}
.scribble{display:block;margin:10px auto 0;width:min(520px,80%);height:auto;overflow:visible}
.scribble path{fill:none;stroke-linecap:round;stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s ease-out forwards}
.scribble path:nth-child(1){stroke:var(--pink);animation-delay:.2s}
.scribble path:nth-child(2){stroke:var(--yellow);animation-delay:.9s}
.scribble path:nth-child(3){stroke:var(--blue);animation-delay:1.5s}
@keyframes draw{to{stroke-dashoffset:0}}
.cta{display:inline-block;margin-top:30px;padding:12px 30px;border:2px solid var(--chalk);border-radius:255px 18px 225px 18px/18px 225px 18px 255px;text-decoration:none;font-family:var(--hand);font-size:19px;transition:background .2s,color .2s}
.cta:hover{background:var(--chalk);color:var(--board)}

.who-img{display:block;width:min(300px,100%);height:auto;margin:0 0 26px;border:6px solid #6b4f36;border-radius:4px}
.about-panel{background:linear-gradient(rgba(27,36,32,.88),rgba(27,36,32,.9)),url("../img/work-oneway.png") center/cover}
.slider{position:relative;width:min(760px,100%);aspect-ratio:3/2;margin:44px auto 0;border:8px solid #6b4f36;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden;background:#000;touch-action:pan-y}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.slides img.on{opacity:1}
.sbtn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:24px;cursor:pointer}
.sbtn:hover{background:rgba(0,0,0,.65)}#sp{left:8px}#sn{right:8px}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:10px}
.dots button{width:12px;height:12px;padding:0;border-radius:50%;border:1.5px solid #fff;background:transparent;cursor:pointer}
.dots button[aria-current="true"]{background:var(--yellow);border-color:var(--yellow)}
/* news */
.news{border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:18px 0;display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.news time{color:var(--yellow);font-family:var(--hand);font-size:18px}

/* gallery */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{font:inherit;font-size:14px;color:var(--chalk);background:none;border:1.5px solid var(--line);border-radius:99px;padding:6px 16px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--yellow);color:var(--yellow);background:rgba(246,214,117,.08)}
.grid{columns:2;column-gap:14px}
@media(min-width:720px){.grid{columns:3;column-gap:20px}}
@media(min-width:1040px){.grid{columns:4}}
.tile{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:none;cursor:zoom-in;break-inside:avoid;position:relative;border-radius:6px;overflow:hidden}
@media(min-width:720px){.tile{margin-bottom:20px}}
.tile img{display:block;width:100%;height:auto;border:6px solid #6b4f36;border-radius:4px;transition:transform .35s}
.tile:hover img{transform:scale(1.03)}
.tile span{position:absolute;left:6px;right:6px;bottom:6px;padding:22px 10px 8px;text-align:left;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .25s}
.tile:hover span,.tile:focus-visible span{opacity:1}
@media(hover:none){.tile span{opacity:1}}
.note{font-size:13px;color:var(--dim);margin-top:6px}

/* lightbox */
#lb{position:fixed;inset:0;z-index:100;background:rgba(10,14,12,.96);display:none;flex-direction:column;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));touch-action:pan-y}
#lb.on{display:flex}
#lb img{max-width:min(92vw,900px);max-height:72vh;object-fit:contain;border:8px solid #6b4f36;border-radius:4px;background:var(--board)}
#lb p{font-family:var(--hand);font-size:20px;margin:16px 0 0;text-align:center}
#lb small{color:var(--dim)}
.lbtn{position:absolute;background:rgba(255,255,255,.08);color:var(--chalk);border:0;width:48px;height:48px;border-radius:50%;font-size:24px;cursor:pointer}
.lbtn:hover{background:rgba(255,255,255,.18)}
#lbx{top:calc(14px + env(safe-area-inset-top,0px));right:14px}
#lbp{left:10px;top:50%}#lbn{right:10px;top:50%}
@media(max-width:600px){#lbp,#lbn{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px))}#lbp{left:20px}#lbn{right:20px}}

/* profile */
.cols{display:grid;gap:40px}
@media(min-width:860px){.cols{grid-template-columns:1fr 1fr}}
.tl{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px dashed var(--line)}
.tl li{position:relative;padding:0 0 16px 8px}
.tl li::before{content:"";position:absolute;left:-30px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--pink)}
.tl b{font-family:var(--hand);font-weight:400;color:var(--yellow);font-size:18px;display:block}
.who{font-family:var(--hand);font-size:22px;margin:0 0 14px}
.panel{background:var(--board2);border:1px dashed var(--line);border-radius:14px;padding:26px}
.panel p{margin:0 0 1em}

/* steps */
.steps{display:grid;gap:18px;counter-reset:s}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--board2);border-radius:14px;padding:24px;border:1px dashed var(--line);counter-increment:s}
.step::before{content:"STEP." counter(s);font-family:var(--hand);color:var(--blue);font-size:20px}
.step p{margin:8px 0 0;font-size:15px}

/* price */
.price{list-style:none;margin:0;padding:0;max-width:720px}
.price li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line)}
.price strong{font-family:var(--hand);font-weight:400;font-size:21px}
.price em{font-style:normal;text-align:right;font-size:15px}
.price em b{font-family:var(--hand);font-weight:400;color:var(--yellow);font-size:20px}
@media(max-width:560px){.price li{flex-direction:column;gap:2px}.price em{text-align:left}}

/* faq */
details{border-bottom:1px dashed var(--line);max-width:720px}
summary{cursor:pointer;padding:16px 28px 16px 0;list-style:none;position:relative;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";position:absolute;right:0;top:14px;color:var(--mint);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 18px;color:var(--dim);font-size:15px}

/* access */
.dl{display:grid;grid-template-columns:7em 1fr;gap:10px 18px;margin:0;max-width:640px}
.dl dt{color:var(--dim)}.dl dd{margin:0;overflow-wrap:anywhere}
footer{margin-top:80px;padding:36px 0 48px;text-align:center;color:var(--dim);font-size:13px;border-top:1px dashed var(--line)}
@media(prefers-reduced-motion:reduce){.scribble path{animation:none;stroke-dashoffset:0}html{scroll-behavior:auto}*{transition:none!important}}

.tile[hidden]{display:none}
.insta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px}
.insta a{display:block;aspect-ratio:1;border:5px solid #6b4f36;border-radius:4px;overflow:hidden}
.insta img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.insta a:hover img{transform:scale(1.05)}
.cta+.cta{margin-left:12px}

/* 三点メニュー（画面幅が狭いとき） */
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--chalk);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.1)}
@media(max-width:900px){
  .menu-btn{display:flex}
  nav{display:none;position:absolute;top:calc(100% + 6px);right:12px;margin:0;min-width:210px;flex-direction:column;gap:2px;overflow:visible;padding:8px;background:var(--board2);border:1px dashed var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
  nav.open{display:flex}
  nav a{padding:12px 16px;border-radius:8px;font-size:16px;color:var(--chalk)}
}