* { box-sizing: border-box; }
body { margin: 0; background: #eeeeec; font-family: YakuHanJP, Roboto, 'hiragino kaku gothic pron', 'hiragino sans', 'noto sans jp', sans-serif; color: #232323; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.8; }
.biz-card:hover, .biz-card.hover-sim { opacity: 1; }

.page-wrap { min-height: 100vh; }

.biz-card { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; box-shadow: 0 6px 14px rgba(0,0,0,0.22); border-radius:8px; padding:28px; min-height:260px; display:flex; flex-direction:column; overflow:hidden; }
.biz-card:hover, .biz-card.hover-sim { transform: translateY(-6px) scale(1.06); box-shadow: 0 18px 32px rgba(0,0,0,0.32); z-index:2; }

.biz-card { opacity:0; }
.biz-card.is-visible { animation: cardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.biz-card.is-revealed { opacity:1; }
@keyframes cardReveal { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
.biz-card:nth-child(1).is-visible { animation-delay: 0s; }
.biz-card:nth-child(2).is-visible { animation-delay: .12s; }
.biz-card:nth-child(3).is-visible { animation-delay: .24s; }
.biz-card:nth-child(4).is-visible { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .biz-card { opacity:1; }
  .biz-card.is-visible { animation: none; }
}
.biz-card.tall { grid-row: span 2; min-height:544px; }
.biz-card.wide { grid-column: span 2; }
.product-card { min-height:0; aspect-ratio: 4 / 5; position:relative; }
.product-card .card-title { position:relative; z-index:2; }
.product-3d { position:absolute; inset:0; z-index:1; }
.product-3d canvas { display:block; width:100%; height:100%; }
.card-title { color:#fff; font-size:22px; font-weight:900; line-height:1.3; }
.mascot, .mascot-lg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mascot { width:180px; margin:auto; display:block; }
.mascot-lg { width:260px; margin:auto; display:block; }
.biz-card:hover .mascot, .biz-card:hover .mascot-lg,
.biz-card.hover-sim .mascot, .biz-card.hover-sim .mascot-lg { transform: scale(1.18); }
input, textarea { font-family: 'Noto Sans JP', sans-serif; }

.site-header { position: sticky; top: 0; z-index: 1000; background: #eeeeec; transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.site-header.is-scrolled { background: rgba(24,24,24,0.85); box-shadow: 0 2px 12px rgba(0,0,0,0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; max-width: 1200px; margin: 0 auto; padding: 20px 48px; }
.logo-img { height:40px; display:block; transition: filter 0.25s ease; }
.site-header.is-scrolled .logo-img { filter: invert(1); }
.site-nav { display:flex; align-items:center; gap: 36px; font-size: 15px; font-weight: 500; white-space:nowrap; flex-shrink:0; }
.nav-link { color:#232323; transition: color 0.25s ease; }
.site-header.is-scrolled .nav-link { color:#fff; }
.lang-badge { width:34px; height:34px; border-radius:50%; border:1px solid #232323; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:none; font-family:inherit; color:#232323; cursor:pointer; transition: border-color 0.25s ease, color 0.25s ease; }
.site-header.is-scrolled .lang-badge { border-color:#fff; color:#fff; }
.mobile-link.lang-toggle { cursor:pointer; }

.hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; }
.hamburger-line { display:block; width:22px; height:2px; background:#232323; transition: background-color 0.25s ease; }
.site-header.is-scrolled .hamburger-line { background:#fff; }

.mobile-menu { display:none; flex-direction:column; gap:8px; padding:12px 16px 20px; }
.site-header.is-open .mobile-menu { display:flex; }
.mobile-link { display:block; color:#fff; padding:14px 16px; font-size:16px; font-weight:500; border-radius:10px; background:rgba(24,24,24,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.hero { text-align:center; padding: 40px 24px 64px; }
.hero-logo-img { height:180px; margin:0 auto; display:block; }

.section-container { max-width:1200px; margin:0 auto; padding:0 48px 80px; }
.section-title { font-size:26px; font-weight:900; margin:0 0 24px; }
.card-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; }

/* Detail pages (scenario, arcade, video, tabletop, message, company) */
.detail-hero { text-align:center; padding: 56px 24px; color:#fff; }
.detail-hero .mascot-lg { margin: 20px auto 0; }
.detail-title { font-size: 34px; font-weight:900; margin:0; }
.detail-body { max-width: 720px; margin: 0 auto; padding: 48px 24px 96px; line-height:1.9; font-size:16px; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:17px; padding: 32px 24px 0; max-width:720px; margin:0 auto; }
.info-table { width:100%; border-collapse:collapse; margin-top: 8px; }
.info-table th, .info-table td { text-align:left; padding:14px 16px; border-bottom:1px solid #ddd; font-size:16px; }
.info-table th { width:160px; color:#666; font-weight:700; white-space:nowrap; vertical-align:top; }
.info-table td { font-weight:400; }
.info-table td { line-height:1.8; }
.info-table td ol, .info-table td ul { margin:0; padding-left:20px; }
.info-table .client-note { margin-top:8px; font-size:13px; color:#888; }

.detail-hero.split { display:flex; align-items:center; justify-content:center; gap:24px; height:166px; padding: 0 48px; text-align:left; }
.detail-hero.split .detail-title { font-size: 40px; }
.detail-hero.split .mascot-lg { width:auto; height:136px; margin:0; flex-shrink:0; }

/* Message (ご挨拶) page */
.message-heading { font-family:'LXGW Marker Gothic', 'Noto Sans JP', sans-serif; font-size:52px; line-height:1.4; text-align:center; margin:8px 0 40px; }
.message-role { text-align:center; font-size:14px; font-weight:700; color:#666; margin:0 0 4px; }
.message-name { text-align:center; font-size:28px; font-weight:900; margin:0; }
.message-name-en { text-align:center; font-size:14px; color:#999; margin:2px 0 40px; }
.message-section-title { font-size:18px; font-weight:900; margin:36px 0 12px; }
.detail-body ul { margin:0; padding-left:20px; }
.detail-body li { margin-bottom:4px; }

.contact-form { display:flex; flex-direction:column; gap:16px; background:#fff; border-radius:8px; padding:32px; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.form-field { font-size:14px; font-weight:700; display:flex; flex-direction:column; gap:6px; }
.form-field input, .form-field textarea { padding:10px 12px; border:1px solid #ccc; border-radius:4px; font-size:15px; transition: border-color 0.15s ease, background-color 0.15s ease; }
.form-field textarea { resize:vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color:#c2c2c2; opacity:1; }
.submit-btn { margin-top:8px; background:#232323; color:#fff; border:none; border-radius:4px; padding:14px; font-size:16px; font-weight:700; cursor:pointer; }

.field-label { display:inline-flex; align-items:center; }
.required-badge { display:inline-block; background:#c0392b; color:#fff; font-size:11px; font-weight:700; border:1px solid #c0392b; border-radius:3px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
.form-field input.field-error, .form-field textarea.field-error { border-color:#c0392b; background:#fff5f5; }
.field-error-msg { display:none; color:#c0392b; font-size:13px; font-weight:500; }
.field-error-msg.show { display:block; }

@media (max-width: 768px) {
  .site-nav { display:none; }
  .hamburger { display:flex; }
  .header-inner { padding: 14px 20px; }
  .logo-img { height:32px; }
  .hero { padding: 28px 20px 40px; }
  .hero-logo-img { height:98px; }
  .section-container { padding-left:20px; padding-right:20px; padding-bottom:56px; }
  .section-title { font-size:21px; margin-bottom:16px; }
  .card-grid { grid-template-columns: 1fr; gap:16px; }
  .biz-card { min-height:220px; padding:20px; }
  .biz-card.tall { grid-row: auto; min-height: 220px; }
  .card-title { font-size:19px; }
  .mascot-lg { width:180px; }

  .detail-hero.split { height:100px; padding: 0 20px; gap:14px; }
  .detail-hero.split .detail-title { font-size: 24px; }
  .detail-hero.split .mascot-lg { height:78px; }

  .detail-hero { padding: 40px 20px; }
  .detail-title { font-size: 24px; }
  .detail-body { padding: 32px 20px 64px; font-size:15px; }
  .back-link { padding: 20px 20px 0; }
  .info-table th { width:110px; }

  .message-heading { font-size:33px; margin:4px 0 28px; }
  .message-name { font-size:22px; }
}