:root{--ink:#242426;--purple:#30243e;--paper:#f6f6f4;--line:#d8d8d7;--muted:#66646a;--pad:6vw}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #9b7cbe;outline-offset:7px}h1,h2,p,figure{margin:0}h1,h2{font-weight:300}p{font-size:16px;line-height:2.1}button{border:0}img{display:block;width:100%;height:100%;object-fit:cover}.skip-link{position:fixed;left:20px;top:-80px;z-index:100;background:white;padding:15px}.skip-link:focus{top:10px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:var(--paper);position:relative;z-index:10}.wordmark{font-size:35px;font-weight:300;letter-spacing:.035em;white-space:nowrap}.wordmark>span:first-child{display:inline-block;margin:0 .14em;color:#8c7a9a;font-weight:200}.company-name{display:block;font-size:10px;letter-spacing:.12em;margin-top:3px}.header nav{display:flex;align-items:center;gap:34px;font-size:13px}.header nav a{padding:12px 0}.header nav a:hover{color:#7c598b}.header nav .nav-contact{border:1px solid #89838e;padding:12px 30px}.menu-toggle{display:none}.hero{position:relative;background:var(--ink);color:#fff;min-height:760px;height:calc(100svh - 100px);max-height:1100px;padding:35px var(--pad) 28px;overflow:hidden}.hero-topline,.hero-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.13em}.hero-topline span:last-child{letter-spacing:.12em}.hero-photo{position:absolute;top:103px;right:0;width:58%;height:calc(100% - 190px)}.hero-photo:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}.hero-photo img{object-position:center;filter:saturate(.64)}figcaption{font-size:10px;letter-spacing:.07em}.hero-photo figcaption{position:absolute;right:22px;bottom:14px;z-index:1;color:white;text-shadow:0 1px 4px #000}.hero-content{position:relative;z-index:2;padding-top:63px;pointer-events:none}.hero-content h1{font-size:clamp(40px,4.7vw,76px);line-height:1.65;letter-spacing:.07em;text-shadow:0 2px 22px #24242680}.lead{font-size:14px;line-height:2.2;max-width:650px;margin-top:32px;text-shadow:0 2px 10px #000}.hero-cta{display:flex;align-items:center;gap:22px;margin-top:30px;font-size:13px;pointer-events:auto}.button{min-height:55px;padding:18px 32px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:.06em;transition:background .2s,color .2s;border:1px solid transparent}.button.light{background:var(--paper);color:var(--ink)}.button.light:hover{background:#ddd7e4}.button.dark{background:var(--purple);color:white}.button.dark:hover{background:#4b3b5b}.hero-bottom{position:absolute;bottom:24px;left:var(--pad);right:var(--pad);align-items:center}.replay{background:none;color:#ddd;padding:9px 0;font-size:11px;letter-spacing:.04em}.replay span{font-size:18px;margin-left:10px}.scroll-link{font-size:10px;display:flex;gap:20px;align-items:center}.section{padding:100px var(--pad) 120px;scroll-margin-top:20px}.section-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.1em;padding-bottom:25px;border-bottom:1px solid var(--line)}.section-label span:last-child{font-size:12px;letter-spacing:.06em}.approach{padding-top:75px;padding-bottom:130px}.approach-content{padding:84px 0 0 19%}.approach h2{font-size:clamp(24px,2.7vw,40px);line-height:1.95;letter-spacing:.04em}.approach em{font-style:normal;color:#5d426f;display:inline-block;margin-top:12px}.approach-content>p{margin-top:35px;font-size:15px}.approach-note{display:flex;gap:40px;align-items:center;margin-top:50px}.small-slash{font-weight:200;font-size:110px;color:#aa9bb5;line-height:1}.approach-note p{font-size:14px}.services{background:var(--purple);color:#f7f6f8}.services .section-label{border-color:#63576f}.services-heading{display:flex;justify-content:space-between;align-items:end;margin:66px 0}.services h2,.about h2,.contact h2{font-size:clamp(32px,3.6vw,54px);line-height:1.65;letter-spacing:.055em}.services-heading p{font-size:14px;color:#ded8e5;padding-bottom:8px}.service-list{border-top:1px solid #6c6176}.service-list details{border-bottom:1px solid #6c6176}summary{list-style:none;display:flex;align-items:center;cursor:pointer;padding:29px 0}summary::-webkit-details-marker{display:none}.service-no{font-size:12px;width:9%;color:#c9bfd2}.service-title{font-size:clamp(18px,2vw,28px);letter-spacing:.03em}.service-title small{font-size:10px;letter-spacing:.12em;display:block;margin-top:12px;color:#c9bfd2}.toggle{position:relative;width:24px;height:24px;margin-left:auto}.toggle:before,.toggle:after{content:"";position:absolute;background:#d7cedf;left:3px;right:3px;top:11px;height:1px}.toggle:after{transform:rotate(90deg);transition:transform .2s}details[open] .toggle:after{transform:rotate(0)}.service-body{padding:0 7% 30px 9%;display:grid;grid-template-columns:1.2fr 1fr;gap:10%}.service-body p{font-size:14px;color:#e2dce8}.service-body ul{list-style:none;padding:0;margin:0;font-size:12px;line-height:2.3;color:#e2dce8}.service-body li:before{content:"—";margin-right:12px;color:#ad9abb}.about{background:#eeefed}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:11%;margin-top:75px;align-items:center}.work-photo{height:600px}.work-photo img{height:calc(100% - 30px);filter:saturate(.58);object-position:center}.work-photo figcaption{padding-top:12px;color:#666}.eyebrow{font-size:12px;letter-spacing:.12em;margin-bottom:23px}.about-copy>p:not(.eyebrow){font-size:14px;margin-top:26px}.company-info{font-size:12px;border-top:1px solid #c7c8c6;margin:36px 0 0}.company-info>div{display:grid;grid-template-columns:75px 1fr;gap:15px;border-bottom:1px solid #c7c8c6;padding:17px 0;line-height:1.8}.company-info dd{margin:0}.company-info dt{color:#646268}.contact{background:#ded9e4;padding-top:70px;padding-bottom:95px}.contact .section-label{border-color:#b9afc4}.contact-main{display:flex;justify-content:space-between;gap:30px;margin-top:60px;align-items:center}.contact-action{min-width:300px}.contact-action>p:first-child{font-size:14px;margin-bottom:12px}.contact-action .button{width:100%}.contact-sub{font-size:12px;line-height:1.9;margin-top:20px}footer{background:var(--ink);color:#eee;padding:55px var(--pad);display:flex;align-items:center;gap:60px}footer p{font-size:12px}.footer-mark{font-size:42px}.copyright{margin-left:auto;font-size:10px;letter-spacing:.1em}.consult-dialog{padding:60px;max-width:560px;width:calc(100% - 36px);border:0;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#17141dcc}.dialog-close{position:absolute;right:15px;top:10px;background:none;font-size:32px;padding:4px 12px}.consult-dialog h2{font-size:27px;margin-bottom:24px}.consult-dialog>p{font-size:14px}.draft-notice{padding:20px;background:#e5e0eb;margin:25px 0}.draft-notice strong{font-size:12px;font-weight:500}.draft-notice p{font-size:13px;margin-top:10px}.opening{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;margin:0;border:0;background:var(--ink);color:white;overflow:hidden}.opening-stage{position:absolute;inset:0}.opening-left,.opening-right{position:absolute;top:0;bottom:0;width:50%;background:var(--ink)}.opening-left{left:0}.opening-right{right:0;background:#f6f6f4}.opening-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.16em;font-family:"Helvetica Neue",Arial,sans-serif;font-size:clamp(62px,12vw,180px);font-weight:200;letter-spacing:.035em}.and,.or,.slash{display:inline-block}.and{transform:translateX(-12vw);opacity:0;color:white}.or{transform:translateX(12vw);opacity:0;color:var(--ink)}.slash{opacity:0;color:#b39dc6;font-weight:200}.opening-copy{position:absolute;top:64%;left:20px;right:20px;text-align:center;font-size:clamp(14px,1.5vw,20px);letter-spacing:.15em;opacity:0}.opening-skip{position:absolute;bottom:42px;right:5vw;padding:12px 0;background:none;color:var(--ink);font-size:12px;letter-spacing:.15em}.opening-skip span{font-size:10px;margin-left:16px}.opening-note{position:absolute;bottom:54px;left:5vw;font-size:10px;letter-spacing:.15em}.opening.playing .and{animation:and-in 2.4s cubic-bezier(.22,.68,.18,1) forwards}.opening.playing .or{animation:or-in 2.4s cubic-bezier(.22,.68,.18,1) forwards}.opening.playing .opening-right{animation:background-in 2.4s ease forwards}.opening.playing .slash{animation:fade-in .7s 2.2s forwards}.opening.playing .opening-copy{animation:fade-in .9s 2.8s forwards}.opening.playing .opening-skip{animation:skip-color 2.4s forwards}@keyframes and-in{0%{opacity:0;transform:translateX(-12vw)}30%{opacity:1;transform:translateX(-12vw)}100%{opacity:1;transform:translateX(0)}}@keyframes or-in{0%{opacity:0;transform:translateX(12vw);color:#242426}30%{opacity:1;transform:translateX(12vw);color:#242426}79.9%{color:#242426}80%,100%{opacity:1;transform:translateX(0);color:white}}@keyframes background-in{0%,79.9%{background:#f6f6f4}80%,100%{background:#242426}}@keyframes skip-color{0%,79.9%{color:#242426}80%,100%{color:white}}@keyframes fade-in{to{opacity:1}}.opening.playing .or{animation-name:or-in}.reveal{opacity:1}.motion-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}.motion-ready .reveal.visible{opacity:1;transform:none}
@media(min-width:1600px){:root{--pad:8vw}.hero-content{padding-top:8vh}}
@media(max-width:1000px){.header nav{gap:20px}.hero{min-height:770px}.hero-content h1{font-size:52px}.hero-photo{width:62%}.lead{max-width:540px;font-size:13px}.approach-content{padding-left:10%}.about-grid{gap:7%}.work-photo{height:570px}.service-body{gap:6%}}
@media(max-width:700px){:root{--pad:7vw}.header{height:80px}.wordmark{font-size:28px}.company-name{font-size:9px}.menu-toggle{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.08em;background:none;padding:12px 0}.menu-lines{width:22px;height:10px;border-top:1px solid;border-bottom:1px solid}.header nav{display:none;position:absolute;left:0;right:0;top:80px;background:var(--paper);padding:20px var(--pad) 32px;box-shadow:0 15px 20px #0001}.header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:10px}.header nav a{font-size:14px;padding:12px 0}.header nav .nav-contact{text-align:center;margin-top:10px}.hero{height:auto;min-height:880px;padding-top:25px}.hero-topline{font-size:9px;letter-spacing:.07em}.hero-topline span:last-child{display:none}.hero-photo{top:108px;width:80%;height:380px}.hero-photo:after{background:#0004}.hero-content{padding-top:77px}.hero-content h1{font-size:clamp(32px,8.7vw,52px);line-height:1.7;letter-spacing:.03em}.lead{font-size:13px;line-height:2.15;margin-top:90px;max-width:none}.hero-cta{align-items:flex-start;flex-direction:column;gap:12px;margin-top:23px}.hero-cta .button{min-width:230px}.hero-bottom{bottom:22px}.scroll-link{font-size:8px;gap:5px}.replay{font-size:10px}.section{padding-top:60px;padding-bottom:70px}.section-label{font-size:9px;letter-spacing:.05em;padding-bottom:20px}.section-label span:last-child{font-size:10px}.approach-content{padding:48px 0 0}.approach h2{font-size:clamp(18px,4.65vw,29px);line-height:2.1;letter-spacing:0}.approach-content>p{font-size:14px;margin-top:26px}.approach-note{gap:25px;margin-top:35px}.approach-note p{font-size:13px}.small-slash{font-size:90px}.services-heading{display:block;margin:38px 0}.services h2,.about h2,.contact h2{font-size:32px}.services-heading p{font-size:13px;margin-top:25px}.service-title{font-size:17px;letter-spacing:0}.service-no{width:28px;font-size:10px}.service-title small{font-size:9px;margin-top:10px}.service-body{display:block;padding:0 0 24px 28px}.service-body p{font-size:13px}.service-body ul{margin-top:15px;font-size:11px}.toggle{width:18px;flex-shrink:0;margin-left:auto}summary{padding:25px 0}.about-grid{display:flex;flex-direction:column;gap:45px;margin-top:40px}.work-photo{height:400px;width:100%}.about-copy{width:100%}.about-copy>p:not(.eyebrow){font-size:14px}.about h2 br:last-child{display:none}.contact-main{display:block;margin-top:35px}.contact-action{margin-top:30px;min-width:0}.contact-action .button{max-width:380px}footer{display:grid;grid-template-columns:1fr;gap:22px;padding:45px var(--pad)}.copyright{margin-left:0;margin-top:10px}.footer-mark{font-size:40px}.consult-dialog{padding:44px 24px 30px}.consult-dialog h2{font-size:24px}.opening-copy{top:60%;font-size:13px;letter-spacing:.08em}.opening-word{font-size:18vw;gap:.08em}.opening-skip{bottom:25px}.opening-note{bottom:37px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}.motion-ready .reveal{opacity:1;transform:none}.opening.playing .and,.opening.playing .or{animation:none;opacity:1;transform:none;color:white}.opening.playing .opening-right{animation:none;background:var(--ink)}.opening.playing .slash,.opening.playing .opening-copy{animation:none;opacity:1}.opening.playing .opening-skip{animation:none;color:white}}
/* 初版の表示確認で調整：小画面では説明文を写真の下へ。 */
@media(max-width:700px){.lead{margin-top:210px;font-size:14px}.contact h2{font-size:clamp(24px,7.1vw,32px)}.about h2 br:last-child{display:initial}}

/* Approved revision: light palette and overlapping-to-separated opening only. */
:root{--ink:#29292D;--purple:#554A78;--paper:#E9EAED;--bright:#F7F7F8;--line:#CDD0D6;--muted:#62636B}
.header,.approach,.about,.consult-dialog{background:var(--bright)}
.hero,.services,.contact,footer{background:var(--paper);color:var(--ink)}
.wordmark>span:first-child,.header nav a:hover,.approach em,.small-slash,.service-no,.service-title small,.service-body li:before{color:var(--purple)}
.header nav .nav-contact,.services .section-label,.service-list,.service-list details,.company-info,.company-info>div,.contact .section-label{border-color:var(--line)}
.services-heading p,.service-body p,.service-body ul{color:var(--ink)}
.replay,.work-photo figcaption,.company-info dt{color:var(--muted)}
.toggle:before,.toggle:after{background:var(--purple)}
.hero-content h1,.lead{color:var(--ink);text-shadow:none}
.hero-photo:after{background:rgba(233,234,237,.74)}
.hero-photo figcaption{color:var(--ink);text-shadow:none}
.button.light{background:var(--purple);color:var(--bright)}
.button.light:hover,.button.dark:hover{background:#443B60}
.draft-notice{background:var(--paper)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--purple)}
.opening{background:var(--paper);color:var(--ink)}
.opening-left,.opening-right{display:none}
.opening-word{gap:.18em;letter-spacing:.075em;line-height:1.2}
.opening-word .and,.opening-word .or{opacity:1;color:var(--ink);transform:translateX(var(--overlap-x,0px))}
.opening-word .or{color:var(--purple)}
.opening-word .slash{color:var(--purple);opacity:0}
.opening.playing .and,.opening.playing .or{animation:separate-words 2s 1s cubic-bezier(.65,0,.35,1) forwards}
.opening.playing .slash{animation:fade-in .8s 3s both}
.opening.playing .opening-copy{animation:fade-in 1.2s 3.8s both}
.opening.playing .opening-skip{animation:none;color:var(--ink)}
.opening-copy{color:var(--ink)}
@keyframes separate-words{from{transform:translateX(var(--overlap-x,0px))}to{transform:translateX(0)}}
@media(max-width:700px){.header nav{background:var(--bright)}.opening-word{font-size:17vw;gap:.18em}.opening-copy{top:64%}}
@media(prefers-reduced-motion:reduce){.opening.playing .and,.opening.playing .or{animation:none;transform:none}.opening.playing .slash,.opening.playing .opening-copy{animation:none;opacity:1}}