/* ========================================
   横山製作所 - レイアウト（共通構造）
   ======================================== */

/* コンテナ */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 767px) {
  .container {
    padding: 0 var(--space-md);
  }
}

/* セクション */
.section {
  padding: var(--space-2xl) var(--space-lg);
  width: 100%;
}

.section-hero {
  padding: calc(var(--space-2xl) * 2) var(--space-lg);
  width: 100%;
}

.stats-section {
  padding: calc(var(--space-2xl) * 3) var(--space-lg);
  width: 100%;
  background-color: var(--bg-gray); /* 上セクションと差別化する淡い背景 */
}

@media (max-width: 767px) {
  .section {
    padding: var(--space-xl) var(--space-md);
  }
  
  .section-hero {
    padding: calc(var(--space-xl) * 2) var(--space-md);
  }
  
  .stats-section {
    padding: calc(var(--space-xl) * 2) var(--space-md);
  }
  
  .hero-content {
    text-align: center;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
  }
  

}

/* ヒーローセクション */
.hero {
  position: relative;
  height: 80vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Hero slider */
.hero-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

@media (max-width: 767px) {
  .hero {
    height: 65vh;
    min-height: 420px;
  }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  text-align: left;
  width: 100%;
  margin: 0;
  padding-right: 10%;
  padding-left: 0;
}

.hero-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.3em;
  margin-bottom: var(--space-md);
  color: rgba(255,255,255,0.8);
}

.hero-title {
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: var(--font-weight-black);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  color: var(--bg-white);
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Bilingual subtitle for H1 (JP translation) */
.hero-title .title-jp {
  display: block;
}

.hero-title .title-en {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.4;
  margin-top: 0.3em;
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-bold);
}

.hero-subtitle {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.6;
  margin-bottom: var(--space-2xl);
  color: rgba(255,255,255,0.9);
  word-break: break-all;
  overflow-wrap: break-word;
}



/* セクションタイトル */
.section-large-title {
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: var(--font-weight-black);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  color: var(--main-text);
  text-align: center; /* 統一ルール: 必ず中央寄せ */
  word-break: break-all;
  overflow-wrap: break-word;
}

.section-large-title .title-jp,
.works-title .title-jp,
.page-title .title-jp { display: block; }

.section-large-title .title-en,
.works-title .title-en,
.page-title .title-en {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.4;
  margin-top: 0.3em;
  color: var(--auxiliary-text);
  font-weight: var(--font-weight-bold);
}

.section-subtitle {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.6;
  margin-bottom: calc(var(--space-2xl) * 1.5); /* 統一ルール: サブタイトル下の固定マージン */
  color: var(--auxiliary-text);
  width: 100%;
  max-width: 800px;
  margin: 0 auto calc(var(--space-2xl) * 1.5);
  padding: 0 var(--space-lg);
  text-align: center;
}

.section-content {
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 767px) {
  .section-subtitle {
    padding: 0 var(--space-md);
  }
}

/* グリッドシステム */
.grid {
  display: grid;
  gap: var(--space-xl);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ブランドセクション */
.brand-section {
  background-color: var(--bg-gray);
  padding: calc(var(--space-2xl) * 3) var(--space-lg);
  text-align: center;
}

.brand-logo-large {
  font-size: clamp(6rem, 12vw, 14rem);
  font-weight: var(--font-weight-black);
  line-height: 1;
  margin-bottom: var(--space-xl);
  color: var(--main-text);
  letter-spacing: 0.08em;
}

.brand-tagline {
  font-size: clamp(1.4rem, 2.5vw, 2.0rem);
  line-height: 1.6;
  color: var(--auxiliary-text);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--space-lg);
}

@media (max-width: 767px) {
  .brand-section {
    padding: calc(var(--space-xl) * 2) var(--space-md);
  }
  
  .brand-tagline {
    padding: 0 var(--space-md);
  }
}

/* ===== スマートフォン最適化：見出しの折り返し抑制 ===== */
@media (max-width: 480px) {
  /* 大見出し（ヒーロー/セクション）を縮小し、強制改行を抑える */
  .hero-title,
  .section-large-title {
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    word-break: keep-all; /* base.css の break-all を上書き */
  }

  /* 日本語タイトル部分は極力1行維持 */
  .hero-title .title-jp,
  .section-large-title .title-jp {
    white-space: nowrap;
    word-break: keep-all;
  }

  /* ブランドロゴは必ず1行表示を目指す */
  .brand-logo-large {
    white-space: nowrap;
    word-break: keep-all;
    font-size: clamp(3.2rem, 12vw, 8rem);
    letter-spacing: 0.04em;
    line-height: 1;
  }

  /* トップページのH1は折り返し許可（はみ出し防止） */
  body.home .hero-title,
  body.front-page .hero-title {
    word-break: normal;
    overflow-wrap: anywhere;
  }
  body.home .hero-title .title-jp,
  body.front-page .hero-title .title-jp {
    white-space: normal;
  }
}