@charset "UTF-8";

@font-face{font-family:"NotoJP";src:url("../fonts/noto-sans-jp-550.woff2") format("woff2");
  font-weight:100 600;font-style:normal;font-display:swap}
@font-face{font-family:"NotoJP";src:url("../fonts/noto-sans-jp-700.woff2") format("woff2");
  font-weight:601 900;font-style:normal;font-display:swap}
@font-face{font-family:"JosefinSans";src:url("../fonts/josefin-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:"ZenOldMincho";src:url("../fonts/zen-old-mincho-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:"ZenOldMinchoB";src:url("../fonts/zen-old-mincho-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{

  --usu:#FBEFC8;
  --kami:#FBFBF9;
  --usu-l:#FDF6DF;
  --soji:#E7E1CF;
  --oka:#F2BE1E;
  --gunjo:#FAC302;
  --gunjo-d:#E8AF00;
  --ki-line:linear-gradient(transparent 62%,#FAC302 62%);
  --sumi:#2E343D;
  --hai:#4F5863;
  --sen:#E3D3A2;
  --sen-h:#D8D2BE;
  --maku:#171C22;
  --maku-a:.66;

  --tex:none;
  --tex-size:135px 135px;

  --ls-body:.08em;
  --ls-head:.09em;

  --sec-y:clamp(64px,8vw,120px);
  --frames:13;

  --dur:1s;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background-color:var(--kami);background-image:var(--tex);
  background-size:var(--tex-size);color:var(--sumi);
  font-family:"NotoJP",-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-weight:500;font-size:17px;line-height:2;letter-spacing:var(--ls-body);
  font-feature-settings:"palt";
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sumi)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--sumi);outline-offset:2px}
.hero a:focus-visible{outline-color:#fff}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

.sec-h2,.hero-h1,.lead-lg,.tel-box-num,.ft-logo{
  font-family:"ZenOldMincho",serif;font-weight:400;letter-spacing:var(--ls-head)}
.reason-h3,.svc-h3,.flow-h3{
  font-family:"NotoJP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;font-weight:700;letter-spacing:var(--ls-head)}

.deco{font-family:"JosefinSans","NotoJP",sans-serif;letter-spacing:.02em}

.sec-h2{position:relative;display:inline-block;padding:0 .45em;
  --paint-w:9.6em;--paint-h:5.4em;

  margin-top:clamp(10px,2vw,26px)}
.sec-h2::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:var(--paint-w);height:var(--paint-h);

  left:calc(.45em - 1.305em - var(--paint-w) * .013);
  top:50%;
  transform:translateY(calc(-50% - .043em));
  background:url(../img/deco/h2-paint.svg) center / contain no-repeat}

#craft .sec-h2::before{content:none}

#craft .sec-h2{margin-top:0}
@media (max-width:900px){
  .sec-h2{--paint-w:8.2em;--paint-h:4.61em}
}

.hd{position:sticky;top:0;z-index:60;background:transparent;
  --hd-flat:131.5px;
  --hd-dip:calc(var(--hd-flat) * .25);
  --hd-logo-h:56px;

  --ico:32px;

  height:calc(var(--hd-flat) - var(--hd-dip));
  transition:height .2s ease-out}

.hd-plate{position:absolute;left:0;right:0;top:0;height:var(--hd-flat);
  background:var(--kami);pointer-events:none;
  clip-path:polygon(0 0, 100% 0,
    100% calc(100% - var(--hd-dip)), 50% 100%, 0 calc(100% - var(--hd-dip)));
  transition:height .2s ease-out,clip-path .2s ease-out}

.hd-in{max-width:1160px;margin:0 auto;padding:0 20px;height:var(--hd-flat);
  position:relative;transition:height .2s ease-out}

.hd-logo{position:absolute;left:50%;transform:translateX(-50%);top:22px;
  text-decoration:none;color:inherit;line-height:1;text-align:center;
  display:block;transition:top .2s ease-out}

.hd-logo-sub{display:block;font-size:14px;font-weight:700;letter-spacing:.1em;
  line-height:1;color:#000;margin:0 0 18px;

  text-indent:.1em;
  transition:opacity .2s ease-out,height .2s ease-out,margin .2s ease-out}
.hd-logo-img{display:block;height:var(--hd-logo-h);width:auto;margin:0 auto;
  transition:height .2s ease-out}

.hd-nav{display:flex;align-items:flex-start;height:100%;padding-top:30px}
.hd-side{flex:1 1 0;min-width:0;display:flex;justify-content:space-evenly;align-items:flex-start}
.hd-gap{flex:0 0 auto;width:250px}
.hd-nav a{display:flex;flex-direction:column;align-items:center;
  color:var(--sumi);text-decoration:none;font-size:14px;letter-spacing:.1em;
  padding:0 8px;text-align:center}
.hd-ln{display:block;border-bottom:2px solid transparent;transition:border-color .2s ease-out}
.hd-nav a:hover .hd-ln{border-bottom-color:var(--gunjo);border-bottom-width:3px}

.hd-ico{display:block;width:var(--ico);height:var(--ico);margin-bottom:7.5px;
  --ico-k:1;
  background-color:currentColor;
  -webkit-mask:var(--ico-src) center / calc(100% * var(--ico-k)) no-repeat;
          mask:var(--ico-src) center / calc(100% * var(--ico-k)) no-repeat;
  flex:0 0 auto;
  transition:height .4s ease-out,margin-bottom .4s ease-out,opacity .4s ease-out}
.hd-ico[data-ico="works"]  { --ico-src:url(../img/ico/ico-works.svg);   --ico-k:.93 }
.hd-ico[data-ico="service"]{ --ico-src:url(../img/ico/ico-service.svg); --ico-k:1 }
.hd-ico[data-ico="area"]   { --ico-src:url(../img/ico/ico-area.svg);    --ico-k:.95 }
.hd-ico[data-ico="flow"]   { --ico-src:url(../img/ico/ico-flow.svg);    --ico-k:1.03 }
.hd-ico[data-ico="faq"]    { --ico-src:url(../img/ico/ico-faq.svg);     --ico-k:1.05 }
.hd-ico[data-ico="company"]{ --ico-src:url(../img/ico/ico-company.svg); --ico-k:.99 }
.hd-ico[data-ico="contact"]{ --ico-src:url(../img/ico/ico-contact.png); --ico-k:1 }

.hd-burger{display:none;position:absolute;right:12px;
  top:calc((var(--hd-flat) - var(--hd-dip)) / 2);transform:translateY(-50%);
  width:44px;height:44px;
  padding:0;border:0;background:transparent;cursor:pointer;z-index:2}
.hd-burger-bar{position:absolute;left:10px;width:24px;height:2px;border-radius:2px;
  background:var(--sumi);transition:transform .4s ease-out,opacity .4s ease-out}
.hd-burger-bar:nth-child(1){top:15px}
.hd-burger-bar:nth-child(2){top:21px}
.hd-burger-bar:nth-child(3){top:27px}
.hd-burger[aria-expanded="true"] .hd-burger-bar:nth-child(1){transform:translateY(6px) rotate(-35deg)}
.hd-burger[aria-expanded="true"] .hd-burger-bar:nth-child(2){opacity:0}
.hd-burger[aria-expanded="true"] .hd-burger-bar:nth-child(3){transform:translateY(-6px) rotate(35deg)}
.hd-burger:focus-visible{outline:2px solid var(--sumi);outline-offset:2px}

.hd-drawer{position:fixed;inset:0;z-index:80;
  background-color:var(--kami);background-image:var(--tex);background-size:var(--tex-size);

  background-blend-mode:soft-light;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease-out,visibility 0s linear .2s}
.hd-drawer.is-open{opacity:1;visibility:visible;transition:opacity .2s ease-out,visibility 0s}

.hd-drawer-in{display:flex;flex-direction:column;justify-content:flex-start;
  height:100%;padding:84px 10% 32px;gap:2px;overflow-y:auto}

.hd-drawer-in > a{display:flex;align-items:center;gap:16px;
  padding:14px 8px;
  color:var(--sumi);text-decoration:none;font-size:17px;letter-spacing:.12em;
  border-bottom:1px solid var(--sen)}

.hd-drawer-in > a:last-of-type{border-bottom:0}
.hd-drawer-in a:focus-visible{outline:2px solid var(--sumi);outline-offset:2px}

.hd-drawer-in > a .hd-ico{width:22px;height:22px;margin-bottom:0}

.hd-drawer-info{margin-top:24px;padding-top:20px;text-align:center;
  font-size:14px;line-height:1.9;color:var(--sumi);letter-spacing:.06em}
.hd-drawer-info dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hd-drawer-info .di-name{display:block;font-size:16px;letter-spacing:.14em;margin-bottom:.4em}
.hd-drawer-info dd{margin:0}

.hd-drawer-info a{display:inline-block;padding:8px 20px;
  color:var(--sumi);text-decoration:none;font-size:17px;letter-spacing:.04em}
.hd-drawer-info .di-sub{color:var(--hai);font-size:14px}

body.is-locked{overflow:hidden}

body.is-locked .hd{z-index:90}

.hd.is-fixed{--hd-flat:85px;--hd-logo-h:48px}
.hd.is-fixed .hd-logo{top:16px}
.hd.is-fixed .hd-logo-sub{opacity:0;height:0;margin:0;overflow:hidden}
.hd.is-fixed .hd-ico{height:0;margin-bottom:0;opacity:0}
.hd.is-fixed .hd-nav{padding-top:32px}

@media (prefers-reduced-motion:reduce){
  .hd,.hd-plate,.hd-in,.hd-logo,.hd-logo-sub,.hd-logo-img,.hd-ico,
  .hd-burger-bar,.hd-drawer{
    transition-duration:0s}

  .hero-kicker{animation:none;opacity:.9;transform:none}
}

@media (max-width:1100px){
  .hd-gap{width:230px}
  .hd-nav a{padding:0 4px;font-size:14px}
}

@media (max-width:900px){
  .hd{--hd-flat:104px;--hd-logo-h:56px}
  .hd.is-fixed{--hd-flat:76px;--hd-logo-h:44px}
  .hd-nav{display:none}
  .hd-burger{display:block}
  .hd-logo{top:18px}
  .hd.is-fixed .hd-logo{top:14px}
}

@media (max-width:767.98px){
  .hd{--hd-flat:74px;--hd-logo-h:44px}
  .hd.is-fixed{--hd-flat:60px;--hd-logo-h:36px}
  .hd-logo-sub{display:none}
  .hd-logo{top:14px}
  .hd.is-fixed .hd-logo{top:12px}
}

.hero{position:relative;min-height:min(88svh,760px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--maku)}
.hero-photo{position:absolute;inset:0;z-index:0}

.hero-slides{overflow:hidden}
.hero-slide{position:absolute;inset:0;background-position:center 30%;
  background-size:cover;background-repeat:no-repeat;z-index:0}
.hero-slide.is-on{z-index:1}
.hero-in{position:relative;z-index:2;max-width:1000px;margin:0 auto;width:100%;
  padding:0 20px clamp(48px,7vw,90px)}

.hero-in::before{content:"";position:absolute;left:-50vw;right:-50vw;top:-260px;bottom:-200px;
  background:linear-gradient(180deg,rgba(23,28,34,0) 0,rgba(23,28,34,var(--maku-a)) 200px,rgba(23,28,34,var(--maku-a)) 100%);
  z-index:-1}

.hero-kicker{color:#fff;font-size:clamp(22px,3.5vw,32px);line-height:1;margin:0 0 .1em;
  opacity:0;transform:translateY(6px);
  animation:kicker-in .4s ease-out .2s forwards}
@keyframes kicker-in{to{opacity:.9;transform:none}}
.hero-h1{color:#fff;font-size:clamp(26px,4.8vw,42px);line-height:1.4;margin:0 0 .5em;font-weight:400}
.hero-lead{color:#fff;opacity:.95;margin:0 0 1.6em;font-size:clamp(15px,2.2vw,18px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-note{color:#fff;opacity:.85;font-size:14px;margin:1.2em 0 0;letter-spacing:.06em}

.btn{display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;text-align:center;letter-spacing:.18em;text-indent:.18em;
  padding:16px 30px;font-size:15px;transition:background-color .2s ease-out,color .2s ease-out}
.btn-tel{flex-direction:column;text-indent:0}
.btn-tel{background:var(--kami);color:var(--sumi);line-height:1.35}
.btn-tel:hover{background:var(--usu-l)}

.btn-tel-label{display:block;font-size:13px;letter-spacing:.18em;color:var(--hai)}
.btn-tel-num{display:block;font-size:22px;letter-spacing:.05em;color:var(--sumi);font-weight:500}
.btn-form{background:var(--gunjo);color:var(--sumi)}
.btn-form:hover{background:var(--gunjo-d)}
.btn-submit{background:var(--gunjo);color:var(--sumi);border:0;width:100%;cursor:pointer;
  font:inherit;font-size:16px;letter-spacing:.18em;padding:18px}
.btn-submit:hover{background:var(--gunjo-d)}

.sec{
  padding:var(--sec-y) 0;
  --card:var(--usu-l);
  background-color:var(--kami);background-image:var(--tex);background-size:var(--tex-size);
}
.sec-usu{
  --card:var(--kami);
  background-color:var(--usu);background-image:var(--tex);background-size:var(--tex-size);
}

.sec-h2{font-size:clamp(24px,3.9vw,36px);line-height:1.5;margin:0 0 .7em}
.sec-note{color:var(--hai);margin:0 0 2em;font-size:15px}

.sec-h2 + .sec-note{margin-top:clamp(12px,1.8vw,30px)}
.center{text-align:center}
.note-sm{font-size:14px;color:var(--hai)}

.ph-text{background:var(--card);border-left:4px solid var(--gunjo);
  padding:14px 18px;color:var(--sumi);font-size:15px}

.ph-cell{color:var(--hai)}

.ph{background:var(--usu-l);
  display:flex;align-items:center;justify-content:center;text-align:center}
.ph-label{color:var(--hai);font-size:14px;letter-spacing:.1em;line-height:1.8;padding:8px}
.ph-label small{display:block;font-size:14px}

.about-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:36px;align-items:start}
.about-photo{aspect-ratio:4/5;min-height:260px}

img.about-photo{display:block;width:100%;height:auto;object-fit:cover;object-position:center 20%}
.lead-lg{font-size:clamp(20px,3vw,28px);line-height:1.7;margin:0 0 1em}

.greet p{margin:0 0 1.1em;font-size:15px;line-height:2}

.greet-link{margin:.6em 0 0}
.greet-link a,.sub-back-link{display:inline-flex;align-items:center;min-height:48px;color:var(--sumi);letter-spacing:.1em;text-underline-offset:.3em}
.greet-link a::after{content:"→";margin-left:.5em}

.sub-first{padding-top:clamp(36px,5vw,64px)}
.sub-back-btns{display:flex;flex-wrap:wrap;gap:18px 28px;justify-content:center;align-items:center;margin:1em 0 0}
.greet-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:48px;
  padding:0 1.4em;margin:.2em 0 1.2em;border:1px solid var(--sumi);color:var(--sumi);background:transparent;
  font-size:15px;letter-spacing:.12em}
.greet-more>summary::-webkit-details-marker{display:none}
.greet-more>summary::after{content:"";width:.5em;height:.5em;margin-left:.9em;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.greet-more[open]>summary::after{transform:translateY(.1em) rotate(-135deg)}
.greet-more>summary:focus-visible{outline:2px solid var(--sumi);outline-offset:3px}
.greet-close{display:none}
.greet-more[open] .greet-open{display:none}
.greet-more[open] .greet-close{display:inline}
.sign{margin:1.4em 0 0;letter-spacing:.12em}
.sign strong{font-weight:500;font-size:19px}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}.about-photo{aspect-ratio:3/2;min-height:0}}

@media (max-width:760px){img.about-photo{aspect-ratio:4/5;width:min(100%,280px);margin-inline:auto}}

.bg-group.has-bg,.sec.has-bg{position:relative}

.bg-group.has-bg{background-color:var(--usu);
  background-image:var(--tex);background-size:var(--tex-size)}
.bg-group.has-bg > .sec{background-color:transparent;background-image:none}
.sec-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background-image:var(--sec-bg-img,none);background-size:cover;background-position:center;

  display:flex;align-items:flex-end;justify-content:flex-end;padding:0 20px 20px}

