:root{--paper:#fff;--ink:#202124;--muted:#4c5157;--line:#dedfe1;--accent:#923f2d;--dark:#202124;--s8:8px;--s16:16px;--s24:24px;--s32:32px;--s40:40px;--s48:48px;--s64:64px;--s80:80px;--s96:96px;--s128:128px;--gutter:var(--s48);--sans:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.8 var(--sans);overflow-wrap:anywhere;word-break:auto-phrase}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{line-height:1.4;font-weight:600;letter-spacing:-.018em;text-wrap:balance}
h2{font-size:clamp(28px,3vw,42px)}
h3{font-size:21px}
a{color:inherit;text-underline-offset:.26em}
button,input,select,textarea{font:inherit}
button,summary{cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{display:block;width:100%;height:auto}
.wrap{width:min(1248px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.skip,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto;z-index:5;background:white;padding:var(--s8)}
.header{min-height:var(--s80);display:flex;align-items:center;justify-content:space-between;gap:var(--s24);border-bottom:1px solid var(--line)}
.wordmark{font-size:15px;font-weight:600;line-height:1.45;text-decoration:none}
.header nav{display:flex;gap:var(--s32);font-size:14px}
.header nav a,.text-link{display:inline-flex;align-items:center;min-height:44px}
.header nav a{text-decoration:none}
.header nav a:hover,.text-link:hover{color:var(--accent)}
.nav-toggle{display:none}
.hero{padding-block:var(--s80) var(--s64)}
.category{font-size:14px;color:var(--muted)}
.hero h1{font-size:clamp(32px,4.6vw,62px);margin-top:var(--s8);letter-spacing:-.035em;text-wrap:initial}
.hero-meta{display:flex;align-items:center;gap:var(--s24) var(--s48);margin-top:var(--s16);flex-wrap:wrap}
.hero-meta p{font-size:17px;color:var(--muted)}
.hero-price{font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.hero-action{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s16);min-height:var(--s48);padding:var(--s8) var(--s16);background:var(--ink);color:#fff;text-decoration:none}
.hero-action:hover{background:#3a3d41}
.works{border-top:1px solid var(--line);padding-block:var(--s48) var(--s80)}
.work-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:var(--s16) var(--s48)}
.work-heading p,.work-scope{color:var(--muted);font-size:15px}
.work-index{display:flex;flex-wrap:wrap;gap:0 var(--s32);margin-block:var(--s24) var(--s48);border-block:1px solid var(--line)}
.work-index a{display:inline-flex;align-items:center;min-height:var(--s48);font-size:15px}
.project+.project{border-top:1px solid var(--line);margin-top:var(--s64);padding-top:var(--s48)}
.project-head{margin-bottom:var(--s24)}
.project-head h3{font-size:clamp(26px,3.4vw,48px);margin-top:var(--s8);scroll-margin-top:var(--s24);text-wrap:initial}
.project-views{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22%);grid-template-areas:"pc phone" "notes notes";gap:var(--s24) var(--s32);align-items:start}
.project-desktop{grid-area:pc}
.project-phone{grid-area:phone;align-self:end}
.project-notes{grid-area:notes}
.project-views img{outline:1px solid var(--line);outline-offset:-1px}
.project-views figcaption{font-size:14px;color:var(--muted);margin-top:var(--s8)}
.project-notes dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16) var(--s32);max-width:960px}
.project-notes dt{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:var(--s8)}
.project-notes .text-link{color:var(--accent);margin-top:var(--s8)}
.project.hiyori .project-head{margin-inline-start:calc(22% + var(--s32))}
.project.hiyori .project-views{grid-template-columns:minmax(0,22%) minmax(0,1fr);grid-template-areas:"phone pc" ". notes"}
.project.bakery .project-phone{align-self:start;margin-top:var(--s40)}
.work-scope{border-top:1px solid var(--line);padding-top:var(--s24);margin-top:var(--s40)}
.price-section{border-top:1px solid var(--line)}
.price-section{padding:80px 0}
.price-header{max-width:850px;margin-bottom:var(--s32)}
.rate{font-size:24px;line-height:1.4;margin:var(--s16) 0;color:var(--accent)}
.rate strong{font-size:clamp(36px,5vw,58px);font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.rate small{font-size:14px;color:var(--ink);margin-left:var(--s8)}
.scope{max-width:960px}
.scope>div{display:grid;grid-template-columns:minmax(132px,.48fr) 2fr;gap:var(--s24);padding:var(--s16) 0;border-top:1px solid var(--line)}
.scope>div:last-child{border-bottom:1px solid var(--line)}
.scope dt{font-weight:600}
.scope dd,.outside p{max-width:47em}
.outside{margin-top:var(--s32);color:var(--muted)}
.outside h3{font-size:17px;color:var(--ink);margin-bottom:var(--s8)}
.outside p+p{margin-top:var(--s8)}
.outside a{color:var(--ink)}
#flow{padding:var(--s48) 0;border-top:1px solid var(--line);}
.section-top .section-intro{margin-top:var(--s8);color:var(--muted)}
.flow-intro{color:var(--muted);margin-top:var(--s8)}
.flow-list{counter-reset:step;list-style:none;margin:var(--s32) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s24)}
.flow-list li{counter-increment:step;padding:var(--s16) 0 0;border-top:1px solid var(--line)}
.flow-list li::before{content:"0" counter(step);display:block;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:var(--s8);font-size:14px}
.flow-list h3{font-size:17px;margin-bottom:var(--s8)}
.flow-list p{font-size:15px;line-height:1.7}
.scope-details{max-width:960px;margin-top:var(--s16)}
.scope-details details{border-bottom:1px solid var(--line)}
.scope-details summary{padding:11px 0;color:var(--accent);font-weight:600}
.scope-details details p{max-width:48em;padding-bottom:var(--s8)}
.faq-section{padding:72px 0}
.faq-grid{max-width:910px}
.faq-grid .section-intro{margin:var(--s8) 0 var(--s24);color:var(--muted)}
.faqs details{border-top:1px solid var(--line)}
.faqs details:last-child{border-bottom:1px solid var(--line)}
.faqs summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s8);padding:14px 0;font-weight:600}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"＋";color:var(--accent)}
.faqs details[open] summary::after{content:"−"}
.faqs details p{padding:0 var(--s24) 14px 0;color:var(--muted)}
.contact-section{border-top:1px solid var(--ink);padding:var(--s48) 0 var(--s64)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s64)}
.contact-grid h2{font-size:clamp(26px,3vw,36px)}
.contact-copy,.draft-panel>p,.reception-status{margin-top:var(--s16)}
.reception-status,.form-hint{font-size:14px;color:var(--muted)}
.draft-panel label{display:block;margin:14px 0 var(--s8);font-size:14px;font-weight:600}
.draft-panel label span{color:var(--muted);font-weight:400}
.draft-panel :is(input,select,textarea){width:100%;border:1px solid #8b8a81;border-radius:0;background:#fff;color:var(--ink);padding:var(--s8) var(--s8)}
.draft-panel textarea{resize:vertical}
.button{background:var(--dark);color:#fff;border:1px solid var(--dark);padding:var(--s8) 15px;min-height:44px;margin-top:var(--s8)}
.button.outline{background:transparent;color:var(--ink)}
.draft-status:empty{display:none}
.footer{border-top:1px solid var(--line);padding:var(--s24) 0;color:var(--muted);font-size:14px}
.footer>.wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s8) var(--s24)}

