@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;}
body{font-family:'Noto Sans JP',sans-serif;background:#1a1a1a;display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;}
.bg-left{position:fixed;inset:0 50% 0 0;background:linear-gradient(160deg,#1a2a3a 0%,#0f1e2e 100%);transition:right 0.6s cubic-bezier(0.4,0,0.2,1);z-index:0;}
.bg-right{position:fixed;inset:0 0 0 50%;background:linear-gradient(160deg,#3d2010 0%,#2a1408 100%);transition:left 0.6s cubic-bezier(0.4,0,0.2,1);z-index:0;}
body.hover-left .bg-left{right:35%;}
body.hover-left .bg-right{left:65%;}
body.hover-right .bg-right{left:35%;}
body.hover-right .bg-left{right:65%;}
.divider{position:fixed;top:0;left:50%;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.12) 30%,rgba(255,255,255,0.12) 70%,transparent);z-index:1;pointer-events:none;transition:left 0.6s cubic-bezier(0.4,0,0.2,1);}
body.hover-left .divider{left:35%;}
body.hover-right .divider{left:65%;}
.center-logo{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;transition:opacity 0.4s ease;}
body.hover-left .center-logo,body.hover-right .center-logo{opacity:0;}
/* ロゴ画像: filter で暗くならないよう brightness強制 */
.center-logo img{
  width:52px;height:52px;border-radius:8px;object-fit:contain;
  background:transparent;
  border:none;
  box-shadow:0 3px 12px rgba(0,0,0,0.3);
  filter:none;
}
.center-logo .brand{font-family:'Noto Serif JP',serif;font-size:1.3rem;font-weight:900;color:rgba(255,255,255,0.85);letter-spacing:0.1em;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,0.4);}
.split{position:relative;z-index:2;width:100%;height:100vh;display:grid;grid-template-columns:1fr 1fr;}
.svc{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;padding:40px 32px;position:relative;overflow:hidden;cursor:pointer;outline:none;}
.svc::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.4s;}
.svc-junk::after{background:radial-gradient(ellipse at center,rgba(255,215,0,0.07) 0%,transparent 70%);}
.svc-ihin::after{background:radial-gradient(ellipse at center,rgba(212,169,122,0.07) 0%,transparent 70%);}
.svc:hover::after{opacity:1;}
.svc-content{display:flex;flex-direction:column;align-items:center;gap:22px;position:relative;z-index:1;transform:translateY(0);transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);}
.svc:hover .svc-content{transform:translateY(-8px);}
/* 不用品: 正方形→丸角でトラック画像を綺麗に */
.svc-img-junk{
  width:220px;height:220px;border-radius:20px;object-fit:cover;
  border:3px solid rgba(255,215,0,0.2);
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s ease,border-color 0.4s ease;
}
.svc-junk:hover .svc-img-junk{transform:scale(1.06);border-color:rgba(255,215,0,0.5);box-shadow:0 16px 50px rgba(255,215,0,0.18),0 8px 30px rgba(0,0,0,0.4);}
/* 遺品整理: 丸型ロゴ + 濃く表示 */
.svc-img-ihin{width:220px;height:220px;border-radius:20px;object-fit:contain;background:transparent;border:none;box-shadow:0 10px 40px rgba(0,0,0,0.35);filter:none;transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s ease;}
.svc-ihin:hover .svc-img-ihin{width:220px;height:220px;border-radius:20px;object-fit:contain;background:transparent;border:none;box-shadow:0 10px 40px rgba(0,0,0,0.35);filter:none;transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s ease;}
.svc-title{font-family:'Noto Serif JP',serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;line-height:1.3;text-align:center;letter-spacing:0.05em;transition:color 0.3s;}
.svc-junk .svc-title{color:#FFD700;}
.svc-ihin .svc-title{color:#E8C898;}
.svc-sub{font-size:0.7rem;letter-spacing:0.2em;opacity:0.4;text-transform:uppercase;color:#fff;font-weight:400;}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:260px;}
.tag{font-size:0.69rem;font-weight:700;padding:4px 12px;border-radius:50px;transition:all 0.3s;}
.svc-junk .tag{background:rgba(255,215,0,0.1);color:#FFD700;border:1px solid rgba(255,215,0,0.25);}
.svc-junk:hover .tag{background:rgba(255,215,0,0.16);border-color:rgba(255,215,0,0.4);}
.svc-ihin .tag{background:rgba(232,200,152,0.1);color:#E8C898;border:1px solid rgba(232,200,152,0.25);}
.svc-ihin:hover .tag{background:rgba(232,200,152,0.18);border-color:rgba(232,200,152,0.45);}
.svc-btn{display:flex;align-items:center;gap:8px;font-size:0.88rem;font-weight:700;padding:12px 28px;border-radius:50px;opacity:0;transform:translateY(8px);transition:opacity 0.35s,transform 0.35s;}
.svc:hover .svc-btn{opacity:1;transform:translateY(0);}
.svc-junk .svc-btn{background:#FFD700;color:#000;}
.svc-ihin .svc-btn{background:#8B5E3C;color:#fff;}
.arrow-hint{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:18px;opacity:1;transition:opacity 0.5s;pointer-events:none;}
body.interacted .arrow-hint{opacity:0;}
.ah-left,.ah-right{font-size:0.7rem;color:rgba(255,255,255,0.22);letter-spacing:0.1em;font-weight:400;}
.ah-sep{width:1px;height:18px;background:rgba(255,255,255,0.1);}
@media(max-width:640px){
  html,body{overflow:auto;}
  .bg-left{inset:0 0 50% 0;right:0;}
  .bg-right{inset:50% 0 0 0;left:0;}
  .divider{top:50%;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1) 30%,rgba(255,255,255,0.1) 70%,transparent);}
  body.hover-left .divider{top:35%;left:0;}
  body.hover-right .divider{top:65%;left:0;}
  .split{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:100vh;}
  .svc-img-junk{width:150px;height:150px;border-radius:14px;}
  .svc-img-ihin{width:220px;height:220px;border-radius:20px;object-fit:contain;background:transparent;border:none;box-shadow:0 10px 40px rgba(0,0,0,0.35);filter:none;transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s ease;}
  .svc-title{font-size:1.3rem;}
  .arrow-hint{display:none;}
}