.sec-bg::after{content:"";position:absolute;inset:0;
  background:rgba(251,251,249,var(--sec-maku-a,.72))}

.has-bg:not(.bg-ready) .sec-bg{ background-image:none; background-color:var(--usu-l) }
.sec-bg-label{position:relative;z-index:1;color:var(--hai);background:rgba(251,251,249,.86);
  padding:14px 22px;font-size:14px;letter-spacing:.1em;line-height:1.9;text-align:center;
  max-width:min(92%,520px)}
.sec-bg-label small{display:block;font-size:14px;opacity:.9;letter-spacing:.04em}

.has-bg.bg-ready .sec-bg-label{display:none}

#craftreason{ --sec-bg-img:url(../img/bg/bg-paint-poster.jpg) }

.sec-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#service    { --sec-bg-img:url(../img/bg/仮_背景_できる工事_差し替え必須.jpg) }

.craft-lead{font-size:clamp(18px,2.4vw,22px);line-height:1.9;margin:0 0 1.4em}
.craft-body{margin:0 0 1.2em;max-width:44em;margin-left:auto;margin-right:auto;font-size:15px}
.craft-body strong,.craft-lead strong{font-weight:500;color:var(--sumi)}

#craft .craft-lead{font-size:clamp(16px,5vw,32px);white-space:nowrap;font-family:"ZenOldMincho",serif;letter-spacing:var(--ls-head);line-height:1.7;margin-bottom:1em}

.craft-lead strong.mark{font-weight:400;color:var(--sumi);padding:0 .08em;
  background-image:linear-gradient(#FAC302,#FAC302);background-repeat:no-repeat;
  background-position:0 92%;background-size:100% .36em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

.ph-note{font-size:14px;color:var(--hai);letter-spacing:.06em;margin:2em 0 0}
.ph-note strong{font-weight:500;color:var(--sumi)}

#craft .wrap{text-align:center}
#craft .sec-h2{width:fit-content;text-align:center}

.reasons{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
  grid-auto-rows:1fr}

.reason{background:var(--card);padding:26px 24px 28px;position:relative;
  display:flex;flex-direction:column;height:100%}

.reason-h3{font-size:18px;line-height:1.6;margin:0 0 .5em;color:var(--sumi)}
.reason p{margin:0;font-size:15px}
.reasons{align-items:stretch}

.works-grid{list-style:none;margin:0 0 20px;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.work{background:var(--card)}

.work-ph{aspect-ratio:4/3;width:100%}

.work-photo{display:block;background-size:cover;background-position:center 52%;
  background-repeat:no-repeat}
.work-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:10px 12px;font-size:14px}
.work-meta b{font-weight:500;color:var(--sumi);letter-spacing:.08em}
.work-meta span{color:var(--hai);font-size:14px}
.works-caption{font-size:14px;color:var(--hai);margin:0}

.works-grid .work:nth-child(1) .work-photo{transform:rotate(-2.4deg)}
.works-grid .work:nth-child(2) .work-photo{transform:rotate(3.1deg)}
.works-grid .work:nth-child(3) .work-photo{transform:rotate(-4.6deg)}
.works-grid .work:nth-child(4) .work-photo{transform:rotate(2.2deg)}
.works-grid .work:nth-child(5) .work-photo{transform:rotate(-3.3deg)}
.works-grid .work:nth-child(6) .work-photo{transform:rotate(5.2deg)}
.works-grid .work:nth-child(7) .work-photo{transform:rotate(-2.8deg)}
.works-grid .work:nth-child(8) .work-photo{transform:rotate(4.1deg)}
.works-grid .work:nth-child(9) .work-photo{transform:rotate(-3.7deg)}
@media (max-width:520px){.works-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:760px){.works-grid{grid-template-columns:repeat(2,1fr);gap:16px}}

.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  grid-auto-rows:1fr}
.svc{background:var(--card);padding:26px 24px;
  display:flex;flex-direction:column;height:100%}
.svc-h3{font-size:18px;margin:0 0 .5em;color:var(--sumi)}
.svc p{margin:0;font-size:15px}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

table{border-collapse:collapse;width:100%;font-size:15px}
.price-table th,.price-table td,.company-table th,.company-table td{
  padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sen)}
.price-table thead th{background:var(--gunjo);color:var(--sumi);font-weight:500;letter-spacing:.1em;
  white-space:nowrap}

.company-table td a{display:inline-block;padding:11px 0}

.ft-addr a{display:inline-block;padding:12px 0}
.price-table tbody th,.company-table th{white-space:nowrap;font-weight:500;color:var(--sumi);
  width:9em}
.notes{margin:1.4em 0 0;padding-left:1.2em;font-size:14px;color:var(--hai)}
.notes li{margin-bottom:.4em}
@media (max-width:560px){
  .company-table th,.company-table td{display:block;width:auto;border-bottom:0}
  .company-table th{padding-bottom:2px}
  .company-table td{padding-top:2px;border-bottom:1px solid var(--sen)}
}

.flow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;align-items:stretch;
  grid-auto-rows:1fr}
.flow-step{background:var(--card);padding:24px 20px;position:relative;
  display:flex;flex-direction:column;height:100%}
.flow-no{display:block;font-size:38px;line-height:1;color:var(--oka);margin-bottom:.1em;
  font-family:"ZenOldMincho",serif}
.flow-h3{font-size:18px;margin:0 0 .4em;color:var(--sumi)}
.flow-step p{margin:0;font-size:14px;color:var(--sumi)}

