/* アルバムの表紙・拡大表示・写真の動き（2026-10-30）。プランページ（.yk-plan .ys）と撮影について（.yt .ys）の両方 */
html body #body_wrap .ys .ys-book{--m:16px}
@media(max-width:600px){html body #body_wrap .ys .ys-book{--m:9px}}
/* 見本 album_open_demo.html のパターン1と同じ動き（2026-10-31 本人指定） */
html body #body_wrap .ys .ys-book.yk-closed,html body #body_wrap .ys .ys-book.yk-opening{background:transparent!important;pointer-events:none}
html body #body_wrap .ys .ys-book.yk-closed{transform:translateX(-25%);box-shadow:none!important;transition:none!important}
html body #body_wrap .ys .ys-book.yk-closed::before,html body #body_wrap .ys .ys-book.yk-closed::after{opacity:0}
html body #body_wrap .ys .ys-book.yk-opening{transform:translateX(0);transition:transform 1.6s cubic-bezier(.6,.05,.25,1),box-shadow .5s ease .9s!important}
html body #body_wrap .ys .ys-book.yk-opening::before,html body #body_wrap .ys .ys-book.yk-opening::after{transition:opacity .5s ease .9s}
html body #body_wrap .ys .ys-book.yk-closed>.ys-page:first-of-type,html body #body_wrap .ys .ys-book.yk-opening>.ys-page:first-of-type{visibility:hidden}
html body #body_wrap .ys .ys-book.yk-closed>.ys-page:last-of-type{visibility:hidden}
.yk-cover{position:absolute;top:0;bottom:0;left:50%;width:50%;z-index:20;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.6,.05,.25,1)}
.yk-cover.is-open{transform:rotateY(-180deg)}
.yk-cover>div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.yk-cover .yk-front{background:radial-gradient(120% 90% at 30% 20%,#6d4d3b,#4e3527 70%);border-radius:2px 6px 6px 2px;box-shadow:inset 6px 0 10px -4px rgba(0,0,0,.45),0 14px 28px rgba(40,25,18,.35);display:flex;align-items:center;justify-content:center;text-align:center}
.yk-cover .yk-front::after{content:"";position:absolute;inset:7%;border:1px solid rgba(214,186,140,.45);border-radius:2px;pointer-events:none}
.yk-cover .yk-back{transform:rotateY(180deg)}
.yk-cover .yk-back>.ys-page{width:100%!important;height:100%!important;visibility:visible!important}
html body #body_wrap .yk-cover .yk-t{display:block!important;font-family:'Shippori Mincho',serif!important;color:#d8bf93!important;background:none!important;font-size:clamp(20px,3vw,30px)!important;letter-spacing:.3em!important;margin:0 0 0 .3em!important;padding:0!important;line-height:1.4!important;border:0!important}
html body #body_wrap .yk-cover .yk-ln{display:block!important;width:40px!important;height:1px!important;background:rgba(216,191,147,.7)!important;margin:14px auto!important}
html body #body_wrap .yk-cover .yk-s{display:block!important;font-family:'Shippori Mincho',serif!important;color:#d8bf93!important;background:none!important;font-size:clamp(10px,1.4vw,12.5px)!important;letter-spacing:.2em!important;margin:0!important;padding:0!important;line-height:1.6!important}
/* 写真を押すと拡大 */
.ys .ys-book .ys-print{cursor:zoom-in}
@media(hover:hover){
 .ys .ys-print{transition:transform .35s ease,box-shadow .35s ease}
 .ys .ys-spread:not(.is-turning) .ys-book:not(.yk-closed) .ys-print:hover{transform:rotate(var(--r)) scale(1.07);z-index:9!important;box-shadow:0 2px 4px rgba(59,50,44,.2),0 14px 28px rgba(59,50,44,.28)}
}
/* スマホ：写真が順番に少し大きくなる */
@keyframes ykPulse{0%,100%{transform:rotate(var(--mr)) scale(1)}45%{transform:rotate(var(--mr)) scale(1.07)}}
@media(max-width:600px){.ys .ys-print.yk-pulse{animation:ykPulse .8s ease-in-out;z-index:9!important}}
.yk-lb{position:fixed;inset:0;z-index:100000;background:rgba(30,22,18,.9);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.yk-lb.on{opacity:1;pointer-events:auto}
.yk-lb img{max-width:92vw;max-height:84vh;background:#fff;padding:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);transform:scale(.96);transition:transform .3s}
.yk-lb.on img{transform:scale(1)}
.yk-lb button{position:absolute;background:none!important;border:0!important;color:#fff!important;font-size:36px;line-height:1;cursor:pointer;padding:14px;box-shadow:none!important}
.yk-lb .x{top:8px;right:8px}.yk-lb .pv{left:2px;top:50%;transform:translateY(-50%)}.yk-lb .nx{right:2px;top:50%;transform:translateY(-50%)}
.yk-lb .n{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#e8dccd;font-size:13px;letter-spacing:.15em;margin:0}
@media (prefers-reduced-motion:reduce){.yk-cover{transition:none}.ys .ys-print.yk-pulse{animation:none}}

/* 2026-11-09 アルバムは準備ができてから表示（表紙が後からかぶさるちらつき防止）。3秒たっても準備できなければそのまま表示 */
@keyframes ykShow{to{opacity:1}}
html body #body_wrap .ys:not(.yk-set) .ys-track{opacity:0;animation:ykShow .2s ease 3s forwards}
html body #body_wrap .ys.yk-set .ys-track{opacity:1;animation:ykShow .35s ease both}

/* 2026-11-09 表紙は押したら開く */
html body #body_wrap .ys .yk-cover{pointer-events:auto;cursor:pointer}
html body #body_wrap .ys .yk-cover:not(.is-open) .yk-front{transition:transform .3s,box-shadow .3s}
@media (hover:hover){html body #body_wrap .ys .yk-cover:not(.is-open):hover .yk-front{box-shadow:inset 6px 0 10px -4px rgba(0,0,0,.45),0 18px 34px rgba(40,25,18,.42)}}
html body #body_wrap .yk-cover .yk-hint{display:inline-block!important;margin-top:22px!important;padding:6px 16px!important;border:1px solid rgba(216,191,147,.6)!important;border-radius:999px!important;font-family:'Shippori Mincho',serif!important;font-size:clamp(10px,1.3vw,12px)!important;letter-spacing:.2em!important;color:#d8bf93!important;background:none!important;line-height:1.4!important;animation:ykHint 2.4s ease-in-out infinite}
@keyframes ykHint{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){html body #body_wrap .yk-cover .yk-hint{animation:none}}

/* 2026-11-09 表紙が立体的にめくれるように奥行きをつける */
html body #body_wrap .ys .ys-book.yk-closed,html body #body_wrap .ys .ys-book.yk-opening{-webkit-perspective:3200px;perspective:3200px}
html body #body_wrap .ys .yk-cover{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
html body #body_wrap .ys .yk-cover>div{-webkit-backface-visibility:hidden;backface-visibility:hidden}
html body #body_wrap .ys .yk-cover .yk-front::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 70%);opacity:0;transition:opacity .8s ease;pointer-events:none;z-index:1}
html body #body_wrap .ys .yk-cover.is-open .yk-front::before{opacity:1}
html body #body_wrap .ys .yk-cover .yk-back::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(59,40,30,.28),rgba(59,40,30,0) 60%);opacity:1;transition:opacity 1.2s ease .5s;pointer-events:none}
html body #body_wrap .ys .yk-cover.is-open .yk-back::after{opacity:0}