@charset "UTF-8";
.brand:has(.brand-image){display:block;position:relative;width:190px;aspect-ratio:1350/455;flex-shrink:0;overflow:hidden;mix-blend-mode:multiply}
.brand .brand-image{position:absolute;display:block;width:134.444%;max-width:none;height:auto;left:-17.407%;top:-46.154%}
@media(max-width:600px){.header .brand:has(.brand-image){width:128px}.footer .brand:has(.brand-image){width:175px}}
:root{--bg:#edf3f8;--paper:#fff;--ink:#172c3e;--muted:#415264;--blue:#075ed0;--pale:#c9ddec;--line:#c8d5df;--deep:#143244;--wrap:1280px;--gutter:clamp(24px,5.4vw,88px);--sans:"Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;--latin:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}p,li,dd,dt,h1,h2,h3,summary{word-break:auto-phrase}p,li,dd{text-wrap:pretty}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:500;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,label,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button{border:0}a,button,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:6px}h1,h2,h3,p{margin:0}p{font-size:1rem;line-height:2}button{color:inherit}::selection{background:var(--blue);color:white}[hidden]{display:none!important}.skip{position:fixed;top:8px;left:8px;z-index:100;background:white;padding:12px;transform:translateY(-150%)}.skip:focus{transform:none}
.header{position:relative;z-index:20;display:flex;align-items:center;gap:32px;min-height:106px;padding:22px var(--gutter);border-bottom:1px solid rgba(23,44,62,.1)}.brand{font-family:var(--latin);font-size:2.15rem;letter-spacing:-.07em;font-weight:800;white-space:nowrap}.brand span{font-weight:600}.brand .brand-dot{color:var(--blue)}.desktop-nav{margin-left:auto;display:flex;gap:28px;font-size:.84rem;font-weight:700}.desktop-nav a{padding:10px 0;transition:color .2s}.desktop-nav a:hover{color:var(--blue)}.header-contact{display:flex;align-items:center;gap:28px;font-size:.85rem;font-weight:700;background:var(--blue);color:white;padding:16px 20px}.header-contact span{font-size:1.2rem}.header-contact:hover{background:#004cae}.menu-toggle{display:none}.mobile-nav{position:absolute;top:100%;left:0;right:0;padding:24px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 22px #17384b12}.mobile-nav a{display:block;padding:17px 8px;border-bottom:1px solid var(--line);font-weight:700}
.hero{position:relative;overflow:hidden;padding:26px var(--gutter) 0;isolation:isolate}.hero-topline{display:flex;justify-content:space-between;gap:24px;font:11px/1.5 var(--latin);letter-spacing:.1em;color:var(--muted)}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;max-width:var(--wrap);margin:auto;min-height:628px}.hero-copy{position:relative;z-index:2;padding:46px 0 58px}.eyebrow{color:var(--blue);font-size:.82rem;line-height:1.6;letter-spacing:.04em;font-weight:700}.hero h1{margin:26px 0 24px;font-size:clamp(44px,4.55vw,72px);line-height:1.42;letter-spacing:.015em;font-weight:700}.hero h1 span{color:var(--blue)}.hero-description{font-size:.95rem;line-height:2}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:44px;padding:20px 25px;font-size:.9rem;font-weight:700;min-height:60px;transition:background .2s,transform .2s}.button span{font-size:1.3rem;line-height:1}.primary{background:var(--blue);color:white}.primary:hover{background:#004cae}.hero .button{margin-top:30px}.hero-identity{position:relative;align-self:stretch;min-height:560px;margin-right:-25px;isolation:isolate}.identity-grid{position:absolute;inset:60px -5% 52px -4%;background-image:linear-gradient(#bdcfdd45 1px,transparent 1px),linear-gradient(90deg,#bdcfdd45 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse,#000 25%,transparent 70%)}.identity-type{position:absolute;font:800 clamp(360px,39vw,610px)/1 var(--latin);letter-spacing:-.12em;user-select:none;top:20px;left:0}.identity-back{color:transparent;-webkit-text-stroke:1px #8cb3d0;transform:translate(-24px,26px)}.identity-front{color:var(--blue);text-shadow:0 22px 50px #1764b211;animation:identity-arrive 1.3s cubic-bezier(.2,.7,.2,1) both}.identity-caption{position:absolute;right:2%;bottom:86px;font:700 13px/1.5 var(--latin);letter-spacing:.02em;color:var(--blue)}.identity-index{position:absolute;left:14%;bottom:60px;font:11px var(--latin);letter-spacing:.09em}.identity-cross{position:absolute;font:24px var(--latin);color:#8fa9bc}.cross-one{top:62px;right:10%}.cross-two{bottom:70px;left:-4%}.hero-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:23px 0;max-width:var(--wrap);margin:auto}.hero-bottom p{font-size:.86rem;letter-spacing:.07em}.hero-bottom a{font:10px var(--latin);letter-spacing:.08em;padding:12px 0}.hero-bottom a span{margin-left:30px;font-size:17px}@keyframes identity-arrive{from{opacity:.3;transform:translate(30px,-18px)}to{opacity:1;transform:translate(0,0)}}
.section-wrap{padding:104px var(--gutter);max-width:1600px;margin:auto}
/* 2カラムのセクションで、左の見出しを読みながら右の本文をスクロールできるようにする。
   使い方: 2カラムのグリッド要素に .sticky-label を付け、その直下に .section-label を置く。
   追従はPC幅のみ。縦に積む狭い画面では意味がないため無効化する。 */
@media(min-width:1000px){.sticky-label>.section-label{position:sticky;top:150px;align-self:start}}.section-label h2{font:400 clamp(36px,4.4vw,64px)/1.04 var(--latin);letter-spacing:-.05em;margin-top:15px}.section-label h2 span{color:var(--blue)}.section-label .text-link{margin-top:35px}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;border-bottom:1px solid var(--ink);padding:10px 0;font-size:.85rem;font-weight:700}.text-link:hover{color:var(--blue);border-color:var(--blue)}.text-link span{font:23px var(--latin)}.news{display:grid;grid-template-columns:1fr 2fr;gap:60px;padding-top:70px;padding-bottom:80px;border-bottom:1px solid var(--line)}.news-row{display:grid;grid-template-columns:52px 98px 1fr 20px;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding:22px 0;min-height:92px}.news-row:first-child{padding-top:10px}.news-date{font-size:.8rem;color:var(--muted)}.tag{display:inline-block;background:#e1eaf3;font-size:.7rem;padding:6px 8px;text-align:center}.tag:empty{background:transparent}.news-row h3{font-size:.9rem;line-height:1.7;font-weight:600}.row-arrow{font:24px var(--latin);color:var(--blue)}.news-row:hover h3{color:var(--blue)}.sample-note{font-size:.75rem;color:var(--muted);line-height:1.8;margin-top:18px}.about{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;padding-top:125px;padding-bottom:125px}.section-number{display:block;font:11px var(--latin);letter-spacing:.1em;color:var(--muted);margin-top:60px}.about-copy>h2{font-size:clamp(27px,2.65vw,42px);line-height:1.8;font-weight:600;letter-spacing:.035em;margin-top:-12px;margin-bottom:28px}.about-copy>p{line-height:2.4;margin-top:20px}.name-story{display:flex;gap:35px;align-items:center;margin-top:45px;padding-top:30px;border-top:1px solid var(--line)}.story-mark{font:700 66px var(--latin);letter-spacing:-.07em;color:var(--blue)}.name-story p{font-size:.82rem;line-height:2}.name-story strong{font:600 15px var(--latin);letter-spacing:.02em}.service{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;background:#fff;padding-top:100px;padding-bottom:75px}.section-label .section-intro{margin-top:35px;font-size:1.1rem;line-height:2}.section-intro{font-size:1.03rem;line-height:2}.service-row{display:grid;grid-template-columns:40px 1fr;gap:22px;align-items:start;border-top:1px solid var(--line);padding:30px 0}.service-number{font:13px var(--latin);color:var(--blue);padding-top:7px}.service-row h3{margin-bottom:10px;font-size:1.2rem;line-height:1.75;letter-spacing:.03em;font-weight:600}.service-row p{font-size:.88rem;line-height:2}.service-meta{display:block;font-size:.72rem;color:var(--muted);margin-top:15px}.scope-note{font-size:.77rem;color:var(--muted);border-top:1px solid var(--line);padding-top:22px}.scope-button{margin-top:20px}.works{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;padding-top:115px;padding-bottom:115px}.sample-description{margin-top:40px}.sample-preview{--sample-main:#193d54;--sample-bg:#f4f6f5;--sample-line:#c5d0d3;background:#dfe7ed;padding:27px 30px 35px;box-shadow:0 10px 45px #223a5009}.sample-preview[data-theme=green]{--sample-main:#315d51;--sample-bg:#f3f5ed;--sample-line:#c3cec0}.sample-chrome{display:flex;justify-content:space-between;color:var(--muted);font:9px var(--latin);letter-spacing:.1em;margin-bottom:17px}.sample-chrome span:last-child{font-family:var(--sans);letter-spacing:0;font-size:10px}.sample-page{background:var(--sample-bg);color:var(--sample-main);box-shadow:0 10px 30px #263e5110;transition:background .3s,color .3s}.sample-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--sample-line);padding:21px 25px;font:11px Georgia,serif}.sample-header span:last-child{font:8px var(--latin);letter-spacing:.07em}.sample-body{padding:42px 30px 30px}.sample-kicker{font-size:10px}.sample-body h3{font-family:"Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;font-weight:500;font-size:clamp(20px,2.1vw,33px);line-height:1.9;margin:22px 0 24px;letter-spacing:.06em}.sample-body p{font-size:11px;line-height:2.1}.sample-rule{width:45px;height:1px;background:var(--sample-main);margin:28px 0}.sample-bottom{font:8px var(--latin);letter-spacing:.2em}.sample-description .section-number{margin-top:0}.sample-description h3{font-size:clamp(23px,2.2vw,34px);font-weight:600;line-height:1.8;margin:22px 0}.sample-description>p:not(.sample-note){font-size:.9rem;line-height:2.1}.theme-picker{padding:0;border:0;margin:26px 0 0;display:flex;gap:20px}.theme-picker legend{font-size:.75rem;color:var(--muted);margin-bottom:13px}.theme-picker label{display:flex;align-items:center;gap:9px;cursor:pointer;min-height:44px;font-size:.8rem;position:relative}.theme-picker input{accent-color:var(--blue);width:16px;height:16px;margin:0}.swatch{width:17px;height:17px;border-radius:50%}.swatch-navy{background:#193d54}.swatch-green{background:#315d51}.process{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;border-top:1px solid var(--line);padding-top:95px;padding-bottom:70px}.process-lead{font-size:1.1rem;margin-top:35px;line-height:2}.process-list{list-style:none;padding:0;margin:0}.process-list li{display:grid;grid-template-columns:40px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line)}.process-list li:first-child{padding-top:0}.process-list li>span{font:13px var(--latin);color:var(--blue);padding-top:7px}.process-list h3{font-size:1.1rem;font-weight:600;margin-bottom:9px}.process-list p{font-size:.88rem;line-height:2}.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;padding-top:30px;padding-bottom:105px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;list-style:none;font-size:.95rem;line-height:1.8;padding:25px 0}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font:24px var(--latin);color:var(--blue);transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{font-size:.88rem;line-height:2;padding:0 25px 26px 0}.contact{position:relative;isolation:isolate;overflow:hidden;background:var(--blue);color:white;padding:88px var(--gutter) 78px}.contact-inner{position:relative;z-index:2;max-width:var(--wrap);margin:auto}.contact .eyebrow{color:#dceafb}.contact h2{font-size:clamp(35px,4.1vw,61px);font-weight:500;line-height:1.65;letter-spacing:.025em;margin:22px 0}.contact p:not(.eyebrow){font-size:.93rem;line-height:2}.contact-button{background:white;color:var(--blue);margin-top:30px;min-width:300px}.contact-button:hover{background:#e5f1ff}.contact .contact-note{font-size:.7rem;margin-top:16px;color:#e2edfc}.contact-type{position:absolute;right:5%;top:45px;font:600 clamp(140px,18vw,275px)/.95 var(--latin);letter-spacing:-.07em;color:#ffffff12;pointer-events:none}.footer{display:flex;justify-content:space-between;gap:35px;padding:50px var(--gutter);background:#fff;align-items:center}.footer p{font-size:.73rem;margin-top:10px}.footer-right{display:flex;flex-wrap:wrap;justify-content:end;gap:22px;font-size:.75rem;align-items:center}.footer-right>span{font-family:var(--latin);font-size:11px}.article-main{max-width:1000px;padding:70px var(--gutter) 100px;margin:auto;min-height:60vh}.article-main h1{font-size:clamp(26px,4vw,45px);line-height:1.65;margin:25px 0 35px}.article-main .article-body{background:white;padding:35px;margin:30px 0}.article-body p+p{margin-top:20px}.article-main .news-row{grid-template-columns:60px 98px 1fr 20px}.article-main .text-link{margin-top:30px}.legal-list{margin:40px 0 0}.legal-list>div{display:grid;grid-template-columns:200px 1fr;gap:28px;border-top:1px solid var(--line);padding:24px 0}.legal-list dt{font-size:.85rem;font-weight:700;line-height:1.9}.legal-list dd{margin:0;font-size:.92rem;line-height:2.1}.legal-list dd a{border-bottom:1px solid var(--line)}.legal-list dd a:hover{color:var(--blue);border-color:var(--blue)}@media(max-width:600px){.legal-list>div{display:block;padding:20px 0}.legal-list dt{margin-bottom:10px;font-size:.8rem;color:var(--muted)}.legal-list dd{font-size:.88rem}}
@media(min-width:1600px){.hero-identity{margin-right:0}.identity-type{font-size:610px}.hero-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.desktop-nav{gap:18px;font-size:.75rem}.header{gap:20px}.header-contact{gap:20px;padding:14px}.hero-grid{min-height:560px}.hero-identity{min-height:500px}.identity-type{top:65px}.identity-caption{bottom:110px}.news{gap:35px;grid-template-columns:.8fr 2fr}.news-row{grid-template-columns:45px 83px 1fr 18px;gap:12px}.service{gap:35px;grid-template-columns:1fr 1.5fr}.service-row{gap:18px;grid-template-columns:30px 1fr}.sample-preview{padding:20px}.about,.works,.process,.faq{grid-template-columns:1fr 1.5fr;gap:35px}}
@media(max-width:820px){.header{min-height:86px;padding-top:18px;padding-bottom:18px}.brand{font-size:1.85rem}.desktop-nav{display:none}.header-contact{margin-left:auto;font-size:.75rem;padding:12px 15px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:10px;background:transparent}.menu-toggle span{display:block;height:1px;background:var(--ink);width:24px;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.hero-topline{font-size:9px}.hero-grid{grid-template-columns:1.15fr .85fr;min-height:530px}.hero h1{font-size:43px}.hero-description{font-size:.8rem}.hero-identity{min-height:450px;margin-right:-30px}.identity-type{font-size:330px;top:90px;left:-12px}.identity-caption{bottom:55px;right:0;font-size:10px}.identity-index{display:none}.cross-two{bottom:30px}.hero .button{font-size:.8rem;gap:30px;padding:18px 22px}.section-wrap{padding-top:75px;padding-bottom:75px}.news{padding-top:55px;padding-bottom:55px}.section-label h2{font-size:40px}.news-row{grid-template-columns:45px 1fr 18px;gap:10px}.news-row .tag{display:none}.article-main .news-row{grid-template-columns:60px 1fr 20px}.about-copy>h2{font-size:27px}.about-copy>p{font-size:.9rem}.name-story{gap:20px}.story-mark{font-size:52px}.name-story p{font-size:.75rem}.section-intro{font-size:.88rem}.service-row h3{font-size:1.13rem}.service-row p{font-size:.82rem}.sample-description h3{font-size:23px}.sample-description>p:not(.sample-note){font-size:.8rem}.sample-header{padding:16px}.sample-body{padding:25px 20px}.sample-body h3{font-size:23px}.sample-chrome span:last-child{display:none}.sample-header span:last-child{display:none}.process,.faq{grid-template-columns:1fr 1.5fr}.process-lead{font-size:.95rem}.footer{align-items:start}.footer-right{max-width:260px}}
@media(max-width:600px){html{scroll-padding-top:24px}.header{gap:10px;min-height:80px}.header-contact{padding:10px 12px;font-size:.68rem;gap:15px}.hero{padding-top:18px}.hero-grid{display:block;min-height:0;position:relative}.hero-copy{padding:40px 0 30px}.eyebrow{font-size:.75rem}.hero h1{font-size:clamp(37px,10vw,54px);line-height:1.48;letter-spacing:0;margin-top:21px;margin-bottom:22px}.hero-description{font-size:.85rem}.hero-identity{position:absolute;right:-34px;top:90px;min-height:0;height:280px;width:190px;z-index:-1;opacity:.12;margin:0}.identity-type{font-size:285px;left:0;top:0}.identity-grid{inset:0;background-size:28px 28px}.identity-back{transform:translate(-10px,13px)}.identity-caption,.identity-cross,.identity-index{display:none}.hero .button{margin-top:26px;min-height:57px;padding:17px 22px}.hero-bottom{padding:18px 0}.hero-bottom p{font-size:.66rem;letter-spacing:0}.hero-bottom a{font-size:8px}.hero-bottom a span{margin-left:10px}.section-wrap{padding-top:60px;padding-bottom:60px}.news{display:block;padding-top:43px;padding-bottom:40px}.section-label h2{font-size:40px;margin-top:11px}.news .section-label{position:relative;margin-bottom:23px}.news .section-label .text-link{position:absolute;right:0;bottom:2px;font-size:.68rem;gap:12px;margin:0}.text-link span{font-size:19px}.news-row{grid-template-columns:40px 1fr 17px;min-height:78px;padding:18px 0;gap:12px}.news-row h3{font-size:.8rem}.news-date{font-size:.7rem}.sample-note{font-size:.68rem}.about{display:block}.about .section-number{margin-top:20px;font-size:10px}.about-copy{margin-top:35px}.about-copy>h2{font-size:27px;line-height:1.8}.about-copy>p{font-size:.9rem;line-height:2.2}.desktop-break{display:none}.name-story{margin-top:30px;padding-top:25px}.name-story p{font-size:.74rem}.section-intro{margin-top:24px;font-size:.9rem}.section-label h2 br{display:none}.service .section-label h2{font-size:37px;line-height:1.15;max-width:310px}.service .section-label h2 br:after{content:" "}.service{display:block}.service-row{grid-template-columns:25px 1fr;gap:12px 16px;padding:28px 0}.service-row h3{font-size:1.1rem}.service-row p{font-size:.88rem}.service-meta{font-size:.67rem}.scope-note{font-size:.72rem;line-height:1.9}.works .section-label h2{font-size:39px;line-height:1.1}.works .section-label h2 br{display:block}.works{display:block}.works-body{margin-top:32px}.sample-preview{padding:19px}.sample-body{padding:30px 25px}.sample-body h3{font-size:24px}.sample-description{margin-top:30px}.sample-description h3{font-size:24px;margin:18px 0 15px}.sample-description>p:not(.sample-note){font-size:.9rem}.theme-picker{margin-top:18px}.process{display:block}.process-lead{margin-top:20px}.process-list{margin-top:32px}.process-list h3{font-size:1rem}.process-list p{font-size:.85rem}.process-list li{grid-template-columns:25px 1fr;gap:16px}.faq{display:block;padding-top:5px}.faq-list{margin-top:24px}.faq-list summary{font-size:.85rem;padding:23px 0}.faq-list details p{font-size:.85rem;padding-right:0}.contact{padding-top:57px;padding-bottom:50px}.contact h2{font-size:36px;margin-top:20px}.contact p:not(.eyebrow){font-size:.85rem}.contact-type{font-size:130px;right:-15px;top:70px}.contact-button{min-width:0;width:100%;max-width:340px}.contact .contact-note{font-size:.66rem;max-width:300px}.footer{display:block;padding-top:37px;padding-bottom:35px}.footer-right{justify-content:start;max-width:none;margin-top:30px;gap:19px}.article-main{padding-top:42px}.article-main .article-body{padding:24px}.article-body p{font-size:.9rem}}
/* Primary reading content stays at a comfortable size for professional readers. */
.hero-description,.about-copy>p,.service-row p,.sample-description>p:not(.sample-note),.process-list p,.faq-list details p,.contact p:not(.eyebrow):not(.contact-note),.article-body p{font-size:1rem}
.news-row h3{font-size:.95rem}.service-meta,.scope-note,.sample-note,.theme-picker legend,.contact .contact-note{font-size:.81rem}
@media(max-width:600px){.sample-body h3{font-size:20px;letter-spacing:.025em}}
.hero-grid{grid-template-columns:1fr 1.25fr;min-height:600px;gap:12px}.hero h1{font-size:clamp(30px,2.85vw,46px);line-height:1.8;letter-spacing:0}.hero-illustration{margin:0 -35px 0 -5px;min-width:0;align-self:center}.hero-illustration img{display:block;width:100%;height:auto;mix-blend-mode:multiply;animation:illustration-arrive .9s ease-out both}@keyframes illustration-arrive{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.hero-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}.hero-copy{padding:38px 0 15px}.hero h1{font-size:38px;line-height:1.7}.hero-illustration{margin:0 auto 20px;max-width:650px;width:100%}}
@media(max-width:600px){.hero h1{font-size:clamp(25px,7.2vw,33px);line-height:1.8}.hero-copy{padding:32px 0 5px}.hero-illustration{margin:10px -12px 17px;max-width:none;width:calc(100% + 24px)}.hero .button{margin-top:22px}.hero-description{font-size:.95rem}}
/* Hero v3: full-bleed architectural illustration, protected HTML copy. */
.hero{background:#e7f0f5;min-height:760px;padding-top:26px}.hero-grid{display:block;min-height:650px;position:relative}.hero-copy{padding-top:112px;max-width:760px}.hero h1{font-size:clamp(34px,3.7vw,58px);line-height:1.7}.hero-illustration{position:absolute;inset:0;z-index:-2;margin:0;width:100%;height:100%;max-width:none}.hero-illustration img{width:100%;height:100%;object-fit:cover;object-position:center center;mix-blend-mode:normal;animation:none}.hero-grid{position:static}.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(239,246,250,.97) 0%,rgba(239,246,250,.89) 30%,rgba(239,246,250,.4) 52%,rgba(239,246,250,0) 72%)}.hero-topline,.hero-bottom{position:relative;z-index:2}.hero-bottom{border-color:#a7becd}.hero-bottom p,.hero-bottom a{color:#172c3e}.hero-description{max-width:440px}.hero .eyebrow{color:#0755b6}
@media(max-width:900px){.hero{min-height:800px}.hero-grid{min-height:695px}.hero-copy{padding-top:74px;max-width:650px}.hero h1{font-size:36px}.hero-illustration{position:absolute;inset:0;margin:0;width:100%;height:100%}.hero-illustration img{object-position:63% center}.hero::after{background:linear-gradient(180deg,rgba(239,246,250,.95) 0%,rgba(239,246,250,.9) 35%,rgba(239,246,250,.1) 67%,rgba(239,246,250,.15) 100%)}}
@media(max-width:600px){.hero{min-height:770px}.hero-grid{min-height:665px}.hero-copy{padding-top:48px;padding-bottom:0}.hero h1{font-size:clamp(25px,7.2vw,33px);line-height:1.85}.hero-illustration{margin:0;width:100%;height:100%}.hero-illustration img{object-position:70% bottom}.hero::after{background:linear-gradient(180deg,rgba(239,246,250,.98) 0%,rgba(239,246,250,.95) 32%,rgba(239,246,250,.72) 48%,rgba(239,246,250,.02) 73%,rgba(239,246,250,.5) 100%)}.hero-bottom{background:#edf3f8b8}.hero-description{font-size:.95rem}.hero .button{margin-top:24px}}
/* Keep the approved consultation scene visible in a narrow portrait crop. */
@media(max-width:600px){.hero-illustration img{object-position:96% bottom}}
/* Pricing plans — page extension built from the approved tokens and section rhythm. */
.pricing-main{max-width:1400px;padding:70px var(--gutter) 100px;margin:auto}.pricing-main h1{font-size:clamp(26px,3.4vw,45px);line-height:1.7;font-weight:600;letter-spacing:.02em;margin:25px 0 30px}.pricing-lead{max-width:680px;line-height:2.2}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px;align-items:stretch}.plan{position:relative;display:flex;flex-direction:column;background:var(--paper);padding:36px 32px 34px;border-top:3px solid var(--line)}.plan-latin{font:11px var(--latin);letter-spacing:.12em;color:var(--muted)}.plan-name{font-size:1.3rem;font-weight:600;letter-spacing:.03em;margin-top:12px;line-height:1.5}
/* Reserve two lines so the price rows stay aligned across cards of a comparison. */
@media(min-width:821px){.plan-name{min-height:3em}.plan-feature{min-height:3.8em}.plan-delta{min-height:7.8rem}
}.plan-feature{font-size:.85rem;line-height:1.9;color:var(--muted);margin-top:12px}
.plan-tax{margin:-8px 0 0;padding-bottom:4px;text-align:right;font-size:.75rem;color:var(--muted)}
.plan-price{border-top:1px solid var(--line);margin-top:26px;padding-top:10px}.plan-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0}.plan-price-row>span{font-size:.78rem;color:var(--muted)}.plan-amount{font:700 clamp(25px,2.2vw,32px)/1.2 var(--latin);letter-spacing:-.02em}.plan-amount span{font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:0;margin-left:3px}
/* Says what this plan adds over the cheaper one, so the price gap is legible. */
.plan-delta{margin-top:20px;padding:13px 15px;background:#e7eff8;border-left:2px solid var(--blue);font-size:.83rem;line-height:1.85}.plan-delta strong{display:block;font-weight:700;color:var(--blue);font-size:.72rem;letter-spacing:.04em;margin-bottom:3px}
.plan-list{margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}.plan-list>div{padding:14px 0;border-bottom:1px solid #e3ebf2}.plan-list>div:last-child{border-bottom:0;padding-bottom:0}.plan-list dt{font-size:.75rem;letter-spacing:.02em;color:var(--muted)}.plan-list dd{display:flex;gap:9px;margin:7px 0 0;font-size:.9rem;line-height:1.85}.plan-value{min-width:0}.plan-value strong{display:block;font-weight:700}.plan-value strong.plan-inline{display:inline;color:var(--blue)}.plan-value ul{margin:7px 0 0;padding-left:1.2em}.plan-value li{margin-top:2px}.plan-exclude{display:block;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);color:var(--muted)}.plan-exclude strong{font-size:.85em;letter-spacing:.02em}.plan-mark{flex:none;color:var(--blue);font-weight:700}.plan-mark-off{color:#8195a6}
.pricing-main .sample-note{max-width:820px;margin-top:40px}.pricing-main .text-link{margin-top:32px}
/* Renewal / new-build switch. CSS only, so the panels stay readable without JS. */
.plan-switch{margin:30px 0 0;padding:0;border:0}.plan-switch legend{margin-bottom:12px;padding:0;font-size:.78rem;color:var(--muted)}.switch-options{display:flex;flex-wrap:wrap;gap:10px}
.plan-switch label{display:flex;flex-direction:column;gap:3px;min-height:64px;padding:15px 22px;background:linear-gradient(#fff,#f0f5fa);border:1px solid #b6c8d8;border-radius:8px;box-shadow:0 4px 0 #b6c8d8,0 7px 14px #172c3e14,inset 0 1px 0 #fff;font-size:.92rem;font-weight:700;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s,color .16s}
.plan-switch label small{display:block;margin-top:4px;font-size:.72rem;font-weight:500;color:var(--muted)}
.plan-switch input{position:absolute;width:1px;height:1px;opacity:0}
.plan-switch label:has(input:checked){background:linear-gradient(#126bdc,#0756bf);border-color:#064caa;color:#fff;box-shadow:0 3px 0 #033b87,0 6px 12px #075ed029,inset 0 1px 0 #ffffff40}.plan-switch label:has(input:checked) small{color:#e9f2ff}
@media(hover:hover){.plan-switch label:hover{transform:translateY(-2px);box-shadow:0 6px 0 #a7bfd3,0 10px 18px #172c3e1c,inset 0 1px 0 #fff}.plan-switch label:has(input:checked):hover{box-shadow:0 5px 0 #033b87,0 9px 16px #075ed033,inset 0 1px 0 #ffffff40}}
.plan-switch label:active{transform:translateY(3px);box-shadow:0 1px 0 #9cb5ca,inset 0 2px 4px #172c3e18}
.plan-switch label:has(input:checked):active{box-shadow:0 1px 0 #033b87,inset 0 2px 5px #00275e33}
.plan-switch label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.plan-panel>.plan-grid{margin-top:48px}
@supports selector(:has(*)){.pricing-step:has(.plan-switch input[value="new"]:checked) .plan-panel[data-panel="renew"],.pricing-step:has(.plan-switch input[value="renew"]:checked) .plan-panel[data-panel="new"]{display:none}}
.pricing-step{margin-top:70px}.step-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px;padding-top:28px;border-top:1px solid var(--line)}.step-number{font:12px var(--latin);font-weight:700;letter-spacing:.12em;color:var(--blue)}.step-label h2{font-size:clamp(21px,2.3vw,29px);font-weight:600;letter-spacing:.03em}.step-label>p{font-size:.78rem;color:var(--muted)}.step-intro{margin-top:16px;max-width:780px;font-size:.95rem;line-height:2.1}
.step-common{margin-top:26px;padding:24px 28px;background:var(--paper);border-left:3px solid var(--blue)}.step-common h3{margin-bottom:10px;font-size:.88rem;font-weight:700;letter-spacing:.02em}.step-common ul{margin:0;padding-left:1.3em}.step-common li{margin-top:5px;font-size:.88rem;line-height:2}.step-common li strong{font-weight:700}.common-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.8rem;line-height:1.95;color:var(--muted)}
.policy-list{margin-top:14px}.policy-list article{padding:26px 0;border-top:1px solid var(--line)}.policy-list h3{margin-bottom:10px;font-size:1.05rem;font-weight:600;letter-spacing:.02em;line-height:1.7}.policy-list p{max-width:840px;font-size:.95rem;line-height:2.1}
.plan-list dd strong{font-weight:700}
@media(max-width:600px){.pricing-step{margin-top:52px}.step-intro{font-size:.9rem}.step-common{padding:20px 18px}.policy-list h3{font-size:1rem}.policy-list p{font-size:.9rem}}
@media(max-width:1100px){.plan-grid{gap:18px}.plan{padding:30px 24px 28px}}
@media(max-width:820px){.plan-grid{grid-template-columns:1fr;gap:22px;margin-top:42px}.plan{padding:32px 26px 30px}}
@media(max-width:600px){.pricing-main{padding-top:42px}.pricing-main h1{font-size:clamp(24px,6.6vw,32px);margin-bottom:24px}.pricing-lead{font-size:.95rem;line-height:2.1}.plan-name{font-size:1.2rem}}
.pricing-terms{max-width:680px;margin-top:18px;font-size:.8rem;line-height:1.9;color:var(--muted)}
/* Owner profile — page extension using the approved tokens and the process-list rhythm. */
.profile-meta{margin:0;padding-top:26px;border-top:1px solid var(--line)}.profile-meta>div{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}.profile-meta dt{font-size:.75rem;color:var(--muted);padding-top:4px}.profile-meta dd{margin:0;font-size:1rem;font-weight:600;letter-spacing:.03em}.profile-meta dd a{border-bottom:1px solid var(--blue);color:var(--blue)}.profile-meta dd a:hover{border-color:transparent}
.profile-points{margin-top:22px}.profile-points article{display:grid;grid-template-columns:40px 1fr;gap:22px;padding:30px 0;border-bottom:1px solid var(--line)}.profile-number{font:13px var(--latin);color:var(--blue);padding-top:9px}.profile-points h2{font-size:1.15rem;font-weight:600;letter-spacing:.03em;margin-bottom:12px}.profile-points p{font-size:1rem;line-height:2.1}
.profile-closing{margin-top:36px;line-height:2.2}
@media(max-width:600px){.pricing-terms{font-size:.78rem}.profile-meta>div{grid-template-columns:1fr;gap:6px}.profile-points article{grid-template-columns:25px 1fr;gap:16px;padding:24px 0}.profile-points h2{font-size:1.05rem}.profile-points p{font-size:.95rem}.profile-closing{font-size:.95rem}}
/* Consultation form — ported from the earlier Astro version into the approved static design language. */
.contact-lead{margin-bottom:8px;line-height:2.2}
.contact-direct{margin:30px 0 0;padding-top:26px;border-top:1px solid var(--line)}.contact-direct>div{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}.contact-direct dt{font-size:.75rem;color:var(--muted);padding-top:4px}.contact-direct dd{margin:0;font-size:1rem;font-weight:600;letter-spacing:.03em}.contact-direct a{border-bottom:1px solid var(--blue);color:var(--blue)}.contact-direct a:hover{border-color:transparent}
.contact-form{display:flex;flex-direction:column;gap:26px;background:var(--paper);padding:40px;margin-top:34px}.contact-form label{display:flex;flex-direction:column;gap:10px}.field-name{font-size:.8rem;font-weight:700;letter-spacing:.03em}.field-name .required{margin-left:9px;font-size:.68rem;font-weight:700;color:var(--blue)}
.contact-form input,.contact-form textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:15px 16px}.contact-form textarea{min-height:170px;line-height:1.9;resize:vertical}.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.contact-form .button{align-self:flex-start;min-width:260px;margin-top:4px}
/* Privacy policy — long-form legal copy on the article layout. */
.policy-intro{line-height:2.2;max-width:760px}.policy-section{margin-top:38px}.policy-section h2{padding-top:26px;border-top:1px solid var(--line);margin-bottom:14px;font-size:1.15rem;font-weight:600;letter-spacing:.03em}.policy-section p{line-height:2.1;max-width:760px}.policy-section p+p{margin-top:16px}.policy-section ul{margin:14px 0 0;padding-left:1.3em}.policy-section li{margin-top:6px;font-size:1rem;line-height:2.1}.policy-section a{border-bottom:1px solid var(--blue);color:var(--blue)}
.policy-scroll{overflow-x:auto;margin:18px 0}.policy-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}.policy-table th,.policy-table td{border-bottom:1px solid var(--line);padding:14px 12px;text-align:left;line-height:1.9;vertical-align:top}.policy-table th{font-size:.75rem;font-weight:700;color:var(--muted);white-space:nowrap}
.policy-date{margin-top:44px;font-size:.8rem;color:var(--muted)}
.form-consent{font-size:.78rem;line-height:1.9;color:var(--muted);margin-top:-6px}.form-consent a{border-bottom:1px solid var(--blue);color:var(--blue)}
.form-status{margin-top:2px;font-size:.85rem;line-height:1.9}.form-status:empty{display:none}.form-status[data-state=pending]{color:var(--muted)}.form-status[data-state=success]{color:var(--blue);font-weight:700}.form-status[data-state=error]{color:#b3261e;font-weight:700}
/* Turnstile renders a ~300px widget, so the panel must stay wider than that on phones. */
.cf-turnstile{max-width:100%}
@media(max-width:600px){.contact-direct>div{grid-template-columns:1fr;gap:6px}.contact-form{padding:26px 16px;gap:22px}.contact-form .button{min-width:0;width:100%}.contact-lead{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* nav-6items: ナビが6項目になり、821〜920pxで2行に折り返すため詰める。820px以下はハンバーガーへ切り替わる。 */
@media(min-width:821px) and (max-width:920px){.desktop-nav{gap:12px;font-size:.7rem}.header{gap:16px}.header-contact{gap:14px;padding:12px 14px;font-size:.72rem}}

/* article-body: 記事本文。microCMSのリッチエディタ出力に対する指定。
   ここを変えるとお知らせとコラムの両方に効く。 */
.article-body>*:first-child{margin-top:0}
.article-body>*:last-child{margin-bottom:0}
.article-body h2{margin:44px 0 16px;font-size:1.35rem;line-height:1.75;letter-spacing:.03em;font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--line)}
.article-body h3{margin:34px 0 12px;font-size:1.13rem;line-height:1.75;letter-spacing:.03em;font-weight:600}
.article-body h4{margin:26px 0 10px;font-size:1rem;line-height:1.75;font-weight:600}
.article-body p{line-height:2.1;margin:18px 0}
.article-body ul,.article-body ol{margin:18px 0;padding-left:1.4em}
.article-body li{line-height:2.1;margin:6px 0}
.article-body li::marker{color:var(--blue)}
.article-body blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--pale);color:var(--muted)}
.article-body blockquote p{margin:8px 0}
.article-body a{color:var(--blue);border-bottom:1px solid var(--pale)}
.article-body a:hover{border-color:var(--blue)}
.article-body strong{font-weight:700}
.article-body img{display:block;max-width:100%;height:auto;margin:26px 0}
.article-body figure{margin:26px 0}
.article-body figcaption{margin-top:10px;font-size:.78rem;color:var(--muted);line-height:1.9}
.article-body hr{margin:36px 0;border:0;border-top:1px solid var(--line)}
.article-body code{background:var(--bg);padding:2px 6px;font-size:.88em;border-radius:3px}
.article-body pre{margin:24px 0;padding:18px;background:var(--bg);overflow-x:auto}
.article-body pre code{background:none;padding:0}
/* 表は狭い画面で横スクロールさせる。潰して読めなくしない。 */
.article-body table{display:block;overflow-x:auto;width:100%;margin:24px 0;border-collapse:collapse;font-size:.9rem;white-space:nowrap}
.article-body th,.article-body td{border:1px solid var(--line);padding:12px 16px;text-align:left}
.article-body th{background:var(--bg);font-weight:700}
@media(max-width:600px){
.article-body h2{margin-top:34px;font-size:1.2rem}
.article-body h3{margin-top:26px;font-size:1.05rem}
.article-body p{line-height:2}
.article-body li{line-height:2}
.article-body table{font-size:.82rem}
.article-body th,.article-body td{padding:10px 12px}
}

/* 制作サンプル（works-body の中身）。デザインの型を架空の事務所で組んだページへのカード。
   画像は各ページのファーストビューの縮小（/assets/works-<slug>-v3.webp・960x600）。 */
.works-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:56px 36px}
.works-item{display:block}
.works-thumb{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 30px #263e5110;transition:transform .35s,box-shadow .35s}
.works-item:hover .works-thumb{transform:translateY(-4px);box-shadow:0 16px 40px #263e511c}
.works-number{display:block;margin-top:24px;font:13px var(--latin);color:var(--blue)}
.works-item h3{margin:8px 0 10px;font-size:1.1rem;line-height:1.7;font-weight:600;letter-spacing:.03em}
.works-item p{margin:0;font-size:.85rem;line-height:2}
.works-name{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding:10px 0;border-bottom:1px solid var(--ink);font-size:.8rem;font-weight:700}
.works-name span{font:20px var(--latin)}
.works-item:hover .works-name{color:var(--blue);border-color:var(--blue)}
.works-note{margin:48px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:.77rem;line-height:1.9;color:var(--muted)}
@media(max-width:600px){.works-list{grid-template-columns:1fr;gap:44px}.works-number{margin-top:18px}.works-item h3{font-size:1rem}.works-note{margin-top:36px;font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.works-thumb{transition:none}.works-item:hover .works-thumb{transform:none}}
/* line: 公式LINEへの導線。緑はLINEの規定色で、LINEのボタン以外には使わない。QRはスマホでは読めないのでPCのみ。 */
.line-button{background:#06c755;color:#fff}.line-button:hover{background:#05a847}
.contact .line-button{margin-left:14px}
.contact-direct .line-button{color:#fff;border-bottom:0}.contact-line{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.contact-line .button{margin-top:0}
.line-qr-wrap{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}.line-qr{display:block;width:112px;height:112px;box-sizing:content-box;padding:8px;background:#fff;border:3px solid #06c755;border-radius:10px}
.line-qr-wrap figcaption{font-size:.75rem;font-weight:400;color:var(--muted);letter-spacing:0}
@media(max-width:820px){.line-qr-wrap{display:none}}
@media(max-width:600px){.contact .line-button{margin-left:0;min-width:0;width:100%;max-width:340px;margin-top:14px}.contact-line .button{width:100%}}