@media(max-width:900px){:root{--gutter:var(--s32)}.flow-list{grid-template-columns:1fr;gap:0}.flow-list li{display:grid;grid-template-columns:var(--s32) 1fr;gap:0 var(--s8);padding:var(--s16) 0}.flow-list li::before{grid-row:1 / span 2}.flow-list h3,.flow-list p{grid-column:2}}
@media(max-width:700px){
:root{--gutter:var(--s16)}
.header{min-height:var(--s64);position:relative}.wordmark{font-size:14px}
.header nav{gap:var(--s8) var(--s16);flex-wrap:wrap}
.js .nav-toggle{display:block;min-height:44px;padding:var(--s8);color:var(--ink);background:#fff;border:1px solid var(--line);font-size:14px}
.js .header nav{display:none;position:absolute;z-index:2;inset:100% 0 auto;background:var(--paper);padding:var(--s8) var(--s16);border:1px solid var(--line)}
.js .header nav.open{display:grid}
.hero{padding-block:var(--s40)}.hero h1{font-size:clamp(28px,7.8vw,40px)}.hero-meta{gap:var(--s16)}.hero-meta p{font-size:16px}
.works{padding-block:var(--s32) var(--s48)}
.work-heading{grid-template-columns:1fr;gap:var(--s8)}
.work-index{gap:0 var(--s16);margin-block:var(--s16) var(--s32)}
.project-head{margin-bottom:var(--s16)}
.project.hiyori .project-head{margin-inline-start:0}
.project .project-views,.project.hiyori .project-views{grid-template-columns:minmax(0,1fr);grid-template-areas:"pc" "phone" "notes";gap:var(--s24) var(--s16)}
.project .project-phone,.project.bakery .project-phone{align-self:start;justify-self:center;width:min(100%,184px);margin-top:0}
.project-notes dl{grid-template-columns:1fr}
.project-notes dd{font-size:15px}
.project+.project{margin-top:var(--s40);padding-top:var(--s32)}

.price-section,.faq-section{padding:var(--s48) 0}.price-header{margin-bottom:var(--s16)}
.scope>div{display:block;padding:var(--s16) 0}.scope dt{margin-bottom:var(--s8)}
#flow{padding:var(--s32) 0}.flow-list{margin-top:var(--s24)}
.contact-section{padding:var(--s32) 0 var(--s48)}.contact-grid{grid-template-columns:minmax(0,1fr);gap:var(--s24)}
.footer>.wrap{display:grid}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Service strengths: two editorial rows, with the planned update service emphasized. */
.service-pr{border-top:1px solid var(--line);padding-block:var(--s64)}
.service-pr h2{max-inline-size:28em;text-wrap:pretty}
.pr-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:0 var(--s64);list-style:none;margin:var(--s32) 0 0;padding:0}
.pr-item{display:grid;grid-template-columns:var(--s64) minmax(0,1fr);align-content:start;gap:var(--s16);border-top:1px solid var(--line);padding-block:var(--s24)}
.pr-number{font-size:clamp(32px,4vw,56px);font-weight:400;line-height:1.05;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--muted)}
.pr-copy h3{font-size:clamp(18px,1.7vw,24px);font-weight:600;text-wrap:pretty}
.pr-copy h3+p{margin-top:var(--s8)}
.pr-copy p{max-inline-size:34em;text-wrap:pretty}
.pr-planned{border-top-color:var(--accent)}
.pr-planned .pr-number,.pr-copy .pr-status{color:var(--accent)}
.pr-copy .pr-status,.pr-copy .pr-note{font-size:14px}
.pr-copy .pr-status{font-weight:600;margin-bottom:var(--s8)}
.pr-copy .pr-note{margin-top:var(--s8);color:var(--muted)}
@media(max-width:900px){.pr-list{column-gap:var(--s32)}.pr-item{grid-template-columns:var(--s48) minmax(0,1fr)}}
@media(max-width:700px){
 .service-pr{padding-block:var(--s40)}
 .pr-list{grid-template-columns:1fr;margin-top:var(--s24)}
 .pr-item{gap:var(--s8);padding-block:var(--s16)}
 .pr-item:last-child{padding-bottom:0}
}

