@charset "UTF-8";

/* =========================================
   1. 基本設定 (Base & Variables)
   ========================================= */
:root {
  --primary-color: #000;
  --text-color: #333;
  --bg-gray: #f9f9f9;
  --border-color: #eee;
  --white: #fff;
  --font-en: 'Montserrat', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif; /* 新しい明朝体 */
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-en), var(--font-jp);
  color: var(--text-color);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  background-color: var(--white);
}

a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; vertical-align: bottom; }

/* =========================================
   2. レイアウト共通
   ========================================= */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.bg-gray { background-color: var(--bg-gray); }
.dark-section { background-color: #1a1a1a; color: var(--white); }

.section-header { text-align: center; margin-bottom: 60px; }
.section-title { font-size: 32px; font-weight: 700; margin-bottom: 16px; letter-spacing: 0.05em; font-family: var(--font-en), var(--font-jp); }
.section-title span { display: block; font-size: 14px; color: #888; margin-bottom: 8px; letter-spacing: 0.1em; font-weight: 500; }
.section-lead { font-size: 16px; color: #666; max-width: 700px; margin: 0 auto; }
.white-text .section-title, .white-text .section-lead { color: var(--white); }

/* =========================================
   3. ヘッダー
   ========================================= */
.header {
  position: fixed; top: 0; left: 0; width: 100%; height: 80px;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  z-index: 1000;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex; align-items: center;
}

.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.logo { font-size: 24px; font-weight: 700; font-family: var(--font-en); letter-spacing: 0.05em; margin: 0; }
.logo span { font-size: 12px; font-weight: 500; color: #888; margin-left: 8px; }

/* ナビゲーション (PC) */
.nav-menu { display: flex; gap: 32px; }
.nav-menu a { font-size: 14px; font-weight: 500; letter-spacing: 0.05em; position: relative; }
.nav-menu a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background-color: var(--primary-color); }
.nav-contact { background: var(--primary-color); color: var(--white) !important; padding: 8px 20px; border-radius: 50px; transition: background 0.3s; }
.nav-contact:hover { background: #333; opacity: 1; }

/* スマホ用ハンバーガー (初期非表示) */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 24px; position: relative; z-index: 1001; }
.nav-toggle span { display: block; width: 100%; height: 2px; background-color: #000; position: absolute; transition: all 0.3s; }
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { bottom: 0; }

/* =========================================
   4. ヒーローエリア (TOPページ用)
   ========================================= */
.home-hero {
  position: relative; overflow: hidden; height: 100vh; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); text-align: center;
}
.hero-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  /* TOPページの画像 */
  background-image: url('images/ogp-image.jpg'); 
  background-size: cover; background-position: center; z-index: 0;
  animation: kenBurns 20s infinite alternate;
}
@keyframes kenBurns {
  0% { transform: scale(1.0); } 100% { transform: scale(1.15); }
}
.home-hero .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1; }
.hero-content { position: relative; z-index: 2; padding: 0 20px; }

.hero-sub { font-size: 14px; letter-spacing: 0.2em; margin-bottom: 20px; font-family: var(--font-en); display: block; }
.hero-title { font-size: 40px; font-weight: 700; line-height: 1.4; margin: 0; }

/* =========================================
   5. COMPANYページ専用ヒーロー (ここを変更しました)
   ========================================= */
.company-hero {
  position: relative; 
  height: 60vh; 
  min-height: 400px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  color: var(--white); 
  text-align: center;
  overflow: hidden;

  /* ▼▼▼ ここに新しい画像（hero-company.jpg）を設定 ▼▼▼ */
  background-image: url('images/hero-company.jpg'); 
  background-attachment: fixed; 
  background-size: cover; 
  background-position: center;
}
/* 暗いオーバーレイ */
.company-hero .overlay { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  background: rgba(0, 0, 0, 0.4); 
}
/* COMPANYタイトルのフォント調整 */
.company-hero .hero-title {
  font-family: var(--font-serif); /* 明朝体で上品に */
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* =========================================
   6. コンテンツパーツ
   ========================================= */
/* 理念 */
.philosophy-row { display: flex; align-items: center; gap: 60px; margin-bottom: 100px; }
.philosophy-row.reverse { flex-direction: row-reverse; }
.philosophy-img-box, .philosophy-text-box { flex: 1; }
.philosophy-num { font-size: 60px; font-weight: 700; color: #e0e0e0; font-family: var(--font-en); line-height: 1; margin-bottom: 16px; }
.philosophy-h3 { font-size: 28px; font-weight: 700; margin-bottom: 24px; line-height: 1.4; }
.philosophy-desc { font-size: 16px; color: #666; text-align: justify; }

/* 会社概要ボックス */
.outline-box { background: var(--white); padding: 60px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); max-width: 900px; margin: 0 auto; }
.outline-list { display: grid; grid-template-columns: 180px 1fr; gap: 32px; margin: 0; text-align: left; }
.outline-list dt { font-weight: 700; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding: 24px 0; display: flex; align-items: center; }
.outline-list dd { margin: 0; border-bottom: 1px solid var(--border-color); padding: 24px 0; }
.outline-list dt:last-of-type, .outline-list dd:last-of-type { border-bottom: none; }
.service-list li { position: relative; padding-left: 1.2em; margin-bottom: 8px; }
.service-list li::before { content: "・"; position: absolute; left: 0; color: #888; }

/* カードグリッド */
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.flow-card { background: var(--white); padding: 40px 30px; border: 1px solid var(--border-color); border-radius: 8px; transition: transform 0.3s, box-shadow 0.3s; }
.flow-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* 製品・パートナー共通 */
.product-photo { width: 100%; height: 300px; object-fit: contain; background: #f4f4f4; padding: 20px; margin-bottom: 20px; }
.flow-step { font-size: 12px; font-weight: 700; color: #888; letter-spacing: 0.1em; margin-bottom: 16px; font-family: var(--font-en); }
.partner-name { font-size: 20px; margin: 0 0 10px 0; font-family: var(--font-en); font-weight: bold; }
.partner-desc { font-size: 14px; color: #666; margin: 0; }
.merit-icon { font-size: 40px; color: #000; margin-bottom: 20px; }

/* ボタン類 */
.contact-wrapper { text-align: center; }
.contact-lead { font-size: 16px; margin-bottom: 40px; line-height: 1.8; }
.contact-buttons { display: flex; justify-content: center; gap: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 40px; border-radius: 50px; font-weight: 500; font-size: 15px; transition: all 0.3s; min-width: 240px; }
.btn-primary { background: var(--white); color: var(--primary-color); }
.btn-primary:hover { background: #f0f0f0; }
.btn-secondary { border: 1px solid var(--white); color: var(--white); }
.btn-secondary:hover { background: var(--white); color: var(--primary-color); }

/* 追従CTA */
.floating-cta { position: fixed; bottom: 20px; right: 20px; background: #000; color: #fff; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.floating-cta.show { opacity: 1; pointer-events: auto; }

/* フッター */
.footer { background: var(--bg-gray); padding: 40px 0; border-top: 1px solid var(--border-color); text-align: center; }
.footer-logo { font-family: var(--font-en); font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.footer-copy { font-size: 12px; color: #888; margin: 0; font-family: var(--font-en); }

/* フェードインアニメーション */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-up.show { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* =========================================
   7. レスポンシブ (SP)
   ========================================= */
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .section-title { font-size: 24px; }
  .hero-title { font-size: 28px; }

  /* スマホナビ */
  .nav-toggle { display: block; }
  .nav { position: fixed; top: 0; right: -100%; width: 80%; height: 100vh; background: #fff; padding-top: 80px; transition: right 0.4s ease; box-shadow: -5px 0 20px rgba(0,0,0,0.1); }
  .nav.active { right: 0; }
  .nav-menu { flex-direction: column; align-items: center; gap: 30px; }
  .nav-toggle.active span:nth-child(1) { transform: rotate(45deg); top: 11px; }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg); top: 11px; }

  /* コンテンツ調整 */
  .philosophy-row { flex-direction: column !important; gap: 30px; margin-bottom: 60px; }
  .philosophy-num { font-size: 40px; }
  .philosophy-h3 { font-size: 22px; margin-bottom: 16px; }
  
  .outline-box { padding: 30px 20px; }
  .outline-list { grid-template-columns: 1fr; gap: 0; }
  .outline-list dt { border-bottom: none; padding-bottom: 8px; padding-top: 24px; font-size: 14px; color: #888; }
  .outline-list dd { padding-top: 0; padding-bottom: 24px; font-size: 15px; }
  
  .flow-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-buttons { flex-direction: column; align-items: center; gap: 16px; }
  .btn { width: 100%; max-width: 320px; }
}/* ラインナップのカードを全デバイスで横並びに固定 */
#lineup .flow-grid {
  display: flex;
  flex-direction: column; 
  gap: 20px; /* カード同士の間隔 */
}

#lineup .flow-card {
  display: flex; /* 横並び */
  align-items: center; /* 垂直中央 */
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border-color);
}

#lineup .product-photo {
  width: 35%; /* スマホでも見やすいよう画像幅を35%に設定 */
  height: 200px; /* スマホで見栄えの良い高さ */
  margin-bottom: 0;
  background: #f4f4f4;
  object-fit: contain;
  padding: 10px;
}

#lineup .product-info {
  flex: 1;
  padding: 15px 20px; /* テキスト周りの余白 */
}

/* テキストサイズの微調整（スマホ用） */
@media (max-width: 768px) {
  #lineup .product-photo {
    height: 150px; /* スマホでは少し高さを抑える */
    width: 40%;    /* スマホでは画像の比率を少し上げる */
  }
  #lineup .partner-name {
    font-size: 16px; /* タイトルを少し小さく */
    margin-bottom: 5px;
  }
  #lineup .partner-desc {
    font-size: 12px; /* 説明文をコンパクトに */
    line-height: 1.5;
  }
  #lineup .product-spec {
    font-size: 10px !important; /* スペック情報を最小限に */
    margin-top: 5px;
  }
  #lineup .flow-step {
    font-size: 10px;
    margin-bottom: 5px;
  }
}

/* PC版での見栄えをさらに最適化 */
@media (min-width: 769px) {
  #lineup .product-photo {
    width: 40%;
    height: 350px;
  }
  #lineup .product-info {
    padding: 40px;
  }
}