@media (max-width:900px){ .flow{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (max-width:560px){ .flow{grid-template-columns:1fr;grid-auto-rows:auto} }

.faq{margin:0}
.faq dt{font-weight:500;font-size:15px;color:var(--sumi);
  padding:20px 0 6px;border-top:1px solid var(--sen)}
.faq dt::before{content:"Q．";font-family:"JosefinSans","NotoJP",sans-serif}
.faq dd{margin:0 0 6px;padding:0 0 18px 0;font-size:15px}
.faq dd::before{content:"A．";font-family:"JosefinSans","NotoJP",sans-serif;color:var(--hai)}

.sec-contact{--card:var(--kami);background-color:var(--soji);background-image:var(--tex);background-size:var(--tex-size)}
.contact-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px;align-items:start}
.tel-box{background:var(--card);padding:28px 24px;text-align:center}
.tel-box-label{margin:0 0 .2em;font-size:13px;letter-spacing:.14em;color:var(--hai)}

.tel-box-num{display:block;padding:8px 0;font-size:clamp(26px,4vw,32px);letter-spacing:.04em;
  color:var(--sumi);text-decoration:none;line-height:1.3}
.tel-box-sub{margin:.4em 0 0;font-size:14px;color:var(--hai)}
.form{background:var(--card);padding:26px 24px}
.form-notice{margin:0 0 18px;padding:10px 14px;background:#FDF3E7;border-left:4px solid #C87F25;
  font-size:14px;color:#4A3618}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;letter-spacing:.08em;margin-bottom:6px;font-weight:500}
.req{display:inline-block;margin-left:8px;background:var(--gunjo);color:var(--sumi);
  font-size:12px;letter-spacing:.08em;padding:2px 7px;font-weight:400}
.field input,.field textarea{width:100%;font:inherit;font-size:17px;padding:12px 14px;
  border:1px solid var(--hai);background:var(--kami);color:var(--sumi);border-radius:0}
.field textarea{resize:vertical}
.form-privacy{margin:14px 0 0;font-size:14px;color:var(--hai)}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

.ft{background-color:var(--usu);background-image:var(--tex);background-size:var(--tex-size);
  color:var(--sumi);padding:56px 0 96px;text-align:center}
.ft-logo{font-size:26px;letter-spacing:.16em;margin:0 0 .5em}
.ft-addr{margin:0 0 1.4em;font-size:14px;color:var(--sumi);line-height:2}
.ft-addr a{color:var(--sumi)}

.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin-bottom:1.4em}
.ft-nav a{color:var(--sumi);text-decoration:none;font-size:14px;letter-spacing:.08em;
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 11px;position:relative}
.ft-nav a:hover{text-decoration:underline}

@media (min-width:768px){
  .ft-nav a:not(:last-child)::after{
    content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:1px;height:1.1em;background:#fff}
}

.ft-area{border:2px solid #fff;border-radius:5px;padding:16px 22px;
  max-width:min(100%,480px);margin:0 auto 1.4em;text-align:center}
.ft-area-ttl{font-size:15px;color:var(--sumi);margin:0 0 .4em;letter-spacing:.1em;line-height:1.5}
.ft-area p{font-size:14px;color:var(--sumi);margin:0;line-height:1.9}
.ft-copy{font-size:14px;color:var(--hai);margin:0}

.fixcta{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;gap:10px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s ease-out,transform .4s ease-out}
.fixcta.show{opacity:1;transform:none;pointer-events:auto}
.fixcta a{text-decoration:none;letter-spacing:.12em;box-shadow:0 6px 22px rgba(46,52,61,.22)}
.fixcta-tel{background:var(--kami);color:var(--sumi);padding:10px 18px;line-height:1.3;text-align:center}
.fixcta-cap{display:block;font-size:12px;letter-spacing:.16em;color:var(--hai)}
.fixcta-num{display:block;font-size:18px;color:var(--sumi);font-weight:500}
.fixcta-form{background:var(--gunjo);color:var(--sumi);padding:16px 22px;font-size:15px;
  display:flex;align-items:center}
.fixcta-form:hover{background:var(--gunjo-d)}
@media (max-width:760px){

  .fixcta{left:0;right:0;bottom:0;gap:0;transform:translateY(100%)}
  .fixcta a{flex:1;box-shadow:none;border-radius:0;text-align:center;justify-content:center}
  .fixcta-tel{padding:12px 8px}
  .fixcta-form{padding:12px 8px}
  .ft{padding-bottom:120px}
}

@media (min-width:768px) and (max-width:1023.98px){
  .reasons,.svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:767.98px){

  :root{ --sec-y:34px }

  .sec-h2{ margin-bottom:.5em }
  .sec-note{ margin-bottom:1em }

  body{ line-height:1.75 }

  .reasons{ gap:14px }
  .reason{ padding:18px 16px 20px }
  .svc-grid{ gap:14px }
  .svc{ padding:18px 16px }
  .flow{ gap:12px }
  .flow-step{ padding:18px 16px }
  .works-grid{ margin-bottom:14px }

  .price-table th,.price-table td,
  .company-table th,.company-table td{ padding:9px 10px }
  .notes{ margin-top:1em }

  .faq dt{ padding-bottom:6px }
  .faq dd{ padding-bottom:12px; margin-bottom:4px }

  .craft-lead{ margin-bottom:1em }
  .lead-lg{ margin-bottom:.7em }
  .contact-grid{ gap:18px }
  .about-grid{ gap:18px }
  .works-caption{ margin-top:10px }

  .reasons,.svc-grid{ grid-template-columns:1fr; grid-auto-rows:auto }

  .reason p,.svc p{ line-height:1.7 }
  .reason-h3,.svc-h3,.flow-h3{ font-size:16px; margin-bottom:.3em }

  .reason{ padding:16px 14px 18px }
  .svc,.flow-step{ padding:16px 14px }

  .flow-no{ font-size:30px }
  .craft-body{ margin-bottom:1em }
}

.hero-slide.is-painting{
  z-index:2;
  -webkit-mask-image:url(../img/hake-hero-square.svg);  mask-image:url(../img/hake-hero-square.svg);
  -webkit-mask-size:calc(var(--frames)*100%) 100%;      mask-size:calc(var(--frames)*100%) 100%;
  -webkit-mask-repeat:no-repeat;                        mask-repeat:no-repeat;
  -webkit-mask-position:0 0;                            mask-position:0 0;
  -webkit-animation:paint-play var(--dur) steps(12) forwards;
          animation:paint-play var(--dur) steps(12) forwards;
}

@media (max-width:600px){
  .hero-slide.is-painting{-webkit-mask-image:url(../img/hake-hero-portrait.svg);
    mask-image:url(../img/hake-hero-portrait.svg)}
}
@media (min-width:951px){
  .hero-slide.is-painting{-webkit-mask-image:url(../img/hake-hero-wide15.svg);
    mask-image:url(../img/hake-hero-wide15.svg)}
}
@media (min-width:1651px){
  .hero-slide.is-painting{-webkit-mask-image:url(../img/hake-hero-wide26.svg);
    mask-image:url(../img/hake-hero-wide26.svg)}
}
@-webkit-keyframes paint-play{from{-webkit-mask-position:0 0}to{-webkit-mask-position:100% 0}}
@keyframes paint-play{from{mask-position:0 0}to{mask-position:100% 0}}

@supports not ((mask-image:url(x.svg)) or (-webkit-mask-image:url(x.svg))){

  .hero-slide.is-painting{opacity:0;transition:opacity var(--dur) ease;z-index:2}
  .hero-slide.is-painting.on{opacity:1}
}

@media (prefers-reduced-motion:reduce){

  .hero-slide.is-painting{
    -webkit-mask-image:none!important;mask-image:none!important;
    -webkit-animation:none!important;animation:none!important;
    transition:none!important;display:none!important}
  .fixcta{transition:none}
}

.sp-br{display:none}
@media (max-width:560px){
  body{font-size:16px}
  .sp-br{display:inline}
}

.sec-h2.rv-armed::before{
  -webkit-mask-image:url(../img/hake-cell.svg);         mask-image:url(../img/hake-cell.svg);
  -webkit-mask-size:calc(var(--frames)*100%) 100%;      mask-size:calc(var(--frames)*100%) 100%;
  -webkit-mask-repeat:no-repeat;                        mask-repeat:no-repeat;
  -webkit-mask-position:0 0;                            mask-position:0 0}
.sec-h2.rv-armed.rv-in::before{
  -webkit-animation:paint-play .8s steps(12) .1s forwards;
          animation:paint-play .8s steps(12) .1s forwards}

.rv-group.rv-armed>*{opacity:0;transform:translateY(18px)}
.rv-group.rv-armed.rv-in>*{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--rv-i,0)*90ms)}
.rv-group>:nth-child(2){--rv-i:1} .rv-group>:nth-child(3){--rv-i:2} .rv-group>:nth-child(4){--rv-i:3}
.rv-group>:nth-child(5){--rv-i:4} .rv-group>:nth-child(6){--rv-i:5} .rv-group>:nth-child(7){--rv-i:6}
.rv-group>:nth-child(8){--rv-i:7} .rv-group>:nth-child(9){--rv-i:8}

.rv-line.rv-armed .mark{background-size:0 .36em}
.rv-line.rv-armed.rv-in .mark{background-size:100% .36em;
  transition:background-size .7s cubic-bezier(.3,.7,.2,1) .25s}

#reason .reasons{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px;max-width:640px;margin-inline:auto}
#reason .reason{padding:24px 28px 26px}
#reason .reason-h3{font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:20px;line-height:1.6;margin:0 0 .5em}
#reason .reason p{font-size:15px;letter-spacing:.08em;line-height:1.9}
.ln{display:block}

#service .svc-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px;max-width:640px;margin-inline:auto}
#service .svc{padding:24px 28px 26px}
#service .svc-h3{font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:20px;line-height:1.6;margin:0 0 .5em}
#service .svc p{font-size:15px;letter-spacing:.08em;line-height:1.9;margin:0}
#service .svc .svc-list{margin-bottom:1.1em}

#craft .craft-body{letter-spacing:.08em}
@media (max-width:560px){
  #reason .reason{padding:18px 16px 20px}
  #reason .reason-h3{font-size:18px}
  #reason .reason p{font-size:14px;letter-spacing:.02em;line-height:1.8}
  #service .svc{padding:18px 16px 20px}
  #service .svc-h3{font-size:18px}
  #service .svc p{font-size:14px;letter-spacing:.02em;line-height:1.8}
  #craft .craft-body{font-size:14px;letter-spacing:0;line-height:1.9}

  #craft .sec-h2{font-size:clamp(19px,6.2vw,30px)}
}

@media (prefers-reduced-motion:reduce){
  .sec-h2.rv-armed::before{-webkit-mask-image:none!important;mask-image:none!important;
    -webkit-animation:none!important;animation:none!important}
  .rv-group.rv-armed>*{opacity:1!important;transform:none!important;transition:none!important}
  .rv-line.rv-armed .mark{background-size:100% .36em!important;transition:none!important}
}

.reason-h3>span.mk,.svc-h3>span.mk,.flow-h3>span.mk,
.craft-body strong,.ph-note strong,.work-meta b{
  background-image:var(--ki-line);background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
a{text-decoration-color:var(--gunjo);text-decoration-thickness:2px}

.faq dt::before{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;margin-right:.6em;
  border-radius:50%;background:var(--gunjo);color:var(--sumi);font-size:.85em}

.page-ttl{display:flex;align-items:center;justify-content:center;height:520px;padding:40px 20px;text-align:center;
  background:var(--usu) var(--page-ttl-img,none) center/cover no-repeat}
.page-ttl-in{margin:0;line-height:1.5;font-weight:400}
.page-ttl-jp{display:block;margin-bottom:16px;font-family:"ZenOldMincho",serif;font-size:41px;line-height:1.26;letter-spacing:.11em;color:var(--sumi)}
.page-ttl-en{display:inline-block;padding:6px 16px;font-family:"JosefinSans","NotoJP",sans-serif;font-size:12px;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;border-radius:4px;background:var(--sumi);color:#fff}
@media (max-width:1080px){.page-ttl{height:320px}}
@media (max-width:767px){.page-ttl{height:184px}.page-ttl-jp{font-size:33px;margin-bottom:8px}}

.flow-page .flow-lead{display:block;width:max-content;max-width:100%;margin-inline:auto;text-align:center}
.flow-list{list-style:none;margin:40px 0 0;padding:0;counter-reset:none}
.flow-item{position:relative;max-width:860px;margin:0 auto 16px;padding:0 0 40px 86px}
.flow-item:not(:last-child)::before{content:"";position:absolute;top:60px;left:28px;width:3px;height:calc(100% - 56px);
  border-radius:2px;background:var(--gunjo)}
.flow-ttl{position:relative;margin:0 0 16px;line-height:1.4;font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:24px;letter-spacing:.06em}
.flow-num{position:absolute;top:-6px;left:-86px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:24px;background:var(--gunjo);color:var(--sumi);font-family:"JosefinSans","NotoJP",sans-serif;font-size:17px;line-height:1;letter-spacing:0}
.flow-text p{margin:0 0 1em;font-size:16px;line-height:2}
.flow-text b.mk-b{font-weight:700;background-image:var(--ki-line);background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.clearfix::after{content:"";display:block;clear:both}
.flow-photo{float:left;width:248px;max-width:40%;aspect-ratio:4/3;margin:4px 40px 12px 0;border-radius:16px;overflow:hidden}
.flow-photo.ph{display:flex;align-items:center;justify-content:center;text-align:center}
.flow-photo img{display:block;width:100%;height:100%;object-fit:cover}
.flow-box{clear:both;max-width:960px;margin:24px 0 8px;padding:28px 32px;background:var(--usu-l)}
.flow-box-ttl{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 16px;font-size:18px;letter-spacing:.08em;font-weight:700}
.flow-box-ttl::before,.flow-box-ttl::after{content:"";width:23px;height:6px;border-top:2px solid var(--gunjo-d);border-bottom:2px solid var(--gunjo-d)}
.flow-box ul{margin:0;padding-left:1.3em}
.flow-box li,.flow-box p{font-size:15px;line-height:1.9;margin:0 0 .3em}
.flow-btn{margin-top:1.2em}
.flow-end{text-align:center;margin:24px 0 0}
@media (max-width:767px){
  .flow-item{padding:0 0 20px 40px;margin-bottom:8px}
  .flow-item:not(:last-child)::before{top:34px;left:15px;height:calc(100% - 37px)}
  .flow-ttl{margin-bottom:8px;font-size:19px}
  .flow-num{top:-2px;left:-40px;width:32px;height:32px;border-radius:16px;font-size:14px}
  .flow-photo{float:none;width:100%;max-width:none;margin:2px 0 8px;border-radius:8px}
  .flow-text p{font-size:15px;line-height:1.9}
  .flow-box{padding:18px 16px}
}

.hero-h1 .hero-copy{display:block;width:clamp(220px,30vw,400px);height:auto;filter:invert(1)}
#craft .wrap{position:relative}

.naze-person{display:block;height:150px;width:auto;margin:0 auto 6px}
@media (min-width:1024px){
  .naze-person{position:absolute;left:max(0px,calc(50% - 470px));top:0;height:280px;margin:0}
}
#craft .craft-body{font-size:clamp(15px,4.2vw,19px);line-height:1.9;margin:0 auto 1.3em;width:max-content;max-width:100%}

.sp-only{display:none}
@media (max-width:767px){
  .pc-only{display:none!important}
  .sp-only{display:block}
  span.scroll-cue.sp-only{display:inline}
  h1.hero-h1.sp-only{display:block}

  .scroll-cue{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);color:#fff;
    font-family:"JosefinSans","NotoJP",sans-serif;font-size:14px;letter-spacing:.3em;padding-top:46px}
  .scroll-cue::before{content:"";position:absolute;left:50%;top:0;width:1px;height:38px;background:rgba(255,255,255,.75);
    animation:cue 1.8s ease-in-out infinite;transform-origin:top}
  .hero{align-items:center}
  .hero-in{display:flex;justify-content:center;padding-bottom:0}

  .hero-h1{margin:0;width:min(40.8vw,32.55svh);position:relative;top:-56px}

  .hero-vwrap{display:block;position:relative;width:100%;aspect-ratio:392/729;overflow:hidden}

  .hero-col{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
    animation:col-in 1.1s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(.3s + var(--c) * .55s)}
  .hero-col[style*="--c:0"]{clip-path:inset(0 0 0 71.81%)}
  .hero-col[style*="--c:1"]{clip-path:inset(0 28.19% 0 51.15%)}
  .hero-col[style*="--c:2"]{clip-path:inset(0 48.85% 0 28.19%)}
  .hero-col[style*="--c:3"]{clip-path:inset(0 71.81% 0 0)}

  .hero{isolation:isolate}
  .hero-in{z-index:auto}
  .hero-in::before{z-index:1}
  .hero-vwrap{z-index:2;mix-blend-mode:screen}

  .naze-center{position:relative}
  .naze-q{position:relative;width:min(560px,94%);margin:0 auto}
  .naze-qp{display:block;width:100%;height:auto}
  .naze-qb{position:absolute;left:0;top:0;width:100%;height:auto}
  .qln{display:block}
  #craft-sp .naze-q-txt{position:absolute;left:50%;top:2%;transform:translateX(-50%);width:max-content;max-width:96%;margin:0;
    text-align:center;font-size:clamp(19px,5vw,32px);line-height:1.55}
  #craft-sp .naze-q-txt::before{content:none}

  .naze-a{position:relative;width:min(420px,72%);margin:40px auto 30px;aspect-ratio:1400/900;isolation:isolate}
  .naze-a-ln{position:absolute;inset:0;width:100%;height:100%}
  .naze-a-ln[style*="--i:1"],.naze-a-ln[style*="--i:2"]{display:none}

  .naze-a-paint{position:absolute;z-index:-1;left:-14%;width:132%;top:50%;height:62%;transform:translateY(-50%);
    background:url(../img/deco/h2-paint.svg) center / 100% 100% no-repeat}
  .naze-body{margin-top:8px}

  #craftreason.bg-group.has-bg{background:var(--kami)}

  #craftreason{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 180px);mask-image:linear-gradient(to bottom,transparent 0,#000 180px)}

  html.story-on .hero{position:sticky;top:0;z-index:0;min-height:100svh;opacity:var(--hero-o,1)}

  html.story-on #craftreason{z-index:1;margin-top:calc(74px * -.75)}

  html.story-on .scroll-cue{bottom:calc(22px + 100svh - min(88svh,760px))}
  html.story-on #craft-sp.story{height:860svh;padding:0}
  html.story-on .story-stage{position:sticky;top:0;height:100svh;overflow:hidden;padding-top:72px;box-sizing:border-box}

  html.story-on .naze-center{position:absolute;left:50%;top:50%;width:var(--qw);height:var(--qh);
    transform:translate(-50%,calc(-50% - var(--up,0) * 1px)) scale(calc(1 - var(--s6,0) * var(--shrink,0)));transform-origin:50% 0}
  html.story-on .naze-q{position:absolute;inset:0;width:auto;margin:0;
    clip-path:circle(var(--cr,2000px) at 50% 50%)}

  html.story-on .naze-qp{opacity:var(--s1,0);filter:blur(calc((1 - var(--s1,0)) * 8px));transform:scale(calc(.96 + var(--s1,0) * .04))}
  html.story-on .naze-qb{opacity:var(--s1b,0);filter:blur(calc((1 - var(--s1b,0)) * 8px));transform:scale(calc(.96 + var(--s1b,0) * .04))}
  html.story-on #craft-sp .naze-q-txt{font-size:calc(var(--qw) * .058)}
  html.story-on .qln{opacity:var(--qk,0);filter:blur(calc((1 - var(--qk,0)) * 6px))}
  html.story-on .qln[style*="--j:0"]{--qk:var(--q0)} html.story-on .qln[style*="--j:1"]{--qk:var(--q1)}
  html.story-on .naze-a{position:absolute;left:50%;top:50%;width:min(calc(var(--qw) * 1.02),calc(100vw / 1.36));margin:0;transform:translate(-50%,-50%)}
  html.story-on .naze-a-ln{display:block!important}

  html.story-on .naze-a-ln[style*="--i:0"]{clip-path:inset(0 calc(100% - var(--a0,0) * 100%) 63.5% 0)}
  html.story-on .naze-a-ln[style*="--i:1"]{clip-path:inset(36.5% calc(100% - var(--a1,0) * 100%) 36.5% 0)}
  html.story-on .naze-a-ln[style*="--i:2"]{clip-path:inset(63.5% calc(100% - var(--a2,0) * 100%) 0 0)}

  html.story-on .naze-a-paint{
    -webkit-mask-image:url(../img/hake-cell.svg);mask-image:url(../img/hake-cell.svg);
    -webkit-mask-size:calc(var(--frames) * 100%) 100%;mask-size:calc(var(--frames) * 100%) 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:calc(var(--pf,0) * 100% / 12) 0;mask-position:calc(var(--pf,0) * 100% / 12) 0}
  html.story-on .naze-body{position:absolute;left:0;right:0;bottom:0;top:var(--body-top,40%);display:flex;flex-direction:column;justify-content:center;
    padding:0 20px;margin:0}
  html.story-on #craft-sp .naze-b{font-size:var(--body-fs,19px);line-height:1.85;margin:0 auto .9em;
    opacity:var(--bk,0);transform:translateY(calc((1 - var(--bk,0)) * 20px))}
  html.story-on .naze-b[style*="--k:0"]{--bk:var(--b0)} html.story-on .naze-b[style*="--k:1"]{--bk:var(--b1)}
  html.story-on .naze-b[style*="--k:2"]{--bk:var(--b2)} html.story-on .naze-b[style*="--k:3"]{--bk:var(--b3)}
}

