@charset "UTF-8";

:root{
  --tex:url(../img/deco/06-paper-texture.svg);
  --tex-size:160px 160px;
}
body,.sec,.sec-usu,.sec-contact,.ft{ background-blend-mode:soft-light; }

.hills-wrap{ position:relative; line-height:0; margin-top:clamp(40px,6vw,80px);

  margin-bottom:calc(var(--sec-y) * -1) }
.hills{ display:block; width:100%; height:clamp(96px,14vw,300px); border:0 }

.tree{ position:absolute; display:block; height:auto; pointer-events:none }
.tree-1{ left:8%;  bottom:38%; width:clamp(28px,4.4vw,74px) }
.tree-2{ left:15%; bottom:34%; width:clamp(20px,3.1vw,52px) }
.tree-3{ right:12%; bottom:36%; width:clamp(24px,3.8vw,64px) }
@media (max-width:560px){ .tree-3{ display:none } }

.works-wrap,.sec{ position:relative }
.sec > .wrap{ position:relative; z-index:1 }

.house-clip{ clip-path:polygon(50% 2.2%, 97.8% 44.8%, 97.8% 97.8%, 2.2% 97.8%, 2.2% 44.8%) }
.works-grid .work{ background:transparent }
.works-grid .work-meta{ padding-left:0; padding-right:0 }

.roof-top{
  -webkit-mask-image:url(../img/deco/07-roof-notch.svg),linear-gradient(#000,#000);
          mask-image:url(../img/deco/07-roof-notch.svg),linear-gradient(#000,#000);
  -webkit-mask-size:100% 120px,100% calc(100% - 119px);
          mask-size:100% 120px,100% calc(100% - 119px);
  -webkit-mask-position:top left,bottom left;
          mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
  padding-top:clamp(120px,14vw,180px);
}

.contact-tag{
  position:fixed; right:0; top:50%; z-index:65;
  display:flex; flex-direction:row-reverse; align-items:center; justify-content:center;
  gap:10px;
  width:132px; height:300px; padding:0 0 0 12px;
  color:var(--sumi); text-decoration:none;
  background:url(../img/deco/05-contact-tag.svg) 0 0 / 100% 100% no-repeat;

  opacity:0; transform:translateY(-50%); pointer-events:none;
  transition:opacity .4s ease-out, transform .25s ease-out;
}
.contact-tag.show{ opacity:1; transform:translateY(-50%); pointer-events:auto }
.contact-tag.show:hover,
.contact-tag.show:focus-visible{ transform:translateY(-50%) translateX(-6px) }
.contact-tag__label{ writing-mode:vertical-rl; font-size:19px; letter-spacing:.18em; line-height:1.4 }
.contact-tag__en{ writing-mode:vertical-rl; font-family:"JosefinSans","NotoJP",sans-serif;
  font-size:22px; letter-spacing:.02em; color:var(--sumi) }

@media (max-width:760px){ .contact-tag{ display:none } }

@media (min-width:761px){ .fixcta{ display:none } }

:root{
  --skew-2e:clamp(16px, calc(var(--sec-y) - 12px), 112px);
}

.skew-band{ position:relative }

.skew-band::before,
.skew-band::after{
  content:""; position:absolute; pointer-events:none; z-index:1;
  left:0; right:0;
  height:calc(var(--skew-2e) + 48px);
  background-color:var(--skew-bg,var(--kami));
  background-image:var(--tex); background-size:var(--tex-size);
  background-blend-mode:soft-light;
}

.skew-band::before{
  top:calc(var(--skew-2e) * -1);
  clip-path:polygon(0 var(--skew-2e), 100% 0, 100% 100%, 0 100%);
}

.skew-band::after{
  bottom:calc(var(--skew-2e) * -1);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--skew-2e)), 0 100%);
}

#service > .wrap,
#service > .svc-stick > .wrap,
#area    > .wrap,
#faq     > .wrap{ position:relative; z-index:2 }

.hills-ft{ margin-top:clamp(24px,4vw,56px) }

@media (prefers-reduced-motion:reduce){
  .sparkle--twinkle{ animation:none; opacity:1 }
  .contact-tag{ transition:none }
  .contact-tag.show:hover,
  .contact-tag.show:focus-visible{ transform:translateY(-50%) }
}