.showcase-hero{position:relative;min-height:calc(100svh - 116px);height:760px;overflow:hidden;background:#f3f0e8;isolation:isolate}.showcase-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(37,63,50,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(37,63,50,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,#000,transparent 85%);z-index:-1}.showcase-center{position:absolute;z-index:10;left:50%;top:48%;width:min(42vw,520px);transform:translate(-50%,-50%);text-align:center}.showcase-center h1{margin:0;line-height:1}.showcase-center h1 img{width:min(31vw,430px);height:auto;margin:auto;opacity:0;transform:scale(.88);filter:blur(5px)}.is-showcase-ready .showcase-center h1 img{animation:logo-arrive 1.05s cubic-bezier(.22,.8,.32,1) .1s forwards}.showcase-center>p{font-size:13px;letter-spacing:.24em;margin-top:25px;opacity:0;transform:translateY(10px)}.is-showcase-ready .showcase-center>p{animation:soft-arrive .7s ease 1.45s forwards}.showcase-actions{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:29px;opacity:0;transform:translateY(12px)}.is-showcase-ready .showcase-actions{animation:soft-arrive .7s ease 1.75s forwards}.button-green{background:var(--green);color:var(--paper);border:1px solid var(--green)}.button-green:hover{background:#3b5845}.showcase-about{font-size:13px;border-bottom:1px solid var(--green);padding:5px 0}.showcase-products{position:absolute;inset:0}.product-float{position:absolute;display:block;overflow:hidden;background:#d9d5c9;box-shadow:0 15px 36px rgba(35,56,45,.15);opacity:0;transform:translate(var(--from-x,0),var(--from-y,0)) scale(.78) rotate(var(--from-r,0deg));transition:box-shadow .3s,filter .3s}.product-float img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.product-float:hover{z-index:4;box-shadow:0 20px 42px rgba(35,56,45,.26)}.product-float:hover img{transform:scale(1.05)}.is-showcase-ready .product-float{animation:product-arrive .85s cubic-bezier(.16,.8,.28,1) var(--delay) forwards}.product-float-1{left:3.5%;top:6%;width:clamp(115px,13vw,190px);height:clamp(150px,17vw,250px);--from-x:22vw;--from-y:22vh;--from-r:-6deg;--delay:.65s;transform-origin:bottom right}.product-float-2{left:20%;top:2%;width:clamp(135px,16vw,240px);height:clamp(100px,11vw,165px);--from-x:10vw;--from-y:25vh;--from-r:5deg;--delay:.82s;transform-origin:bottom right}.product-float-3{right:19%;top:3%;width:clamp(105px,12vw,175px);height:clamp(140px,16vw,230px);--from-x:-10vw;--from-y:22vh;--from-r:-4deg;--delay:.72s;transform-origin:bottom left}.product-float-4{right:3%;top:11%;width:clamp(125px,14vw,205px);height:clamp(165px,18vw,265px);--from-x:-21vw;--from-y:19vh;--from-r:6deg;--delay:1.02s;transform-origin:bottom left}.product-float-5{left:4%;bottom:4%;width:clamp(120px,15vw,215px);height:clamp(155px,18vw,260px);--from-x:20vw;--from-y:-20vh;--from-r:5deg;--delay:1.12s;transform-origin:top right}.product-float-6{left:23%;bottom:2%;width:clamp(135px,16vw,235px);height:clamp(105px,11vw,165px);--from-x:8vw;--from-y:-23vh;--from-r:-5deg;--delay:.94s;transform-origin:top right}.product-float-7{right:22%;bottom:2%;width:clamp(125px,14vw,210px);height:clamp(150px,17vw,245px);--from-x:-8vw;--from-y:-20vh;--from-r:4deg;--delay:1.22s;transform-origin:top left}.product-float-8{right:3%;bottom:5%;width:clamp(110px,13vw,190px);height:clamp(145px,16vw,235px);--from-x:-22vw;--from-y:-18vh;--from-r:-5deg;--delay:.88s;transform-origin:top left}.showcase-scroll{position:absolute;z-index:12;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px;letter-spacing:.2em;opacity:0}.is-showcase-ready .showcase-scroll{animation:soft-arrive .7s ease 2.1s forwards}.showcase-scroll i{width:1px;height:28px;background:var(--green);animation:scroll-pulse 1.8s ease-in-out infinite;transform-origin:top}.site-header{transition:opacity .5s ease}.showcase-pending .site-header{opacity:0}
@keyframes logo-arrive{to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes product-arrive{to{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}@keyframes soft-arrive{to{opacity:1;transform:translateY(0)}}@keyframes scroll-pulse{0%,100%{transform:scaleY(.35);opacity:.35}50%{transform:scaleY(1);opacity:1}}
@media(max-width:1100px){.showcase-hero{min-height:calc(100svh - 100px);height:680px}.showcase-center{width:44vw}.product-float-2{left:18%}.product-float-3{right:17%}.product-float-6{left:20%}.product-float-7{right:20%}}
@media(max-width:760px){.showcase-hero{min-height:calc(100svh - 90px);height:690px}.showcase-hero:before{background-size:34px 34px}.showcase-center{top:46%;width:76vw}.showcase-center h1 img{width:min(68vw,310px)}.showcase-center>p{font-size:11px;line-height:1.9;letter-spacing:.15em;margin-top:18px}.showcase-actions{gap:16px;margin-top:22px;flex-direction:column}.showcase-actions .button{min-height:50px;padding:10px 24px;font-size:13px}.showcase-about{font-size:12px}.product-float{box-shadow:0 10px 24px rgba(35,56,45,.14)}.product-float-1{left:-5%;top:4%;width:105px;height:140px}.product-float-2{left:28%;top:1%;width:120px;height:82px}.product-float-3{right:-4%;top:5%;width:92px;height:125px}.product-float-4{display:none}.product-float-5{left:-4%;bottom:5%;width:105px;height:140px}.product-float-6{left:31%;bottom:2%;width:120px;height:82px}.product-float-7{right:-4%;bottom:5%;width:100px;height:135px}.product-float-8{display:none}.showcase-scroll{bottom:12px}.showcase-scroll i{height:22px}}
@media(max-width:380px){.showcase-hero{height:620px}.product-float-1,.product-float-5{width:88px;height:118px}.product-float-2,.product-float-6{width:105px;height:72px}.product-float-3,.product-float-7{width:82px;height:112px}.showcase-center{top:46%}}
@media(prefers-reduced-motion:reduce){.showcase-center h1 img,.showcase-center>p,.showcase-actions,.product-float,.showcase-scroll{opacity:1;transform:none;filter:none;animation:none!important}.showcase-scroll i{animation:none}.showcase-pending .site-header{opacity:1}}

/* 木色の細い額縁と生成りのマットで、作品を飾ったような写真に。 */
.product-float {
  --frame-color: #a78259;
  --frame-edge: #75573c;
  --rest-angle: -3deg;
  padding: clamp(8px, 1vw, 15px);
  padding-bottom: clamp(15px, 1.6vw, 24px);
  border: 5px solid var(--frame-color);
  border-radius: 3px;
  background: #fcf9f1;
  outline: 1px solid var(--frame-edge);
  outline-offset: -1px;
  box-shadow:
    inset 0 0 0 1px #ded5c4,
    inset 0 2px 5px #6b50351a,
    2px 4px 4px #342b2024,
    5px 15px 24px #342b201c;
  transform-origin: center;
  transition: box-shadow .3s ease;
}
.product-float img {
  border-radius: 1px;
  outline: 1px solid #443b2820;
  outline-offset: -1px;
}
.product-float:hover,
.product-float:focus-visible {
  z-index: 4;
  box-shadow: inset 0 0 0 1px #ded5c4, 3px 6px 8px #342b2024, 8px 22px 32px #342b2029;
}
.product-float:hover img { transform: scale(1.015); }
.product-float:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.product-float-1 { --rest-angle: -5deg; }
.product-float-2 { --rest-angle: 3deg; top: 4%; }
.product-float-3 { --rest-angle: -3deg; top: 5%; }
.product-float-4 { --rest-angle: 4deg; --frame-color: #425647; --frame-edge: #293c30; }
.product-float-5 { --rest-angle: 3deg; }
.product-float-6 { --rest-angle: -4deg; --frame-color: #425647; --frame-edge: #293c30; bottom: 4%; }
.product-float-7 { --rest-angle: 4deg; bottom: 4%; }
.product-float-8 { --rest-angle: -3deg; }
@keyframes product-arrive {
  to { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--rest-angle)); }
}
@media (max-width: 760px) {
  .product-float {
    border-width: 3px;
    padding: 6px;
    padding-bottom: 12px;
    box-shadow: inset 0 0 0 1px #ded5c4, 1px 3px 3px #342b2020, 3px 9px 15px #342b201c;
  }
  .product-float-1 { left: 3%; top: 5%; }
  .product-float-2 { left: 35%; top: 3%; }
  .product-float-3 { right: 3%; top: 8%; }
  .product-float-5 { left: 3%; bottom: 10%; }
  .product-float-6 { left: 35%; bottom: 8%; }
  .product-float-7 { right: 3%; bottom: 11%; }
}
@media (prefers-reduced-motion: reduce) {
  .product-float { transform: rotate(var(--rest-angle)); }
}