@media (max-width:767px){
  html.story-on .naze-center,html.story-on .naze-body{opacity:calc(1 - var(--fo,0))}

  html.story-on #reason{padding:0}
  .naze-reason{display:none}
  html.story-on .naze-reason{display:flex;position:absolute;inset:0;padding:0 20px;
   flex-direction:column;justify-content:center;
    opacity:calc(var(--rv,0) * (1 - var(--ro,0)));pointer-events:none}
  html.story-on .naze-reason .wrap{padding:0;width:100%}
  html.story-on .naze-reason .reasons{display:grid;grid-template-columns:1fr;gap:28px;max-width:640px;margin:0 auto;padding:0;list-style:none;text-align:center}
  html.story-on .naze-reason .reason{background:none;box-shadow:none;border:0;padding:0}
  html.story-on .naze-reason .reason::before,html.story-on .naze-reason .reason::after{content:none}
  html.story-on .naze-reason .reason-h3{font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:18px;line-height:1.6;margin:0 0 .4em}
  html.story-on .naze-reason .reason p{font-size:14px;letter-spacing:0;line-height:1.75;margin:0}
  html.story-on .naze-reason .ln{display:block;word-break:keep-all;overflow-wrap:anywhere}

  html.story-on .naze-reason .rv-group.rv-armed>*{opacity:1;transform:none;transition:none}
  #reason .reasons{gap:44px;text-align:center}
  #reason .reason{background:none;box-shadow:none;border:0;padding:0}

  #reason .hills-wrap{display:none}
  #service{padding-top:calc(clamp(48px,14vw,96px) + 28px)}
  #service img.divider-curve{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,14vw,96px);z-index:1;pointer-events:none}
  #service > .wrap,#service > .svc-stick > .wrap{position:relative;z-index:2}

  #reason .reason p{font-size:14px;letter-spacing:0}

  #reason .reason .ln{word-break:keep-all;overflow-wrap:anywhere}
  #reason .reason::before,#reason .reason::after{content:none}
  #service{--sec-bg-img:url(../img/bg/bg-paint-poster.jpg)}
}

