/* yubisaki.info / independent About page sample */
:root{--yk-page:clamp(40px,4.2vw,64px);--yk-section:clamp(28px,2.4vw,38px);--paper:#f7f7f2;--ink:#30332f;--lime:#e2ff72;--side:29%;--type:Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--type);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,h3,p,dl,dd{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
::selection{color:var(--ink);background:var(--lime)}
.ya-skip{position:fixed;z-index:60;left:12px;top:-80px;background:var(--ink);color:var(--paper);padding:12px 18px}.ya-skip:focus{top:12px}
.ya-sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);padding:46px 3.5% 35px 4%;z-index:20;display:flex;flex-direction:column;background:var(--paper);border-right:1px solid rgba(48,51,47,.09)}
.ya-brand{font-family:Arial,sans-serif;display:inline-block;font-weight:600;letter-spacing:-.055em;font-size:clamp(28px,3.3vw,51px);line-height:1;white-space:nowrap}
.ya-brand span{font-size:.48em;letter-spacing:-1px}.ya-brand-caption{font-size:11px;letter-spacing:.025em;color:#61655e;margin:15px 0 0;line-height:1.8}
.ya-nav{margin-top:clamp(45px,10vh,100px);display:grid;gap:19px}.ya-nav a{display:flex;align-items:baseline;gap:20px;width:max-content;font-family:Arial,sans-serif;font-size:clamp(23px,2.2vw,34px);font-weight:400;letter-spacing:0}
.ya-nav small{font-size:10px;font-weight:400}.ya-nav a span{position:relative}.ya-nav a span:after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--ink);transition:width .2s ease}.ya-nav a:hover span:after{width:100%}.ya-nav a.is-active span:after{width:100%;height:5px;background:var(--lime);border-radius:60% 40% 45% 30%;transform:rotate(-2deg)}
.ya-sidebar-bottom{margin-top:auto;padding-top:32px;font-size:12px;line-height:1.9;color:#61655e}.ya-sidebar-bottom p{margin:0 0 20px}.ya-sidebar-bottom small{font-size:10px;letter-spacing:.06em}.ya-status{display:inline-block;width:7px;height:7px;background:#809462;border-radius:50%;margin-right:8px}.ya-menu-toggle{display:none}
.ya-main{margin-left:var(--side);position:relative;isolation:isolate;overflow:clip}
.ya-stage{position:fixed;inset:0 0 0 var(--side);height:100vh;height:100dvh;overflow:hidden;background:var(--paper);z-index:-1;pointer-events:none}
.ya-video{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 49%;background:var(--paper)}
.ya-story{position:relative;z-index:1}.ya-opening{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:36px clamp(24px,5.8vw,96px) 42px;background:linear-gradient(90deg,rgba(247,247,242,.66),rgba(247,247,242,.08) 68%)}
.ya-opening-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.055em}.ya-opening h1{font-family:Arial,sans-serif;font-size:clamp(72px,10vw,155px);letter-spacing:-.075em;font-weight:500;line-height:1.06;margin-top:clamp(42px,12vh,125px)}.ya-dot{color:#8caa4e}
.ya-opening-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:auto}.ya-opening-bottom p{font-size:clamp(24px,2.6vw,38px);font-weight:600;line-height:1.55;letter-spacing:.01em;max-width:420px}.ya-opening-bottom a{font-size:12px;white-space:nowrap;padding:8px 0;border-bottom:1px solid}.ya-opening-bottom a span{margin-left:12px;font-size:18px}
.ya-section{display:flex;align-items:center;min-height:108vh;min-height:108dvh;padding:100px clamp(24px,5.8vw,96px)}.ya-index{font-size:12px;letter-spacing:.08em;margin-bottom:28px}.ya-introduction{background:linear-gradient(90deg,rgba(247,247,242,.97) 1%,rgba(247,247,242,.92) 47%,rgba(247,247,242,.16) 100%)}
.ya-text-surface{max-width:680px;width:85%;padding:32px 20px 32px 0}.ya-section h2{font-size:clamp(30px,3.8vw,54px);font-weight:600;line-height:1.52;letter-spacing:.02em;margin-bottom:35px}
.ya-prose{font-size:clamp(17px,1.5vw,21px);line-height:2.12;letter-spacing:.02em;overflow-wrap:anywhere}.ya-prose p+p{margin-top:22px}.ya-underline{background:linear-gradient(transparent 70%,var(--lime) 70%,var(--lime) 89%,transparent 89%)}
.ya-thinking{color:var(--paper);background:rgba(36,40,36,.91);min-height:118vh;min-height:118dvh}.ya-thinking-inner{max-width:740px;margin:0 auto;width:100%;padding:45px 0}.ya-thinking .ya-index{color:var(--lime)}.ya-thinking h2{font-size:clamp(35px,4.3vw,62px);line-height:1.5;margin-bottom:44px}.ya-thinking .ya-prose{max-width:660px}
.ya-profile{position:relative;z-index:2;background:var(--ink);color:var(--paper);min-height:100vh;min-height:100dvh;padding:65px clamp(24px,5.8vw,96px) 35px;display:flex}.ya-profile-inner{width:100%;max-width:1080px;margin:auto;display:flex;flex-direction:column;min-height:calc(100vh - 100px);min-height:calc(100dvh - 100px)}
.ya-profile-heading{border-top:1px solid #757871;padding-top:46px}.ya-profile-heading>p{font-size:11px;letter-spacing:.08em;color:var(--lime);margin-bottom:16px}.ya-profile-heading h2{font-family:Arial,sans-serif;font-weight:400;font-size:clamp(38px,5.5vw,80px);letter-spacing:-.06em;line-height:1.1;overflow-wrap:anywhere}.ya-profile-heading>span{display:block;margin-top:22px;font-size:18px;letter-spacing:.06em}
.ya-profile dl{margin-top:clamp(50px,8vh,90px)}.ya-profile dl>div{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:start;gap:20px;padding:24px 0;border-bottom:1px solid #767a71}.ya-profile dl>div:first-child{border-top:1px solid #767a71}.ya-profile dt{font-size:13px;color:#b5b9b0;letter-spacing:.06em}.ya-profile dd{font-size:clamp(16px,1.9vw,23px);font-weight:400;line-height:1.65;overflow-wrap:anywhere}
.ya-foot{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-top:auto;padding-top:70px}.ya-foot a{font-size:14px;padding-bottom:8px;border-bottom:1px solid var(--lime)}.ya-foot small{font-size:11px;color:#b5b9b0}
.ya-dialog{background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:36px;max-width:440px;width:calc(100% - 36px)}.ya-dialog::backdrop{background:rgba(23,33,27,.6)}.ya-dialog h2{font-size:34px;margin:0 0 20px}.ya-dialog p{font-size:15px;line-height:1.9}.ya-dialog button{background:var(--ink);color:var(--paper);border:0;padding:12px 25px;margin-top:15px}
@media(min-width:1650px){:root{--side:28%}}
@media(max-width:1060px) and (min-width:761px){.ya-sidebar{padding-top:32px}.ya-nav{margin-top:45px;gap:15px}.ya-opening h1{font-size:clamp(70px,9vw,105px)}.ya-profile dl>div{grid-template-columns:120px minmax(0,1fr)}}
@media(max-width:760px){
 :root{--side:0%}html{scroll-padding-top:86px}.ya-sidebar{inset:0 0 auto;width:100%;height:76px;padding:0 22px;flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid rgba(48,51,47,.15)}.ya-brand{font-size:31px}.ya-brand-caption,.ya-sidebar-bottom{display:none}.ya-menu-toggle{display:flex;margin-left:auto;border:0;background:none;align-items:center;gap:10px;font-size:11px;color:var(--ink);padding:10px 0 10px 20px}.ya-menu-toggle b{font-size:26px;font-weight:400;line-height:1}.ya-nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);margin:0;padding:30px 25px 40px;border-bottom:1px solid var(--ink);gap:20px}.ya-nav.is-open{display:grid}.ya-nav a{font-size:27px}
 .ya-main{margin-left:0;padding-top:76px}.ya-stage{inset:76px 0 0;height:calc(100vh - 76px);height:calc(100dvh - 76px)}.ya-video{object-position:50% 47%}
 .ya-opening{min-height:calc(100vh - 76px);min-height:calc(100dvh - 76px);padding:24px 23px 30px;background:linear-gradient(90deg,rgba(247,247,242,.35),rgba(247,247,242,.08))}.ya-opening-top{font-size:10px}.ya-opening h1{font-size:clamp(65px,18vw,110px);margin-top:clamp(25px,7vh,75px)}.ya-opening-bottom{align-items:flex-end}.ya-opening-bottom p{font-size:clamp(22px,5.7vw,31px);line-height:1.5}.ya-opening-bottom a{font-size:11px}
 .ya-section{min-height:100vh;min-height:100dvh;padding:100px 23px}.ya-index{font-size:11px;margin-bottom:22px}.ya-introduction{background:linear-gradient(90deg,rgba(247,247,242,.93),rgba(247,247,242,.85))}.ya-text-surface{width:100%;padding:26px 0}.ya-section h2{font-size:clamp(30px,7.3vw,42px);margin-bottom:30px}.ya-prose{font-size:clamp(16px,4.3vw,19px);line-height:2}.ya-prose p+p{margin-top:20px}.ya-thinking{background:rgba(36,40,36,.92);min-height:105vh;min-height:105dvh}.ya-thinking-inner{padding:30px 0}.ya-thinking h2{font-size:clamp(33px,8vw,48px);margin-bottom:30px}
 .ya-profile{padding:50px 23px 29px;min-height:calc(100vh - 76px);min-height:calc(100dvh - 76px)}.ya-profile-inner{min-height:calc(100vh - 155px);min-height:calc(100dvh - 155px)}.ya-profile-heading{padding-top:30px}.ya-profile-heading>span{font-size:15px;margin-top:16px}.ya-profile dl{margin-top:55px}.ya-profile dl>div{display:block;padding:18px 0}.ya-profile dt{font-size:12px;margin-bottom:7px}.ya-profile dd{font-size:clamp(16px,4.2vw,21px)}.ya-foot{padding-top:60px}.ya-foot small{font-size:10px}
}
@media(max-width:380px){.ya-opening-bottom{display:block}.ya-opening-bottom a{display:inline-block;margin-top:17px}.ya-profile-heading h2{font-size:37px}.ya-profile dd{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ya-nav a span:after{transition:none}}

/* Same restrained accents as the unified front page. */
.ya-underline{background:none;font-weight:600}
.ya-nav a.is-active span:after{height:2px;border-radius:0;transform:none;background:var(--ink)}

/* Use the same Japanese section-heading size in both About sections. */
.ya-thinking h2{font-size:clamp(30px,3.8vw,54px)}
@media(max-width:760px){.ya-thinking h2{font-size:clamp(30px,7.3vw,42px)}}

/* Stable mobile backdrop: svh keeps the full figure above Safari's controls.
   The slightly inset video leaves breathing room around the shoes. */
@media(max-width:760px){
 .ya-stage{inset:76px 0 auto;height:calc(100vh - 76px);height:calc(100svh - 76px)}
 .ya-video{position:absolute;inset:4%;width:92%;height:92%;object-position:50% 47%}
 .ya-opening{min-height:calc(100svh - 76px)}
 .ya-section{min-height:100svh}
 .ya-thinking{min-height:105svh}
 .ya-profile{min-height:calc(100svh - 76px)}
 .ya-profile-inner{min-height:calc(100svh - 155px)}
}

/* 2026-09-29 quiet-1：見出しの共通ルール（About / Price & Flow で共有）
   英語の見出しは小さめに、上に日本語の一言を括弧で添えます。 */
.yk-kicker{display:block;margin:0 0 10px 2px;font-size:12px;letter-spacing:.06em;line-height:1.6;color:#61655e}
.ya-opening .yk-kicker{margin-top:clamp(56px,12vh,125px)}
.ya-opening h1{font-size:var(--yk-page);letter-spacing:-.04em;line-height:1.1;margin-top:0}
.ya-profile-heading h2{font-size:var(--yk-section);letter-spacing:-.02em}
@media(max-width:1060px) and (min-width:761px){.ya-opening h1{font-size:var(--yk-page)}}
@media(max-width:760px){.ya-opening .yk-kicker{margin-top:clamp(25px,7vh,75px)}.ya-opening h1{font-size:44px}}

/* 2026-10-02：ロゴのyubisakiを一段細く（Arialは標準と太字の2段階のみ）。 */
.ya-brand{font-weight:400}

/* 2026-10-04 Aboutの冒頭アニメ：スマホでも左右と上の隙間を出さない（動画の端の色に背景をそろえる）。イラストの大きさは変えない。 */
.ya-stage,.ya-video{background:#dadad8}
/* 見出し上のカッコ書きを取った分、見出しの位置を保つ */
.ya-opening h1{margin-top:clamp(96px,22vh,230px)}
@media(max-width:760px){.ya-opening h1{margin-top:clamp(80px,19vh,170px)}}