@import "_variables.css";
/* 保持: スクロールバーによる横ズレを防止 */
html{scrollbar-gutter:stable}

*{box-sizing:border-box}
body{font-family:var(--ff-sans);color:var(--text);background:var(--bg);margin:0;line-height:1.6}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}

/* Header: split top (wood) and bottom (accent) */
.site-header{background:transparent}
.header-inner{display:block;padding:0}
.header-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:12px 24px;
  position:relative;
  background-color:var(--wood-light);
  /* 画像を優先して表示（フォールバックで色を残す） */
  /* CSS は site/styles にあるため、画像は ../images/ にある（site/images） */
  background-image: url('../images/bg-wood.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  border-bottom:1px solid rgba(139,94,60,0.08);
  z-index:5;
}
.header-bottom{display:flex;justify-content:center;align-items:center;padding:10px 0;background:var(--primary);color:var(--primary-contrast);gap:12px;border-top:none}
.subnav{
  display:flex;
  gap:12px;
  max-width:840px;
  margin:0 auto;
  padding:0 24px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.subnav a{
  flex:0 1 auto;
  text-align:center;
  color:var(--primary-contrast);
  text-decoration:none;
  padding:10px 12px;
  border-radius:6px;
  font-weight:700;
  font-size:1.06rem;
  white-space:nowrap;
}
.subnav a:hover{background:rgba(255,255,255,0.08)}
/* header actions (右側ボタン群) */
.header-actions{display:flex;align-items:center;gap:8px;justify-self:end}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo img{height:48px}
.nav{display:flex;gap:16px;justify-self:end;margin-right:12px}
.nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:6px}
.nav a:hover{background:rgba(143,203,155,0.08)}
.mobile-menu-button{display:none;border:0;background:transparent;font-size:20px}

/* Hero */
.hero{padding:40px 0;text-align:center}
.hero h1{font-size:1.8rem;margin:0 0 8px;color:var(--accent)}
.hero p{color:var(--muted);margin:0}

/* Tiles for links */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:24px 0}
.tile{background:linear-gradient(180deg, rgba(143,203,155,0.06), rgba(255,255,255,0));border:1px solid rgba(139,94,60,0.04);padding:18px;border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:flex-start;border-left:4px solid transparent}
.tile h3{margin:0 0 8px;color:var(--accent)}
.tile p{margin:0;color:var(--muted)}
.tile:hover{border-left-color:var(--primary);transform:translateY(-4px)}

/* Product carousel */
.product-strip{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory}
.product-card{min-width:180px;background:linear-gradient(180deg,#fff,#fcfff9);border-radius:10px;padding:12px;box-shadow:var(--shadow);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;border:1px solid rgba(11,20,14,0.04)}
.product-card img{width:140px;height:90px;object-fit:cover;border-radius:6px}
.product-card .name{margin-top:10px;font-size:0.98rem;color:var(--accent);font-weight:600}

/* Carousel wrapper and controls */
.product-carousel{position:relative}
.product-strip{padding:18px 36px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.product-strip::-webkit-scrollbar{display:none}
.product-strip{-ms-overflow-style:none;scrollbar-width:none}

.product-card{transition:transform .18s ease,box-shadow .18s ease}
.product-card:hover{transform:translateY(-8px) scale(1.04);box-shadow:0 14px 36px rgba(11,20,14,0.12)}

.product-prev,.product-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:linear-gradient(180deg,rgba(139,94,60,0.95),rgba(115,72,46,0.95));
  color:#fff;
  width:40px;
  height:64px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  cursor:pointer;
  opacity:0.95;
  z-index:1001;
}
.product-prev{left:6px}
.product-next{right:6px}
.product-prev:hover,.product-next:hover{opacity:1}

/* reveal animations */
.tile, .product-card, .hero{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal{opacity:1;transform:translateY(0)}

@media (max-width:480px){
  .product-prev,.product-next{width:36px;height:48px;font-size:1.25rem}
  .product-strip{padding:12px}
  /* 小画面ではハンバーガーと重ならないように配置 */
  .phone-btn{width:48px;height:48px}
}

/* sticky header when scrolling */
.site-header.scrolled{padding:8px 24px;box-shadow:0 8px 24px rgba(11,20,14,0.12);position:sticky;top:0;z-index:999}

/* mobile nav open */
.nav.open{display:flex;position:fixed;right:0;top:0;bottom:0;width:260px;background:linear-gradient(180deg,var(--wood-light),var(--wood-dark));padding:24px;transform:translateX(0);transition:transform .28s ease;flex-direction:column;gap:12px;z-index:1100;box-shadow:-10px 0 30px rgba(11,20,14,0.12)}
body.nav-open{overflow:hidden}

/* modal */
.modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:flex;align-items:center;justify-content:center;z-index:2000}
.modal{max-width:900px;width:calc(100% - 32px)}
.modal .modal-body{background:var(--bg);border-radius:12px;padding:18px;box-shadow:var(--shadow);text-align:center;position:relative}
.modal .modal-body img{width:100%;height:auto;border-radius:8px}
.modal .modal-close{position:absolute;right:12px;top:12px;border:0;background:var(--accent);color:#fff;border-radius:6px;padding:6px 8px;cursor:pointer}

/* focus styles for keyboard users */
body.show-focus a:focus, body.show-focus button:focus, body.show-focus .product-card:focus{outline:3px solid rgba(143,203,155,0.5);outline-offset:3px}

/* grabbing cursor while dragging */
.product-strip.dragging{cursor:grabbing;cursor:-webkit-grabbing}

/* Phone icon (ヘッダー内に収める) */
.phone-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  background:linear-gradient(135deg,var(--primary),#6fb78a);
  color:#fff;
  width:56px;
  height:56px;
  border-radius:50%;
  box-shadow:var(--shadow);
  text-decoration:none;
  border:0;
}

.phone-btn svg{display:block;width:20px;height:20px;fill:currentColor}

/* Footer */
.site-footer{border-top:1px solid rgba(139,94,60,0.06);background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02));color:var(--muted)}
.site-footer .footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:24px;
  background:#2e8b57;
  border-radius:0;
  width:100vw;
  max-width:100%;
  margin-left:50%;
  transform:translateX(-50%);
}
.site-footer .office{background:linear-gradient(180deg,#ffffff,#fbfbf8);padding:16px;border-radius:8px;border:1px solid rgba(11,20,14,0.04);box-shadow:var(--shadow)}
.site-footer .office h4{margin:0 0 8px;color:var(--accent);font-size:1.02rem}
.site-footer .office address{font-style:normal;color:var(--muted);display:block;margin-bottom:8px}
.site-footer .office p{margin:0;color:var(--text)}
.site-footer .copyright{padding:12px 0;text-align:center;color:var(--muted)}
@media (max-width:768px){.site-footer .footer-grid{grid-template-columns:1fr;padding:16px 0;border-radius:0;width:100vw;max-width:100%;margin-left:50%;transform:translateX(-50%)}.site-footer .office{padding:12px}}

/* Responsive */
@media (max-width:768px){
  .nav{display:none;margin-right:0}
  /* モバイルではハンバーガーを表示 */
  .mobile-menu-button{display:block;z-index:1101}
  .phone-btn{width:48px;height:48px}
  .header-top{padding:12px}
  /* 2段目ヘッダーを縦並びにして読みやすくする */
  .header-bottom{flex-direction:column;align-items:center;gap:6px;padding:8px 12px}
  .subnav{flex-wrap:wrap;justify-content:center;gap:8px}
}