.pr-amount{white-space:nowrap}

.hero-description p + p, .pr-copy p + p, .scope dd p + p, .contact-copy + .contact-copy, .draft-panel > p + p { margin-top:var(--s8); }
.project-notes dd { text-wrap:pretty; }
.rate { white-space:nowrap; }
.scope-details ul { margin:0 0 var(--s8); padding-inline-start:var(--s24); }

.flow-list p + p { margin-top:var(--s8); }

/* Reading order for the service introduction and pricing. */
.hero {
  padding-block: var(--s64) var(--s80);
}
.hero h1 {
  font-size: clamp(32px, 4.4vw, 60px);
}
.hero-meta {
  display: grid;
  grid-template-columns: fit-content(42em) auto;
  align-items: end;
  gap: var(--s24) var(--s32);
  margin-top: var(--s32);
}
.hero-description p {
  max-inline-size: 42em;
  text-wrap: pretty;
}
.hero-description p + p {
  margin-top: var(--s16);
}
.hero-price {
  font-size: 1.2em;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero-action {
  justify-self: start;
  min-inline-size: 184px;
}

.pr-list {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 1040px;
}
.pr-item {
  grid-template-columns: var(--s64) minmax(0, 1fr);
  gap: var(--s24);
}
.pr-number {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.4;
}
.pr-copy {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr);
  column-gap: var(--s32);
}
.pr-copy h3 {
  grid-row: 1;
}
.pr-copy p {
  grid-column: 2;
  max-inline-size: none;
}
.pr-copy h3 + p {
  margin-top: 0;
}
.pr-item:last-child {
  border-bottom: 1px solid var(--line);
}

