*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #c8102e;
  --foreground: #111111;
  --muted-foreground: #666666;
  --background: #ffffff;
  --card: #f7f7f5;
  --secondary: #f0f0ee;
  --border: rgba(0,0,0,0.1);
}
body { font-family: 'Noto Sans JP', sans-serif; background: var(--background); color: var(--foreground); overflow-x: hidden; }
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

.logo img{min-height:3.25em;}

/* Nav */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.08); }
.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-link { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--muted-foreground); text-decoration: none; transition: color 0.2s; }
.nav-link:hover { color: var(--primary); }
.nav-cta { font-size: 0.78rem; letter-spacing: 0.12em; color: #fff; background: var(--primary); text-decoration: none; padding: 0.5rem 1.25rem; transition: opacity 0.2s; }
.nav-cta:hover { opacity: 0.85; }

/* Hero */
.hero-section { position: relative; min-height: 100vh; overflow: hidden; }
#three-hero { position: absolute; inset: 0; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0.1) 100%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 9rem 4rem 5rem 6rem; max-width: 780px; }
.hero-tag { font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.25em; color: var(--primary); margin-bottom: 1.5rem; text-transform: uppercase; }
.hero-h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(1.6rem, 3.2vw, 2.8rem); font-weight: 300; line-height: 1.6; color: var(--foreground); margin-bottom: 1.5rem; white-space: nowrap; }
.hero-h1 span { color: var(--primary); }
.hero-p { font-size: 0.95rem; line-height: 1.9; color: var(--muted-foreground); max-width: 460px; margin-bottom: 3rem; }
.hero-btn { display: inline-block; padding: 0.9rem 2.4rem; border: 1px solid rgba(200,16,46,0.35); color: var(--primary); font-size: 0.82rem; letter-spacing: 0.15em; text-decoration: none; transition: background 0.2s; }
.hero-btn:hover { background: rgba(200,16,46,0.06); }
.hero-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--primary), transparent); opacity: 0.3; z-index: 3; }

/* Stats */
.stats-section { padding: 4rem 2rem; border-bottom: 1px solid var(--border); background: var(--card); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 900px; margin: 0 auto; }
.stat-num { font-family: 'DM Mono', monospace; color: var(--primary); font-size: 3.5rem; font-weight: 300; line-height: 1; text-align: center; }
.stat-label { font-family: 'Noto Sans JP', sans-serif; color: var(--muted-foreground); font-size: 0.8rem; margin-top: 0.5rem; letter-spacing: 0.15em; text-align: center; }

/* Sections */
.section-pad { padding: 6rem; }
.section-label { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.3em; color: var(--primary); margin-bottom: 1rem; text-transform: uppercase; }
.section-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; line-height: 1.4; margin-bottom: 3rem; }

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.service-card { background: var(--background); padding: 2.5rem; transition: background 0.3s; }
.service-card:hover { background: var(--card); }
.service-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.service-num { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--primary); letter-spacing: 0.2em; }
.service-icon { font-size: 1.5rem; color: rgba(200,16,46,0.3); }
.service-title { font-family: 'Noto Serif JP', serif; font-size: 1.05rem; font-weight: 500; margin-bottom: 1rem; line-height: 1.4; }
.service-desc { font-size: 0.82rem; line-height: 1.85; color: var(--muted-foreground); }

/* Works */
.works-section { background: var(--card); }
.works-grid { display: grid; grid-template-columns: 1fr 1fr; }
.works-list { border-right: 1px solid var(--border); }
.work-item { padding: 1.75rem 2rem; cursor: pointer; border-bottom: 1px solid var(--border); background: transparent; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; }
.work-item.active, .work-item:hover { background: var(--secondary); }
.work-item.active .work-arrow { color: var(--primary); }
.work-title { font-family: 'Noto Serif JP', serif; font-size: 1.05rem; margin-bottom: 0.3rem; }
.work-cat { font-size: 0.75rem; color: var(--muted-foreground); }
.work-arrow { font-size: 1.2rem; color: var(--muted-foreground); transition: color 0.2s; }
.work-preview { position: relative; overflow: hidden; min-height: 300px; }
.work-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; }
.work-slide.active { opacity: 1; }
.work-slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) saturate(0.6); }
.work-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,15,0.8) 0%, transparent 60%); }
.work-info { position: absolute; bottom: 1.5rem; left: 1.5rem; }
.work-info-title { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; font-weight: 300; margin-bottom: 0.3rem; color: #fff; }
.work-info-cat { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--primary); letter-spacing: 0.15em; }