@media (max-width:767px){
  .naze-scene{position:relative;background:#0b2a3a;padding:24px 0;overflow:hidden}
  .naze-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  #craft-sp .naze-q-txt{position:relative;margin:0 auto;width:min(60vw,26svh);padding:0;transform:none;left:auto;top:auto;max-width:none}
  #craft-sp .naze-q-txt::before{content:none}
  .naze-qwrap{display:block;position:relative;width:100%;aspect-ratio:392/774;overflow:hidden;mix-blend-mode:multiply}
  .naze-qv{position:absolute;left:-128.571%;top:-6.977%;width:357.143%;height:auto}
  html.story-on .naze-qwrap{opacity:0;transition:opacity .2s}
  html.story-on #craft-sp.q-on .naze-qwrap{opacity:1}

  .naze-haze{position:absolute;inset:-100px;pointer-events:none;
    background:radial-gradient(ellipse closest-side,rgba(255,255,255,.62) 85%,rgba(255,255,255,0) 100%)}

  .naze-qwrap{z-index:1}
  html.story-on .naze-scene{position:absolute;inset:0;padding:0;display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;opacity:var(--s1,0)}
}

@media (max-width:767px){
  .naze-scene{background:var(--kami)}
  .naze-roll{display:none}
  html.story-on .naze-scene{opacity:calc(var(--s1,0) * (1 - var(--qoff,0)))}
  html.story-on .naze-roll{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

  html.story-on .naze-scene{z-index:-1}
  html.story-on .story-stage{isolation:isolate}
  html.story-on .naze-center,html.story-on .naze-body,html.story-on .naze-reason{z-index:1}

  html.story-on .nm{position:absolute;inset:0}

  html.story-on .nm3{background:rgba(251,251,249,calc(1 - var(--bo,0)));isolation:isolate}
  html.story-on #craftreason.bg-group.has-bg{background:transparent}

  html.story-on #service{margin-top:calc(-100svh - 130svh);z-index:0;padding-top:0}
  html.story-on #service .svc-stick{position:sticky;top:0;padding-top:64px;padding-bottom:var(--sec-y);min-height:100svh;box-sizing:border-box}

  html.story-on #service{padding-bottom:0}
  .svc-run{display:none}
  html.story-on #service .svc-run{display:block;height:130svh}

  html.story-on #service .svc-stick > .wrap > .sec-h2,html.story-on #service img.divider-curve:not(.divider-bottom){display:none}

  html.story-on .naze-a-paint{display:none}

  html.story-on .naze-reason .reason-h3>span.mk{background-image:none}
  html.story-on .naze-reason .reason-h3{font-size:20px}
  html.story-on .rs{position:absolute;top:-25svh;width:60vw;height:150svh;left:calc(var(--i) * 25vw - 17.5vw);
    background:url(../img/deco/roller-shade.png) 0 0 / 100% 100% no-repeat,
      linear-gradient(90deg,#DFAA0E 0,#F2BF1C 18%,#F7C726 50%,#F3C01E 82%,#E2AD10 100%);

    -webkit-mask-image:url(../img/deco/roller-edge-down.png),url(../img/deco/roller-edge.png),var(--rsk);
            mask-image:url(../img/deco/roller-edge-down.png),url(../img/deco/roller-edge.png),var(--rsk);
    -webkit-mask-size:100% 200%,100% 200%,100% 100%;mask-size:100% 200%,100% 200%,100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:0 calc(var(--e,0) * 100%),0 calc(var(--k,0) * 100%),0 0;mask-position:0 calc(var(--e,0) * 100%),0 calc(var(--k,0) * 100%),0 0;
    -webkit-mask-composite:source-in,source-in,source-over;mask-composite:intersect,intersect,add}

  html.story-on .naze-roll-s{opacity:var(--sb,0)}
  html.story-on .naze-roll-s .rs{background:linear-gradient(90deg,#DFAA0E 0,#F2BF1C 18%,#F7C726 50%,#F3C01E 82%,#E2AD10 100%);--rsk:var(--rss)}

  html.story-on .rs[style*="--i:0"]{transform:rotate(4deg);--k:var(--k0);--rsk:url(../img/deco/roller-stroke-0.png);--e:var(--e0);--rss:url(../img/deco/roller-solid-0.png)}
  html.story-on .rs[style*="--i:1"]{transform:rotate(176deg);--k:var(--k1);--rsk:url(../img/deco/roller-stroke-1.png);--e:var(--e1);--rss:url(../img/deco/roller-solid-1.png)}
  html.story-on .rs[style*="--i:2"]{transform:rotate(4deg);--k:var(--k2);--rsk:url(../img/deco/roller-stroke-2.png);--e:var(--e2);--rss:url(../img/deco/roller-solid-2.png)}
  html.story-on .rs[style*="--i:3"]{transform:rotate(176deg);--k:var(--k3);--rsk:url(../img/deco/roller-stroke-3.png);--e:var(--e3);--rss:url(../img/deco/roller-solid-3.png)}
}

@media (max-width:767px){
  #service .svc-list .ln{display:inline;white-space:nowrap}
  #service .svc-list .bul{display:none}

  #service .svc-list .ln:not(:last-child)::after{content:"\00a0/ ";white-space:normal;color:var(--hai)}
  #service .svc-list{line-height:1.75}
  #service .svc-grid{gap:12px}
  #service .svc{padding:14px 16px 15px}
  #service .svc-h3{margin-bottom:.25em}
  #service .svc .svc-list{margin-bottom:.45em}

  #service .svc-note .ln{word-break:keep-all;overflow-wrap:anywhere}
}

@media (max-width:767px) and (max-height:740px){
  #service .svc-grid{gap:8px}
  #service .svc{padding:10px 14px 11px}
  #service .svc-h3{font-size:17px}
}

@media (max-width:340px) and (max-height:700px){
  #service .svc-list,#service .svc p{line-height:1.6}
  #service .svc{padding:9px 12px 10px}
  html.story-on #service .svc-stick .wrap{padding-left:12px;padding-right:12px}
  #service .svc-note .ln{word-break:normal}
}

@media (max-width:767px){
  html.story-on #service .svc-stick{display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:0}
  img.divider-bottom{display:none}
  html.story-on #service img.divider-bottom{display:block;position:absolute;left:0;bottom:-1px;top:auto;width:100%;
    height:clamp(48px,14vw,96px);transform:scaleY(-1);z-index:1;pointer-events:none}
  #faq .sec-h2,#contact .sec-h2{display:table;margin-left:auto;margin-right:auto}
  .faq dd .fl:not(:first-child){display:block}
}

.divider-curve.divider-y{display:none}
.naze-q-ret{display:none}
@media (max-width:767px){
  #service .sec-h2{display:none}
  html:not(.story-on) #craft-sp{padding:0}

  html:not(.story-on) .hero{min-height:min(calc(100svh - 74px * .75),1100px)}
  html:not(.story-on) .scroll-cue{bottom:calc(22px + min(calc(100svh - 74px * .75),1100px) - min(88svh,760px))}
  html:not(.story-on) .naze-scene{padding:72px 0 64px}

  html:not(.story-on) .naze-qwrap{display:none}
  html:not(.story-on) #craft-sp .naze-q-txt{width:auto}

  html:not(.story-on) #craftreason{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}

  html:not(.story-on) #craft-sp .naze-scene{padding:48px 0 0}
  html:not(.story-on) .naze-q-ret{display:block;width:min(68%,330px);height:auto;margin:0 auto;mix-blend-mode:multiply}
  html:not(.story-on) .naze-center,html:not(.story-on) .naze-body,html:not(.story-on) #reason{background:#F3C01E}
  html:not(.story-on) #craftreason #reason{background:#F3C01E}

  html:not(.story-on) .naze-center{--wv:clamp(48px,14vw,96px);padding:calc(var(--wv) * .73 + 20px) 0 4px}
  html:not(.story-on) .naze-center::before{content:"";position:absolute;left:0;right:0;top:-1px;height:var(--wv);z-index:3;pointer-events:none;
    background:url(../img/deco/divider-curve.svg) 0 0 / 100% 100% no-repeat}
  html:not(.story-on) .naze-a{width:min(300px,58%);margin:0 auto 12px}
  html:not(.story-on) .naze-a-paint{display:none}
  html:not(.story-on) .naze-body{padding:4px 20px 28px;margin:0}
  html:not(.story-on) #craft-sp .naze-b{font-size:14px;line-height:1.85;margin:0 auto 1em}
  html:not(.story-on) #reason{padding:36px 0 calc(clamp(48px,14vw,96px) + 32px)}
  html:not(.story-on) #reason .reason-h3>span.mk{background-image:none}
  html:not(.story-on) #reason .reason-h3{font-size:20px}
  html:not(.story-on) #reason .reasons{gap:32px}

  html:not(.story-on) #service img.divider-curve:not(.divider-y):not(.divider-bottom){display:none}
  html:not(.story-on) #service img.divider-y{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,14vw,96px);z-index:1;pointer-events:none}
  html:not(.story-on) #service{padding-top:calc(clamp(48px,14vw,96px) + 24px);padding-bottom:calc(clamp(48px,14vw,96px) + 24px)}
  html:not(.story-on) #service img.divider-bottom{display:block;position:absolute;left:0;top:auto;bottom:-1px;width:100%;height:clamp(48px,14vw,96px);transform:scaleY(-1);z-index:1;pointer-events:none}
}

.tap-cue{display:none}
@media (max-width:767px){

  html.tap-lock,html.tap-lock body{overscroll-behavior:none}
  html.story-on .tap-cue{display:flex;position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:20;transform:translateX(-50%);
    flex-direction:column;align-items:center;gap:8px;font-family:"JosefinSans","NotoJP",sans-serif;font-size:14px;letter-spacing:.3em;color:var(--sumi);
    opacity:0;transition:opacity .4s;pointer-events:none}
  html.story-on.tap-wait .story-stage .tap-cue{opacity:.85}

  html.story-on .scroll-cue{display:none}
  html.story-on .tap-cue-hero{position:absolute;bottom:calc(22px + 100svh - min(88svh,760px));color:#fff;z-index:3}
  html.story-on.hero-wait .tap-cue-hero{opacity:.9}
  .tap-dot{display:block;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;animation:tap-pulse 1.6s ease-out infinite}
}
@keyframes tap-pulse{0%{transform:scale(.6);opacity:1}70%{transform:scale(1.15);opacity:0}100%{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.tap-dot{animation:none}}

.ft-logo-img{display:block;width:150px;height:auto;margin:0 auto}
.divider-contact{display:none}

#contact{--sec-bg-img:url(../img/bg/contact-pc.jpg);position:relative}
#contact > .wrap,#contact > .hills-wrap{position:relative;z-index:2}
#contact > .wrap > .sec-note{color:var(--sumi)}
@media (max-width:767px){
  #contact.roof-top{-webkit-mask-image:none;mask-image:none;padding-top:calc(clamp(48px,14vw,96px) + 32px);position:relative}
  #contact{--sec-bg-img:url(../img/bg/contact-sp.jpg)}
  #contact > .wrap{position:relative;z-index:2}
  #contact img.divider-contact{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,14vw,96px);z-index:1;pointer-events:none}
  #contact .hills-wrap{position:relative;z-index:2}
  .ft-logo-img{width:132px}

  #contact .hills-ft{display:none}
  #contact{padding-bottom:calc(clamp(48px,14vw,96px) + 40px)}
  #contact img.divider-ft{display:block;position:absolute;left:0;top:auto;bottom:-1px;width:100%;height:clamp(48px,14vw,96px);transform:scaleY(-1);z-index:1;pointer-events:none}
  .ft{background:#F3C01E}
  .ft-copy{color:var(--sumi)}
}
.divider-ft{display:none}

.divider-ft-top{display:none}
@media (max-width:767px){
  .ft{position:relative}
  .ft img.divider-ft-top{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,14vw,96px);z-index:1;pointer-events:none}
  .ft:has(.divider-ft-top){padding-top:calc(clamp(48px,14vw,96px) + 32px)}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.scroll-cue::before,.hero-col{animation:none}}
@keyframes col-in{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

#area.skew-band{margin-bottom:clamp(24px,4vw,64px)}

.ft2{text-align:left}
.ft2 .ft2-in{max-width:1100px}
.ft2 .ft-logo{margin:0 0 18px}
.ft2 .ft-logo-img{width:120px;margin:0}
.ft2-addr,.ft2-tel,.ft2-area{margin:0 0 8px;font-size:14px;line-height:1.8;color:var(--sumi);letter-spacing:.06em}
.ft2-tel a{color:var(--sumi);font-weight:700;letter-spacing:.1em;text-decoration:none;display:inline-block;padding:12px 0;margin:-12px 0}

.ft2-map{display:inline-flex;align-items:center;min-height:48px;margin:-9px 0 -9px 8px;vertical-align:middle;text-decoration:none;color:var(--sumi)}
.ft2-map span{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border:1.5px solid var(--sumi);border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1}
.ft2-btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.ft2-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-width:150px;min-height:56px;padding:0 26px;border-radius:999px;
  font-size:15px;font-weight:700;letter-spacing:.1em;text-decoration:none}
.ft2-btn::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.ft2-btn-w{background:#fff;color:var(--sumi);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.ft2-btn-k{background:var(--sumi);color:#fff}
.ft2-nav{display:flex;flex-direction:column;margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(0,0,0,.18)}
.ft2-nav a{display:block;padding:12px 0;font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--sumi);text-decoration:none}
.ft2 .ft-copy{text-align:center;color:var(--sumi);font-size:14px;margin:26px 0 0;letter-spacing:.06em}
@media (min-width:768px){
  .ft2 .ft2-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}
  .ft2-nav{margin:0;padding:0 0 0 56px;border-top:0;border-left:1px solid rgba(0,0,0,.18);display:grid;grid-template-columns:1fr 1fr;align-content:start}
}

body:has(.page-ttl) .page-ttl{position:relative;isolation:isolate}
.page-ttl::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(23,28,34,var(--ttl-maku,.5))}
.page-ttl{--ttl-maku:.62}
.page-ttl:not([style*="background-image"])::before{content:none}

.page-ttl[style*="background-image"] .page-ttl-jp{color:#fff}
.page-ttl[style*="background-image"] .page-ttl-en{background:#fff;color:var(--sumi)}

a.contact-tag{background:none;isolation:isolate}
a.contact-tag::before{content:"";position:absolute;inset:-10px -16px -10px -4px;z-index:-1;
  background:url(../img/deco/roller-shade.png) 0 0 / 100% 100% no-repeat,linear-gradient(90deg,#E9B414 0,#F6C523 45%,#F3C01E 100%);

  -webkit-mask-image:url(../img/deco/roller-stroke-3.png),url(../img/deco/roller-edge-down.png);mask-image:url(../img/deco/roller-stroke-3.png),url(../img/deco/roller-edge-down.png);
  -webkit-mask-size:100% 100%,100% 200%;mask-size:100% 100%,100% 200%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0,0 4%;mask-position:0 0,0 4%;-webkit-mask-composite:source-in;mask-composite:intersect;
  filter:drop-shadow(-2px 3px 6px rgba(80,55,0,.18))}
a.contact-tag .contact-tag__label{font-family:"ZenOldMincho",serif;font-weight:400;font-size:21px;letter-spacing:.24em}

.faq dd .fl:not(:first-child){display:block}

.ft{background:#F3C01E}
.ft-copy{color:var(--sumi)}
@media (min-width:768px){

  h1.hero-h1.sp-only{display:block;width:min(clamp(200px,17vw,250px),28svh);margin:0 0 .5em}
  .hero-h1.pc-only{display:none!important}

  .hero-in{display:flex;flex-direction:column;align-items:flex-start}
  .hero-lead.pc-only{order:2;position:relative;z-index:2}
  .hero{isolation:isolate}
  .hero-in{z-index:auto}
  .hero-in::before{z-index:1}
  .hero-vwrap{display:block;position:relative;width:100%;aspect-ratio:392/729;overflow:hidden;z-index:2;mix-blend-mode:screen}
  .hero-col{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
    animation:col-in 1.1s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(.3s + var(--c) * .55s)}
  .hero-col[style*="--c:0"]{clip-path:inset(0 0 0 71.81%)}
  .hero-col[style*="--c:1"]{clip-path:inset(0 28.19% 0 51.15%)}
  .hero-col[style*="--c:2"]{clip-path:inset(0 48.85% 0 28.19%)}
  .hero-col[style*="--c:3"]{clip-path:inset(0 71.81% 0 0)}

  #craft .naze-person{display:none}
  #craft .craft-lead .mark,#craft .rv-line.rv-armed .mark,#craft .rv-line.rv-armed.rv-in .mark{
    background:url(../img/deco/h2-paint.svg) 50% 52% / 118% 230% no-repeat;padding:.1em .2em;transition:none}

  #reason{padding-top:calc(var(--sec-y) * .45)}
  #reason .sec-h2{display:none}

  #craft .sec-h2{margin-bottom:64px}
  #service .sec-h2{display:none}

  #reason .hills-wrap{display:none}
  #reason{padding-bottom:calc(clamp(48px,7vw,110px) + 40px)}
  #service{--dv:clamp(48px,7vw,110px);margin-top:calc(-1 * var(--dv));padding-top:calc(var(--dv) + 36px);padding-bottom:calc(var(--dv) + 40px);position:relative;
    -webkit-mask-image:url(../img/deco/divider-mask.svg),linear-gradient(#000,#000);mask-image:url(../img/deco/divider-mask.svg),linear-gradient(#000,#000);
    -webkit-mask-size:100% var(--dv),100% calc(100% - var(--dv) + 1px);mask-size:100% var(--dv),100% calc(100% - var(--dv) + 1px);
    -webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  #service img.divider-bottom{display:block;position:absolute;left:0;top:auto;bottom:-1px;width:100%;height:var(--dv);transform:scaleY(-1);z-index:1;pointer-events:none}
  #contact.roof-top{-webkit-mask-image:none;mask-image:none;padding-top:calc(clamp(48px,7vw,110px) + 40px);position:relative}
  #contact img.divider-contact{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,7vw,110px);z-index:1;pointer-events:none}
  #contact .hills-ft{display:none}
  #contact{padding-bottom:calc(clamp(48px,7vw,110px) + 40px)}
  #contact img.divider-ft{display:block;position:absolute;left:0;top:auto;bottom:-1px;width:100%;height:clamp(48px,7vw,110px);transform:scaleY(-1);z-index:1;pointer-events:none}
  .ft img.divider-ft-top{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,7vw,110px);z-index:1;pointer-events:none}
  .ft:has(.divider-ft-top){position:relative;padding-top:calc(clamp(48px,7vw,110px) + 40px)}
}
@media (min-width:768px) and (prefers-reduced-motion:reduce){.hero-col{animation:none}}

.qa-tag,.qa-bridge,.qa-bridge-txt{display:none}
@media (min-width:768px){
  #craft{padding-bottom:20px}
  #craft .sec-h2{margin-bottom:56px}
  .qa-tag{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto 14px}
  .qa-ch{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;font-size:28px;line-height:1;padding-top:4px;box-sizing:border-box}
  .qa-en{font-size:14px;letter-spacing:.3em;color:var(--sumi)}
  .qa-q .qa-ch{background:var(--sumi);color:#fff}
  .qa-a .qa-ch{background:#F3C01E;color:var(--sumi)}
  .qa-bridge{display:flex;flex-direction:column;align-items:center;gap:12px;margin:40px auto 0}
  .qa-line{display:block;width:2px;height:90px;background:#F3C01E;transform-origin:top;animation:qa-grow 1.2s cubic-bezier(.3,.7,.2,1) both;
    animation-timeline:view();animation-range:entry 10% cover 40%}
  .qa-bridge-txt{display:block;margin:10px 0 0;text-align:center;font-family:"ZenOldMincho",serif;font-size:clamp(24px,2.4vw,32px);letter-spacing:.2em;color:var(--sumi)}
  #reason{padding-top:28px}
  #reason .reason{padding-left:96px}
  .reason-num{display:block;position:absolute;left:28px;top:22px;font-size:40px;line-height:1;color:#F3C01E;letter-spacing:.02em}
}
@keyframes qa-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.qa-line{animation:none}}

.up-armed{opacity:var(--up,0);transform:translateY(calc((1 - var(--up,0)) * 18px))}
.qa-line.up-armed{opacity:1;transform:scaleY(var(--up,0));transform-origin:top;animation:none}

.hero-logo{display:none}
@media (min-width:768px){
  .hero{align-items:center}
  .hero-in{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-items:center;column-gap:14vw;padding-bottom:0;
    max-width:min(1280px,92vw);
    position:relative}
  .hero-logo{display:block;grid-column:1;grid-row:1;align-self:end;justify-self:center;margin-bottom:28px;width:clamp(192px,19.2vw,272px);height:auto;filter:invert(1);
    position:relative;z-index:2;opacity:.92}
  .hero-in h1.hero-h1.sp-only{grid-column:2;grid-row:1 / 3;justify-self:center;margin:0}
  .hero-in .hero-lead.pc-only{grid-column:1;grid-row:2;align-self:start;justify-self:center;margin:0;text-align:center}
}

@media (min-width:768px){
  #craft .sec-h2{margin-bottom:0}
  .qa-bridge-q{margin:28px auto 24px}
  .qa-bridge-q .qa-line{height:140px}
  .qa-bridge:not(.qa-bridge-q) .qa-line{height:240px}
  #reason .reason{background:none;box-shadow:none;border:0;padding:0;text-align:center}
  #reason .reason::before,#reason .reason::after{content:none}
  #reason .reason-num{display:none}
  #reason .reasons{gap:48px}
}

@media (min-width:768px){

  :root{--ov:300px;--fade:var(--ov)}

  .hero-in::before{bottom:calc(-200px - var(--ov))}
  .hero{min-height:calc(min(88svh,760px) + var(--ov));padding-bottom:var(--ov);box-sizing:border-box}
  #craftreason{position:relative;z-index:1;margin-top:calc(-1 * var(--ov));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade));mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade))}
  #craft{padding-top:calc(var(--fade) + 40px)}
}

@media (min-width:768px){
  :root{--hold:45svh}
  .hero-hold::after{content:"";display:block;height:var(--hold)}
  .hero-hold > .hero{position:sticky;top:0}
  .hero{filter:blur(calc(var(--hb,0) * 8px))}
  .hero-photo{transform:translateY(calc(var(--hs,0) * 40%));filter:brightness(calc(1 - var(--hs,0) * .3))}
}

@media (min-width:768px){
  #faq .sec-h2,#contact .sec-h2{display:table;margin-left:auto;margin-right:auto}
  #contact{--sec-maku-a:0}
}

@media (min-width:768px){
  .contact-grid{grid-template-columns:minmax(0,350px) minmax(0,1fr)}
}
  .tel-box{background:#F7F2E8;padding:30px 20px 28px;border-top:4px solid #F3C01E;box-shadow:0 8px 24px rgba(90,64,0,.12)}
  .tel-box-label{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 6px;
    font-family:"NotoJP",sans-serif;font-weight:700;font-size:16px;letter-spacing:.12em;color:var(--sumi)}
  .tel-box-label::before,.tel-box-label::after{content:"";flex:none;width:18px;height:6px;border-top:2px solid var(--sumi);border-bottom:2px solid var(--sumi);box-sizing:border-box}
  .tel-box-num{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0 8px;
    font-family:"NotoJP",sans-serif;font-weight:700;font-size:32px;letter-spacing:.02em;line-height:1.1;white-space:nowrap;font-feature-settings:"palt"}
  .tel-box-num::before{content:"";flex:none;width:.72em;height:.72em;background:var(--sumi);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat}
  .tel-box-sub{margin:4px 0 0;font-size:14px;letter-spacing:.08em;color:var(--sumi)}
@media (max-width:767px){
  .tel-box-num{font-size:clamp(24px,7.6vw,32px);min-height:48px;box-sizing:border-box}
  .tel-box{padding:26px 16px 24px}
}

.cf-page{background:#F3EDE2}
.cf-lead{text-align:center;font-size:16px;line-height:2;letter-spacing:.08em;margin:0 0 64px;color:var(--sumi)}
.cf-lead .ln{display:block}
.cf-box{position:relative;max-width:1080px;margin:0 auto;background:#fff;border:5px solid #3B3330;padding:84px 60px 56px}
.cf-tel{position:absolute;left:50%;top:0;transform:translate(-50%,-62%);background:#fff;border:4px solid #3B3330;
  padding:12px 44px 10px;text-align:center;white-space:nowrap}
.cf-tel-num{display:block;font-family:"NotoJP",sans-serif;font-weight:700;font-size:32px;line-height:1.15;letter-spacing:.04em;
  color:var(--sumi);text-decoration:none;font-feature-settings:"palt"}
.cf-tel-sub{margin:2px 0 0;font-size:14px;letter-spacing:.08em;color:var(--sumi)}
.cf-form .form-notice{margin:0 0 12px}
.cf-row{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 32px;align-items:center;padding:18px 0;border-bottom:1px solid #E6E0D5}
.cf-th{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding-left:16px;font-size:16px;letter-spacing:.06em;color:var(--sumi)}
.cf-th .req{flex:none}
.cf-td input[type=text],.cf-td input[type=tel],.cf-td input[type=email],.cf-td textarea{width:100%;box-sizing:border-box;
  border:1px solid #BDB6AA;border-radius:3px;background:#fff;padding:10px 12px;font:inherit;font-size:16px;color:var(--sumi)}
.cf-td input:focus,.cf-td textarea:focus{outline:2px solid #F3C01E;outline-offset:1px;border-color:#3B3330}
.cf-td textarea{min-height:140px;resize:vertical}
.cf-check{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:16px;letter-spacing:.06em;color:var(--sumi);cursor:pointer}
.cf-check input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border:2px solid #5A524C;background:#fff;display:grid;place-content:center;cursor:pointer}
.cf-check input[type=radio]{border-radius:50%}
.cf-check input::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform .12s;background:#3B3330}
.cf-check input[type=checkbox]::before{clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.cf-check input[type=radio]::before{border-radius:50%}
.cf-check input:checked::before{transform:scale(1)}
.cf-check input:focus-visible{outline:2px solid #F3C01E;outline-offset:2px}
.cf-note{margin:6px 0 0;font-size:14px;line-height:1.7;color:var(--sumi)}
.cf-left{margin:32px 0 0;text-align:center;font-family:"NotoJP",sans-serif;font-weight:700;font-size:17px;letter-spacing:.06em;color:#B23A22}
.cf-left.is-done{color:var(--sumi)}
.cf-submit{margin:24px 0 0;text-align:center}
.cf-btn{min-width:260px;min-height:56px;padding:0 32px;border:0;border-radius:3px;background:#3B3330;color:#fff;font:inherit;font-size:16px;letter-spacing:.1em;cursor:pointer}
.cf-btn:disabled{background:#CFCAC2;color:#4A4440;cursor:not-allowed}
.cf-sent{margin:16px 0 0;text-align:center;font-size:15px;color:var(--sumi)}
.cf-form .form-privacy{margin:24px 0 0;text-align:center}
@media (max-width:767px){
  .cf-lead{font-size:15px;text-align:left;margin-bottom:56px}
  .cf-lead .ln{display:inline}
  .cf-box{border-width:4px;padding:64px 18px 36px}
  .cf-tel{padding:10px 18px 8px}
  .cf-tel-num{font-size:26px}
  .cf-row{grid-template-columns:1fr;gap:10px;padding:16px 0}
  .cf-th{padding-left:0;justify-content:flex-start}
}

.web-box{display:flex;flex-direction:column;align-items:center;justify-content:center}
.web-box-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:340px;min-height:60px;margin:10px auto 0;
  padding:0 40px;box-sizing:border-box;border-radius:999px;background:#F3C01E;color:var(--sumi);text-decoration:none;
  font-family:"NotoJP",sans-serif;font-weight:700;font-size:17px;letter-spacing:.08em;transition:background-color .2s}
.web-box-btn:hover{background:#E5B10F}
.web-box-btn::after{content:"";position:absolute;right:24px;top:50%;width:8px;height:8px;border-top:2px solid var(--sumi);border-right:2px solid var(--sumi);transform:translateY(-50%) rotate(45deg)}
.web-box-ico{flex:none;width:22px;height:22px;background:var(--sumi);
  -webkit-mask:url(../img/ico/ico-contact.png) center / contain no-repeat;mask:url(../img/ico/ico-contact.png) center / contain no-repeat}
@media (min-width:768px){
  #contact .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin:0 auto;align-items:stretch;gap:24px}
  #contact .tel-box{display:flex;flex-direction:column;justify-content:center}
}

#contact .ct-lead{text-align:center;line-height:2;letter-spacing:.06em;margin:0 0 32px}
#contact .ct-lead p{margin:0}
#contact .ct-lead p + p{margin-top:1em}
#contact .ct-lead .ln{display:block}
#contact .ct-lead .ct-ph{display:inline-block}

@media (max-width:767px){
  .web-box-btn{padding:0 28px 0 16px;gap:8px;font-size:clamp(14px,4.4vw,17px);letter-spacing:.04em;white-space:nowrap}
  .web-box-btn::after{right:16px}
  .web-box-ico{width:20px;height:20px}
}

.tel-box{padding:22px 18px 20px}
.tel-box-label{font-size:14px;gap:10px;margin-bottom:2px}
.tel-box-label::before,.tel-box-label::after{width:14px;height:5px}
.tel-box-num{font-size:26px;min-height:48px;padding:6px 0 4px;box-sizing:border-box}
.tel-box-sub{font-size:14px;margin-top:0}
.web-box-btn{min-height:50px;max-width:290px;font-size:15px;margin-top:8px}
.web-box-ico{width:19px;height:19px}
@media (min-width:768px){
  #contact .contact-grid{max-width:800px;gap:20px}
}
@media (max-width:767px){
  .tel-box{padding:20px 16px 18px}
  .tel-box-num{font-size:clamp(22px,6.6vw,26px)}
  .web-box-btn{font-size:clamp(14px,4vw,15px)}
  #contact .contact-grid{gap:14px}
}

.opening{display:none}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .opening{display:block;position:fixed;inset:0;z-index:9999;background:var(--kami);overflow:hidden;pointer-events:auto;
    animation:op-out .7s ease 3.8s forwards}
  .op-roll{position:absolute;inset:0;background:linear-gradient(90deg,#DFAA0E 0,#F2BF1C 18%,#F7C726 50%,#F3C01E 82%,#E2AD10 100%);
    background-color:transparent;background-size:100% 100%;opacity:1}
  .op-roll::before{content:"";position:absolute;inset:0;background:var(--kami);animation:op-fill .4s ease 1.9s forwards}
  .op-rs{position:absolute;top:-25svh;width:60vw;height:150svh;left:calc(var(--i) * 25vw - 17.5vw);z-index:1;
    background:url(../img/deco/roller-shade.png) 0 0 / 100% 100% no-repeat,
      linear-gradient(90deg,#DFAA0E 0,#F2BF1C 18%,#F7C726 50%,#F3C01E 82%,#E2AD10 100%);
    -webkit-mask-image:url(../img/deco/roller-edge.png),var(--rsk);mask-image:url(../img/deco/roller-edge.png),var(--rsk);
    -webkit-mask-size:100% 200%,100% 100%;mask-size:100% 200%,100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:0 0%,0 0;mask-position:0 0%,0 0;
    -webkit-mask-composite:source-in;mask-composite:intersect;
    animation:op-paint .7s cubic-bezier(.45,.05,.35,1) calc(.2s + var(--i) * .35s) forwards}
  .op-rs[style*="--i:0"]{transform:rotate(4deg);--rsk:url(../img/deco/roller-stroke-0.png)}
  .op-rs[style*="--i:1"]{transform:rotate(176deg);--rsk:url(../img/deco/roller-stroke-1.png)}
  .op-rs[style*="--i:2"]{transform:rotate(4deg);--rsk:url(../img/deco/roller-stroke-2.png)}
  .op-rs[style*="--i:3"]{transform:rotate(176deg);--rsk:url(../img/deco/roller-stroke-3.png)}
  .op-logo{position:absolute;left:50%;top:50%;z-index:2;width:min(46vw,190px);height:auto;opacity:0;
    transform:translate(-50%,-50%) scale(.92);filter:blur(6px);animation:op-logo 1s ease-out 2.2s forwards}

  html:has(#opening) .hero-col{animation-delay:calc(3.8s + .3s + var(--c) * .55s)}
}
@keyframes op-paint{from{-webkit-mask-position:0 0%,0 0;mask-position:0 0%,0 0}to{-webkit-mask-position:0 100%,0 0;mask-position:0 100%,0 0}}
@keyframes op-fill{to{opacity:0}}
@keyframes op-logo{to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}}
@keyframes op-out{to{opacity:0;visibility:hidden;pointer-events:none}}

@media (max-width:767px){
  html:not(.story-on){--ovs:120px}
  html:not(.story-on) #craftreason{position:relative;z-index:1;margin-top:calc(-1 * var(--ovs));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ovs));mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ovs))}
  html:not(.story-on) #craft-sp .naze-scene{padding:calc(48px + var(--ovs)) 0 34px}
  html:not(.story-on) .naze-center::after{content:"";position:absolute;left:50%;top:-30px;z-index:4;width:2px;margin-left:-1px;pointer-events:none;
    height:calc(30px + var(--wv) * .73 + 8px);
    background:linear-gradient(to bottom,#F3C01E 0,#F3C01E calc(30px + var(--wv) * .377),#fff calc(30px + var(--wv) * .377),#fff 100%)}
}

@media (max-width:767px){
  html:not(.story-on) .hero{min-height:min(calc(100svh - 74px * .75 + var(--ovs)),1220px);padding-bottom:var(--ovs);box-sizing:border-box}
  html:not(.story-on) .scroll-cue{bottom:calc(22px + var(--ovs) + min(calc(100svh - 74px * .75),1100px) - min(88svh,760px))}
  html:not(.story-on) .qa-sp{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 14px}
  html:not(.story-on) .qa-sp .qa-ch{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:20px;line-height:1;padding-top:3px;box-sizing:border-box}
  html:not(.story-on) .qa-sp .qa-en{font-size:12px;letter-spacing:.3em;color:var(--sumi)}
  html:not(.story-on) .qa-q.qa-sp .qa-ch{background:var(--sumi);color:#fff}
  html:not(.story-on) .qa-a.qa-sp .qa-ch{background:#fff;color:var(--sumi)}
  html:not(.story-on) .naze-center .qa-sp{position:relative;z-index:4}
}

@media (max-width:767px){
  html:not(.story-on){--ovs:160px}
  html:not(.story-on) .hero-in::before{bottom:-100vh}
  html:not(.story-on) #craftreason{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.06) calc(var(--ovs) * .2),rgba(0,0,0,.25) calc(var(--ovs) * .4),rgba(0,0,0,.55) calc(var(--ovs) * .6),rgba(0,0,0,.84) calc(var(--ovs) * .8),#000 var(--ovs));
            mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.06) calc(var(--ovs) * .2),rgba(0,0,0,.25) calc(var(--ovs) * .4),rgba(0,0,0,.55) calc(var(--ovs) * .6),rgba(0,0,0,.84) calc(var(--ovs) * .8),#000 var(--ovs))}
}

.qa-bridge-sp,.qa-bridge-txt-sp{display:none}
@media (max-width:767px){
  html:not(.story-on) .qa-bridge-sp{display:flex;flex-direction:column;align-items:center;gap:10px;margin:20px auto 0}
  html:not(.story-on) .qa-line-sp{display:block;width:2px;height:72px;background:#fff}
  html:not(.story-on) .qa-bridge-sp .qa-en{font-size:12px;letter-spacing:.3em;color:var(--sumi)}
  html:not(.story-on) .qa-bridge-txt-sp{display:block;margin:6px 0 0;text-align:center;font-family:"ZenOldMincho",serif;font-size:24px;letter-spacing:.2em;color:var(--sumi)}
}

@media (max-width:767px){
  html:not(.story-on) .qa-bridge-txt-sp{padding-left:.8em}
  html:not(.story-on) .qa-bridge-sp .qa-en{padding-left:.3em}
}

html body #craft .craft-body,
html body #craft-sp .naze-b,
html body #reason .reason p,
html body #service .svc-list,
html body #service .svc-note,
html body .faq dd .fl:not(:first-child),
html body #contact .ct-lead,
html body .ft2-nav a{
  font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;color:var(--sumi)}

@media (max-width:767px){
  .ft2 .ft-logo-img{width:150px;margin:0 auto}
}

html body .ft2-btn{font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em}
html body .ft2-btn-w{color:var(--sumi)}

body:has(.page-ttl) main :is(p,li,th,td,label,button,a.btn,a.sub-back-link,.cf-check span):not(.lead-lg):not(.sign):not(.cf-tel-num):not(.req):not(.sec-h2){
  font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em}
body:has(.page-ttl) main :is(p,li,th,td,label,.cf-check span):not(.lead-lg):not(.sign):not(.form-notice):not(.cf-left){color:var(--sumi)}

body:has(.page-ttl) main :is(p,li,th,td):not(.lead-lg):not(.sign) > :is(b,strong,span:not(.req)){font-size:inherit;letter-spacing:inherit;font-family:inherit;font-weight:inherit}
body:has(.page-ttl) .work-meta :is(b,span){font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em}

.dakara-img{display:block;height:auto;margin:0 auto}
@media (min-width:768px){ #craft .qa-bridge-txt .dakara-img{width:150px} }
@media (max-width:767px){
  html:not(.story-on) .qa-bridge-txt-sp{padding-left:0}
  html:not(.story-on) .qa-bridge-txt-sp .dakara-img{width:120px}
}
@media (min-width:768px){ #craft .qa-bridge:not(.qa-bridge-q) .qa-en{padding-left:.3em} }

.flow-text p > .ln{display:block}

@media (max-width:767px){
  #contact .contact-grid{max-width:300px;margin-left:auto;margin-right:auto;gap:12px}
  #contact .tel-box{padding:16px 14px 14px}
}

.cf-lead .cf-ph{display:inline-block}
@media (max-width:767px){
  .cf-lead{text-align:center}
  .cf-lead .ln{display:block}
}

.cf-form .form-privacy .ln{display:block}
.cf-td input::placeholder,.cf-td textarea::placeholder{font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;color:var(--sumi);opacity:1}
.cf-form .form-privacy .cf-ph{display:inline-block}
.co-note .ln{display:block}
.sec-note.sec-note-c{text-align:center}

@media (max-width:767px){
  body:has(.page-ttl) main > section:first-of-type{padding-top:48px}
  body:has(.page-ttl) .sec-note-c{margin-bottom:32px}
  body:has(.page-ttl) main > section:first-of-type .sec-h2{margin-top:0;margin-bottom:32px}
  .cf-lead{margin-bottom:79px}
  .flow-page .flow-list{margin-top:0}
  .flow-page .flow-list > .flow-item:first-child{margin-top:0;padding-top:0}
}
.sec-note-c .nw{display:inline-block}

@media (min-width:768px){
  body:has(.page-ttl) main > section:first-of-type{padding-top:80px}
  body:has(.page-ttl) .sec-note-c{margin-bottom:48px}
  body:has(.page-ttl) main > section:first-of-type .sec-h2{margin-top:0;margin-bottom:48px}
  .cf-lead{margin-bottom:103px}
  .flow-page .flow-list{margin-top:0}
  .flow-page .flow-list > .flow-item:first-child{margin-top:0;padding-top:0}
}

.about-text .lead-lg .nw{display:inline-block}
.greet .ln{word-break:auto-phrase}

body:has(.page-ttl) main .sec-h2{display:table;margin-left:auto;margin-right:auto;text-align:center}
.company-table{width:100%;max-width:760px;margin:0 auto;border-collapse:collapse;border-top:2px solid var(--sumi)}
.company-table th,.company-table td{display:table-cell;border-bottom:2px solid var(--sumi);vertical-align:middle;
  padding:14px 12px;font-size:14px;line-height:1.8;text-align:left;background:none}
.company-table th{width:30%;white-space:nowrap}
.company-table td a{display:inline-block;padding:12px 0;margin:-12px 0;min-height:48px;box-sizing:border-box;line-height:24px}
.company-table td .note-sm{display:block;font-size:14px}
body:has(.page-ttl) .table-scroll:has(.company-table){max-width:760px;margin:32px auto 0}
@media (min-width:768px){
  .company-table th,.company-table td{padding:20px 24px}
  .company-table th{width:200px}
}
@media (max-width:767px){
  .company-table th{width:96px;padding-left:8px;padding-right:8px}
  .company-table td{padding-left:8px;padding-right:8px}
}

@media (min-width:768px){ body:has(.page-ttl) .table-scroll:has(.company-table){margin-top:40px} }
.company-table td{word-break:auto-phrase}

.sign-img{text-align:right;margin-top:24px}
.sign-img img{display:inline-block;width:260px;max-width:70%;height:auto}
@media (max-width:767px){ .sign-img{text-align:left} .sign-img img{width:170px} }

html body #craft .craft-body,html body #craft-sp .naze-b,html body #reason .reason p,html body #service .svc-list,html body #service .svc-note,
html body .faq dd .fl:not(:first-child),html body #contact .ct-lead,html body .ft2-nav a{font-weight:500}
body:has(.page-ttl) main :is(p,li,th,td,label,.cf-check span):not(.lead-lg):not(.sign):not(.cf-tel-num):not(.req):not(.sec-h2):not(.cf-left){font-weight:500}
body:has(.page-ttl) .work-meta :is(b,span){font-weight:500}
.cf-td input::placeholder,.cf-td textarea::placeholder{font-weight:500}
html body .faq dt,html body .faq dd .fl:first-child{font-size:14px}
@media (min-width:768px){
  html body .sec-h2{font-size:30px}
  html body .page-ttl-jp{font-size:36px}
  html body .about-text .lead-lg{font-size:24px}
  html body #craft .craft-lead{font-size:26px}
  html body .reason-h3,html body .svc-h3{font-size:18px}
  html body .flow-ttl{font-size:20px}
}
@media (max-width:767px){
  html body main .sec-h2{font-size:min(var(--h2-sp,22px),22px)}
  html body .page-ttl-jp{font-size:30px}
  html body .about-text .lead-lg{font-size:18px}
  html body .reason-h3,html body .svc-h3,html.story-on body .naze-reason .reason-h3,html:not(.story-on) body #reason .reason-h3{font-size:17px}
  html body .flow-ttl{font-size:17px}
}

@media (min-width:768px){ html body #reason .reason-h3,html body #service .svc-h3{font-size:18px} }
@media (max-width:767px){ html body #reason .reason-h3,html body #service .svc-h3,html.story-on body .naze-reason .reason-h3{font-size:17px} }

.hd-drawer-in > a{font-size:15px;gap:14px;padding-top:15px;padding-bottom:15px}
.hd-drawer-in > a .hd-ico{width:19px;height:19px}
.hd-drawer-info .di-name{font-size:14px}
.hd-drawer-info a{font-size:15px;padding-top:12px;padding-bottom:12px}
.hd-drawer-info dd{word-break:auto-phrase}

.flow-box-ttl.fb-ico::before{width:26px;height:26px;border:0;background:var(--sumi);
  -webkit-mask:var(--fb-ico) center / contain no-repeat;mask:var(--fb-ico) center / contain no-repeat}
.fb-case{--fb-ico:url(../img/ico/flow-case.svg)} .fb-meeting{--fb-ico:url(../img/ico/flow-meeting.svg)} .fb-pay{--fb-ico:url(../img/ico/flow-pay.svg)}

@media (min-width:761px){
  a.contact-tag{width:89px;height:300px;padding:0;background:url(../img/contact-tag.svg) right center / contain no-repeat}
  a.contact-tag::before{content:none}
  a.contact-tag > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (min-width:761px){ a.contact-tag{width:107px;height:360px} }
.flow-box-ttl.fb-ico::after{content:none}

.page-ttl.ttl-r,.page-ttl.ttl-l{--ttl-sk:clamp(16px, calc(var(--sec-y) - 12px), 112px)}
.page-ttl.ttl-r{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--ttl-sk)))}
.page-ttl.ttl-l{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ttl-sk)),0 100%)}
body:has(.cf-page) main{background:#F3EDE2}

@media (max-width:767px){
html .hd-logo-sub,
html .hd-nav a,
html .hd-drawer-info,
html .hd-drawer-info .di-sub,
html .hero-note,
html .note-sm,
html .ph-label,
html .ph-label small,
html .sec-bg-label,
html .sec-bg-label small,
html .ph-note,
html .work-meta,
html .work-meta span,
html .works-caption,
html .notes,
html .flow-step p,
html .tel-box-sub,
html .form-notice,
html .field label,
html .form-privacy,
html .ft-addr,
html .ft-nav a,
html .ft-area p,
html .ft-copy,
html #reason .reason p,
html #service .svc p,
html #craft .craft-body,
html .flow-num,
html .scroll-cue,
html:root.story-on .naze-reason .reason p,
html:root:not(.story-on) #craft-sp .naze-b,
html:root.story-on .tap-cue,
html .ft2-addr,
html .ft2-tel,
html .ft2-area,
html .ft2-map span,
html .ft2 .ft-copy,
html .cf-tel-sub,
html .cf-note,
html .tel-box-label,
html:root body #craft .craft-body,
html:root body #craft-sp .naze-b,
html:root body #reason .reason p,
html:root body #service .svc-list,
html:root body #service .svc-note,
html:root body .faq dd .fl:not(:first-child),
html:root body #contact .ct-lead,
html:root body .ft2-nav a,
html:root body .ft2-btn,
html body:has(.page-ttl) main :is(p,li,th,td,label,button,a.btn,a.sub-back-link,.cf-check span):not(.lead-lg):not(.sign):not(.cf-tel-num):not(.req):not(.sec-h2),
html body:has(.page-ttl) .work-meta :is(b,span),
html .cf-td input::placeholder,
html .cf-td textarea::placeholder,
html .company-table th,
html .company-table td,
html .company-table td .note-sm,
html:root body .faq dt,
html:root body .faq dd .fl:first-child,
html .hd-drawer-info .di-name
{font-size:13px}
}

@media (max-width:767px){
  html body .ft2-nav a{min-height:48px;box-sizing:border-box;display:flex;align-items:center}
  html body .ft2-tel a{display:inline-flex;align-items:center;min-height:48px}
}

@media (max-width:767px){
  html:not(.story-on) .qa-bridge-sp{gap:24px}
  html:not(.story-on) .naze-body{padding-bottom:0}
  html:not(.story-on) #craftreason #reason{padding-top:24px}
}

.hero-choice{display:none}
.hc-btn{min-width:136px;min-height:48px;padding:0 20px;border-radius:999px;font:inherit;font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.1em;cursor:pointer}
@media (max-width:767px){
  html.story-on .hero-choice{display:flex;gap:12px;justify-content:center;position:absolute;left:0;right:0;z-index:4;
    bottom:calc(28px + 100svh - min(88svh,760px));opacity:0;pointer-events:none;transition:opacity .5s ease}
  html.story-on.hero-wait .hero-choice{opacity:1;pointer-events:auto}
  html.story-on.hero-wait .tap-cue-hero{opacity:0}
  .hc-go{background:#F3C01E;color:var(--sumi);border:0}
  .hc-skip{background:rgba(23,28,34,.35);color:#fff;border:1.5px solid rgba(255,255,255,.9)}
  .hc-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
}

main{transition:opacity .25s ease}
html.hc-fade main{opacity:0;transition:opacity .18s ease}
@media (prefers-reduced-motion:reduce){ main,html.hc-fade main{transition:none} }

@media (min-width:768px){
  #craft .qa-bridge:not(.qa-bridge-q){gap:32px}
  html body #reason{padding-top:12px}
}

@media (min-width:768px){
  html body #craft .sec-h2{font-size:28px}
  html body #craft .craft-lead{font-size:28px;font-weight:400}
  html body #craft .qa-bridge-txt .dakara-img{width:105px}
}
@media (max-width:767px){

  html:not(.story-on) body #craft-sp .naze-q-txt{display:block;width:100%;text-align:center}
  html:not(.story-on) body .naze-q-ret{width:min(62vw,300px);margin-left:auto;margin-right:auto}
  html:not(.story-on) body .naze-a{width:min(50.2vw,243px)}
  html:not(.story-on) body .qa-bridge-txt-sp .dakara-img{width:min(25vw,121px)}
}

.flow-box{border:5px solid #3B3330;box-sizing:border-box}
@media (max-width:767px){ .flow-box{border-width:4px} }

.svc-page .svc-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px;max-width:640px;margin-inline:auto}
.svc-page .svc{padding:24px 28px 26px}
html body .svc-page .svc-h3{font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:18px;line-height:1.6;margin:0 0 .5em}
.svc-page .svc .svc-list{margin-bottom:1.1em}
.svc-page .svc-list .ln{display:block}
.svc-page .flow-end{margin-top:48px}
.cf-faq{background:#F3EDE2;padding-top:0}
@media (max-width:767px){
  .svc-page .svc{padding:18px 16px 20px}
  html body .svc-page .svc-h3{font-size:17px}
  .svc-page .flow-end{margin-top:32px}
}
.svc-page .svc-note .ln{word-break:auto-phrase}
.faq dd .fl,.faq dt{word-break:auto-phrase}

.svc-promise{max-width:640px;margin:48px auto 0;text-align:center;line-height:2}
.svc-promise .ln{display:block}
.svc-promise .nw{display:inline-block}
.svc-page .svc-promise + .flow-end{margin-top:32px}
@media (max-width:767px){ .svc-promise{margin-top:36px} .svc-page .svc-promise + .flow-end{margin-top:24px} }
@media (min-width:900px){ body:has(.page-ttl) .works-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

@media (max-width:767px){ html body .hero-slide.hero-slide-6{background-image:url(../img/photos/hero-6-sp.jpg)!important;background-position:40% 45%!important} }

.work-link{display:block;color:inherit;text-decoration:none}
.work-more{display:block;margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--sumi);text-align:right}
.work-more::after{content:" ›"}
.work-link:hover .work-more,.work-link:focus-visible .work-more{text-decoration:underline}
@media (min-width:900px){ body:has(.page-ttl) .works-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.wd-crumb{font-size:14px;margin:0 0 24px;color:var(--hai)}
.wd-crumb a{color:var(--sumi)}
.wd-page .sec-h2{margin-bottom:24px}
.wd-main{max-width:960px;margin:32px auto 0}
.wd-main img,.wd-fig img{display:block;width:100%;height:auto;border-radius:6px}
.wd-page figcaption{margin-top:8px;font-size:14px;text-align:center;color:var(--sumi)}
.wd-h3{max-width:960px;margin:56px auto 20px;font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-size:20px;letter-spacing:.1em;text-align:center}
.wd-grid{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.wd-grid-2{grid-template-columns:minmax(0,1fr);max-width:480px}
.wd-fig{margin:0}
.wd-fig img{aspect-ratio:3/4;object-fit:cover}
.wd-back{text-align:center;margin:48px 0 0}
.wd-back a{color:var(--sumi);font-size:14px}
@media (max-width:767px){
  .wd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wd-h3{margin-top:40px;font-size:18px}
  .wd-crumb{margin-bottom:16px}
}
.wd-page figcaption,.wd-page .sec-note{word-break:auto-phrase}
@media (max-width:767px){ .wd-grid.wd-grid-2{grid-template-columns:minmax(0,1fr);max-width:320px} }

.nf-page{text-align:center;padding-top:96px;padding-bottom:96px}
.nf-logo{display:block;width:160px;height:auto;margin:0 auto 24px}
.nf-en{margin:0 0 12px;font-size:14px;letter-spacing:.3em;color:var(--sumi)}
.nf-h1{margin:0 0 20px;font-family:"ZenOldMincho",serif;font-weight:400;font-size:28px;line-height:1.6;letter-spacing:.1em;color:var(--sumi)}
.nf-note{margin:0;line-height:2}
.nf-note .nw{display:inline-block}
@media (max-width:767px){ .nf-page{padding-top:64px;padding-bottom:64px} .nf-logo{width:130px} .nf-h1{font-size:22px} }

.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-sent{margin:24px 0 0;padding:16px 18px;border:2px solid #3B3330;background:#FBFBF9;font-weight:700;line-height:1.9;text-align:center;color:var(--sumi)}
.cf-sent.is-ng{border-color:#B23A22;color:#7A2414}

.notes .mk-u{color:var(--sumi);background-image:var(--ki-line);background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.area-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:stretch;margin-top:8px}
.area-panel{margin:0;padding:clamp(28px,4vw,52px);border-radius:14px}
.area-panel-main{display:flex;flex-direction:column;justify-content:center;text-align:center;background:var(--usu);color:var(--sumi)}
#area .area-panel-main p,#area .area-panel-main b{color:var(--sumi)}
#area .area-panel-main .area-note-s{color:var(--hai)}
#area .area-panel-main .nw{display:inline-block}
#area .area-lead{margin:0 0 22px;font-family:"ZenOldMincho",serif;font-size:26px;line-height:1.75;letter-spacing:.08em}
#area .area-note{margin:0 0 14px;font-size:15px;line-height:1.95;letter-spacing:.06em}
#area .area-note-s{margin:0;font-size:14px}
@media (max-width:767px){ #area .area-lead{font-size:21px;margin-bottom:16px} #area .area-note{font-size:14px} #area .area-note-s{font-size:13px} }
.area-lead{margin:0 0 22px;font-family:"ZenOldMincho",serif;font-size:24px;line-height:1.7;letter-spacing:.08em}
.area-pref{font-weight:400;background-image:var(--ki-line);background-repeat:no-repeat}
.area-note{margin:0 0 14px;font-size:15px;line-height:1.95;letter-spacing:.06em}
.area-note-s{margin:0;font-size:14px;color:#E9E6DD}
.area-panel-map{display:flex;flex-direction:column;justify-content:center;background:#fff;box-shadow:0 10px 30px rgba(46,52,61,.08);border:1px solid var(--sen)}
.area-src{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--hai);text-align:right}

.amap{display:block;width:100%;height:auto;overflow:hidden}
.amap-around path{fill:#EFEDE6;stroke:#fff;stroke-width:2}
.amap-areas path{fill:var(--gunjo);stroke:#fff;stroke-width:3;stroke-linejoin:round}
.amap-labels text{font-family:"NotoJP",sans-serif;font-size:40px;font-weight:700;letter-spacing:.06em;fill:var(--sumi);text-anchor:middle;dominant-baseline:middle;
  paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:7;stroke-linejoin:round;pointer-events:none}
.amap-dot{fill:#fff;stroke:var(--sumi);stroke-width:5}
.amap-pulse{fill:var(--sumi);opacity:.18;transform-box:fill-box;transform-origin:center;animation:amap-pulse 2.6s ease-in-out infinite}
.amap-home-name{font-family:"NotoJP",sans-serif;font-size:38px;font-weight:700;letter-spacing:.1em;fill:#fff;text-anchor:middle;
  paint-order:stroke;stroke:var(--sumi);stroke-width:9;stroke-linejoin:round;pointer-events:none}
@keyframes amap-pulse{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.7);opacity:.04}}

.area-panel-map.rv-armed .amap-areas path{fill:#EFEDE6}
.area-panel-map.rv-armed .amap-labels text,.area-panel-map.rv-armed .amap-home{opacity:0}
.area-panel-map.rv-armed.rv-in .amap-areas path{animation:amap-fill .7s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(.2s + var(--i) * .32s)}
.area-panel-map.rv-armed.rv-in .amap-labels text{animation:amap-fade .5s ease both;animation-delay:calc(.45s + var(--i) * .32s)}
.area-panel-map.rv-armed.rv-in .amap-home{animation:amap-drop .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:1.7s}
@keyframes amap-fill{from{fill:#EFEDE6}to{fill:var(--gunjo)}}
@keyframes amap-fade{from{opacity:0}to{opacity:1}}
@keyframes amap-drop{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}

@media (max-width:767px){
  .area-grid{grid-template-columns:1fr;gap:16px}
  .area-panel{padding:28px 20px}
  .area-lead{font-size:20px;margin-bottom:16px}
  .area-note{font-size:14px}
  .area-note-s{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .amap-pulse{animation:none}
}

.arw-top{fill:url(#amap-arw-g);stroke:#fff;stroke-width:2.5;stroke-linejoin:round}
.arw-side{fill:#0B0E12;opacity:.72}

.area-panel-map.rv-armed.rv-in .amap-labels text{animation-delay:calc(3.2s + var(--i) * .3s)}
.flow-text .nw{display:inline-block}