.price-header {
  max-inline-size: 1040px;
  margin-bottom: var(--s40);
}
.rate {
  display: flex;
  align-items: baseline;
  gap: var(--s8);
  flex-wrap: wrap;
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
}
.rate strong {
  letter-spacing: -.025em;
}
.rate small {
  margin-inline-start: 0;
  font-size: 16px;
}
.scope {
  max-inline-size: 1040px;
}
.scope-details {
  max-inline-size: 1040px;
  margin-top: var(--s32);
}
.scope-details details:first-child {
  border-top: 1px solid var(--line);
}
.scope-details details:last-child {
  margin-top: var(--s24);
  border-block: 1px solid var(--accent);
}
.scope-details summary {
  padding: var(--s16) 0;
}

#flow {
  padding-block: var(--s64);
}
.flow-list {
  column-gap: var(--s16);
  border-top: 1px solid var(--line);
}
.flow-list li {
  border-top: 0;
  padding: var(--s24) var(--s8) 0 0;
}
.flow-list li::before {
  font-size: 16px;
  line-height: 1.5;
}

.contact-grid {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.contact-copy:first-of-type {
  font-weight: 600;
}
.reception-status {
  margin-top: var(--s24);
  padding-top: var(--s16);
  border-top: 1px solid var(--line);
}
.draft-panel {
  border-top: 1px solid var(--line);
  padding-top: var(--s24);
}
.draft-panel form {
  margin-top: var(--s24);
}
.draft-panel label {
  margin-top: var(--s16);
}
.draft-panel .form-hint {
  margin-top: var(--s8);
}
#build-draft {
  background: var(--paper);
  color: var(--ink);
  padding-inline: var(--s16);
}
#build-draft:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
#draft-result {
  margin-top: var(--s24);
  padding-top: var(--s8);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .flow-list li {
    grid-template-columns: var(--s32) minmax(0, 1fr);
    padding: var(--s16) 0;
    border-bottom: 1px solid var(--line);
  }
  .flow-list li::before {
    grid-row: 1 / -1;
    margin: 0;
  }
}

@media (max-width: 700px) {
  .hero { padding-block: var(--s40) var(--s48); }
  .hero-meta { grid-template-columns: minmax(0, 1fr); margin-top: var(--s24); }
  .hero-action { justify-self: start; }
  .pr-item { grid-template-columns: var(--s32) minmax(0, 1fr); gap: var(--s8); }
  .pr-copy { display: block; }
  .pr-copy h3 + p { margin-top: var(--s8); }
  .pr-item:last-child { padding-bottom: var(--s16); }
  .price-header { margin-bottom: var(--s24); }
  #flow { padding-block: var(--s40); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s32); }
}