/* Reasons */
.reasons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); }
.reason-card { background: var(--background); padding: 2.5rem; position: relative; overflow: hidden; }
.reason-num { font-family: 'DM Mono', monospace; font-size: 3rem; font-weight: 300; color: rgba(200,16,46,0.06); position: absolute; top: 1rem; right: 1.5rem; line-height: 1; }
.reason-line { width: 2.5rem; height: 1px; background: var(--primary); margin-bottom: 1.5rem; }
.reason-title { font-family: 'Noto Serif JP', serif; font-size: 1.1rem; font-weight: 500; margin-bottom: 0.8rem; }
.reason-desc { font-size: 0.85rem; line-height: 1.9; color: var(--muted-foreground); }

/* Proposal */
.proposal-section { background: var(--card); border-top: 1px solid var(--border); }
.proposal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.proposal-card { padding: 1.8rem; border: 1px solid var(--border); }
.proposal-num { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--primary); margin-bottom: 1rem; letter-spacing: 0.2em; }
.proposal-title { font-family: 'Noto Serif JP', serif; font-size: 1.1rem; margin-bottom: 0.8rem; }
.proposal-desc { font-size: 0.82rem; line-height: 1.85; color: var(--muted-foreground); }

/* Process */
.process-grid { display: flex; }
.process-item { flex: 1; padding: 2rem 1.5rem; border-right: 1px solid var(--border); }
.process-item:last-child { border-right: none; }
.process-step { font-family: 'DM Mono', monospace; font-size: 1.8rem; font-weight: 300; color: rgba(200,16,46,0.15); line-height: 1; margin-bottom: 1.2rem; }
.process-title { font-family: 'Noto Serif JP', serif; font-size: 0.95rem; margin-bottom: 0.4rem; }
.process-period { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--primary); letter-spacing: 0.15em; margin-bottom: 0.7rem; }
.process-desc { font-size: 0.78rem; line-height: 1.8; color: var(--muted-foreground); }

/* Contact */
.contact-section { background: var(--card); border-top: 1px solid var(--border); }
.contact-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.contact-h2 { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 300; line-height: 1.4; margin-bottom: 1.5rem; }
.contact-p { font-size: 0.9rem; line-height: 1.9; color: var(--muted-foreground); margin-bottom: 2.5rem; }
.contact-btn { display: inline-block; padding: 1rem 3rem; background: var(--primary); color: #fff; font-size: 0.85rem; letter-spacing: 0.15em; text-decoration: none; transition: opacity 0.2s; margin-bottom: 3rem; }
.contact-btn:hover { opacity: 0.85; }
.contact-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.office-label { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--primary); letter-spacing: 0.2em; margin-bottom: 0.5rem; }
.office-tel { font-size: 0.85rem; color: var(--muted-foreground); }
.office-addr { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.3rem; }

/* Footer */
.site-footer { padding: 2rem 6rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-copy { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--muted-foreground); letter-spacing: 0.1em; }
.footer-url { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: rgba(200,16,46,0.3); letter-spacing: 0.2em; }

/* Responsive */
@media (max-width: 900px) {
  .site-nav { padding: 1.1rem 1.5rem; }
  .nav-links {gap: 1.6rem;}
  .nav-link { font-size: 0.6rem;}
  .nav-link:hover { color: var(--primary); }
  .nav-cta { font-size: 0.8rem; border-radius: 4px;}
  .nav-cta:hover { opacity: 1;}


  .hamburger { display: flex; }
  .hero-copy { padding: 8rem 2rem 3rem; }
  .hero-h1 { white-space: normal; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .section-pad { padding: 4rem 2rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .works-grid { grid-template-columns: 1fr; }
  .works-list { border-right: none; border-bottom: 1px solid var(--border); }
  .reasons-grid { grid-template-columns: 1fr; }
  .proposal-grid { grid-template-columns: 1fr; gap: 1rem; }
  .process-grid { flex-direction: column; }
  .process-item { border-right: none; border-bottom: 1px solid var(--border); padding: 1.5rem 0; }
  .process-item:last-child { border-bottom: none; }
  .contact-offices { grid-template-columns: 1fr; gap: 1.5rem; }
  .site-footer { padding: 1.5rem 2rem; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .stat-num { font-size: 2.4rem; }
  .section-pad { padding: 3rem 1.5rem; }
}



/* form */

/* フォーム全体のラッパー */
.contact-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
 
/* 各フィールドブロック */
.form-field {
  margin-bottom: 1.5rem;
}
 
/* ラベル */
.form-field > label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}
 
/* 必須マーク */
.required {
  color: var(--primary);
  margin-left: 3px;
}
 
/* テキスト・メール入力 */
.contact-form input[type="text"],
.contact-form input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--background);
  color: var(--foreground);
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
 
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus {
  border-color: var(--primary);
}
 
.contact-form input[type="text"]::placeholder,
.contact-form input[type="email"]::placeholder {
  color: rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
}
 
/* 区切り線 */
.form-divider {
  height: 0.5px;
  background: var(--border);
  margin: 2rem 0 1.75rem;
}
 
/* ラジオボタン グリッド */
.radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
 
/* ラジオボタン 各アイテム */
.radio-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border: 0.5px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}
 
.radio-item:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: var(--secondary);
}
 
/* ラジオボタン カスタムスタイル */
.radio-item input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s;
  margin: 0;
}
 
.radio-item input[type="radio"]:checked {
  border-color: var(--primary);
}
 
.radio-item input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
 
/* 選択済みアイテムの強調 */
.radio-item:has(input[type="radio"]:checked) {
  border-color: rgba(200, 16, 46, 0.4);
  background: rgba(200, 16, 46, 0.03);
}
 
/* ラジオボタン テキスト */
.radio-item span {
  font-size: 0.82rem;
  color: var(--foreground);
  line-height: 1.4;
}
 
/* 送信ボタン */
.contact-form .contact-btn {
  display: block;
  width: 100%;
  padding: 1rem;
  margin-top: 2rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.18em;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  text-align: center;
}
 
.contact-form .contact-btn:hover {
  opacity: 0.85;
}
 
.contact-form .contact-btn:active {
  opacity: 0.7;
}
 
/* 注釈テキスト */
.form-note {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  text-align: center;
  margin-top: 1rem;
  letter-spacing: 0.05em;
}
 
/* ================================================
   Responsive
   ================================================ */
 
/* タブレット〜スマホ (max 900px) */
@media (max-width: 900px) {
  .contact-form {
    max-width: 100%;
  }
 
  .radio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
 
  .radio-item {
    padding: 0.65rem 0.85rem;
  }
 
  .radio-item span {
    font-size: 0.8rem;
  }
}
 
/* スマホ (max 480px) */
@media (max-width: 480px) {
  .radio-grid {
    grid-template-columns: 1fr;
  }
 
  .radio-item {
    padding: 0.75rem 1rem;
  }
 
  .contact-form input[type="text"],
  .contact-form input[type="email"] {
    font-size: 1rem; /* iOS zoom防止（16px以上） */
    padding: 0.85rem 1rem;
  }
 
  .contact-form .contact-btn {
    font-size: 0.9rem;
    padding: 1.1rem;
  }
}