/* 全体のフォント設定 */
/* Googleフォント */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');

/* 全体のフォント設定 *//* 共通スタイル */
body {
    font-family: 'M PLUS 1p', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000000; /* 完全な黒 */
    color: white; /* テキストも白くすることで見やすく */
}

/* ヘッダー共通スタイル */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8); /* 背景色（少し透明） */
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 10px 40px;
    width: 100%;
    max-width: 1920px; /* PC用の最大幅 */
}

/* ヘッダーロゴのスタイル */
/* ロゴ全体のスタイル */
.logo {
    display: flex;
    align-items: center;
    gap: 30px; /* ロゴとテキストの間隔 */
}

/* ロゴ画像 */
.logo img {
    height: 60px;
    width: auto;
    transform: translateX(10px); /* ロゴ画像を右に移動 */
}

/* ロゴのテキスト */
.logo .logo-text {
    font-family: 'Francois One', sans-serif; /* フォントをFrancois Oneに指定 */
    font-size: 36px;
    font-weight: bold;
    color: white;
    letter-spacing: 3px; /* 文字間隔を広げる */
}

/* ナビゲーション */
.nav {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-right: 5%; 
}

/* ナビゲーションリンク */
.nav a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s;
    padding: 10px;
}

.nav a:hover {
    color: #00aaff;
}

/* Googleフォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');


/* 仕事内容 */
/* ヒーローセクション */    
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-image: url('images/hero-bg.jpg');
    background-size: 90% auto;
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
    width: 100%;
    margin: 80px auto 0;
    padding-top: 150px;
    min-height: 600px; /* ヒーローセクションの高さを確保 */
    justify-content: center;
    position: relative;
}

/* ヒーローセクションの説明文 */
.hero-text {
    background-color: rgba(0, 0, 0, 0.6); /* 背景色 */
    display: inline-block;
    padding: 20px 30px;
    border-radius: 10px;
    position: absolute;
    top: 9%; /* 上に移動 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* 横幅をヒーローセクションと一致させる */
    max-width: 1200px; /* ヒーローセクションの最大幅に合わせる */
    z-index: 1;
}

.hero h1 {
    font-size: 38px;
}
.hero p {
    font-size: 20px;
    color: white;
    margin: 0;
}

/* ヒーローセクションのボックス配置 */
.hero-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px; /* ボックス間の距離を縮める */
    position: absolute;
    top: 45%; /* ボックスをさらに上に移動 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    box-sizing: border-box;
}

/* 各ボックスのスタイル */
.hero-box {
    background: white;
    color: #333;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    width: calc(33.33% - 30px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    box-sizing: border-box;
    height: 150px; /* ← 高さを固定 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 中央寄せ（任意） */
}

/* ボックスのタイトル */
.hero-box h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

/* ボックス内の説明文 */
.hero-box p {
    font-size: 16px;
}

.hero-box:nth-child(n+4) {
    position: relative;
    top: -20px;
}

.hero .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: white;
    color: #005bbb;
    text-decoration: none;
    border-radius: 5px;
}

/* 会社概要 */
.about-content {
  position: relative;
  display: flex;
  height: 400px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-content::before,
.about-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;        /* 線の太さ */
  background-color: #333;  /* 線の色も変更可 */
}

.about-content::before {
  top: 0;
}

.about-content::after {
  bottom: 0;
}

/* 左側画像エリア */
.about-image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
}

/* 実際の画像 */
.about-image img {
  width: 90%;
  height: auto;
  object-fit: contain;
  border-radius: 0; /* 四角く */
  display: block;
}

/* 右側のテキスト */
.about-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 上下中央 */
  align-items: center;      /* 左右中央（h2を中央に） */
  padding: 30px;
  box-sizing: border-box;
}

.about-text h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* リストだけ左寄せに戻す */
.about-text ul {
  text-align: left;
  padding-left: 20px;
}

/* ニュース */
.news-content {
  position: relative;
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  height: 400px;
}

/* 上線 */
.news-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;          /* 線の太さ */
  background-color: #ccc; /* 線の色 */
}

/* 下線 */
.news-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;          /* 線の太さ */
  background-color: #ccc; /* 線の色 */
}

.news-text, .news-image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
}

.news-text {
  flex-direction: column;
  text-align: left;
}

.news-text h2 {
  margin-bottom: 20px;
}

.news-image img {
  width: 90%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  display: block;
}

.news-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #08315d;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
}

.news-btn:hover {
  background-color: #003f7f;
}


/* セクション間の余白を詰める */
.about,
.contact {
  margin: 0;
  padding-top: 60px;
  padding-bottom: 60px;
  box-sizing: border-box;
}

/* セクション全体を上下左右中央に配置 */
.contact {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  box-sizing: border-box;
  text-align: center;
  /* min-height: 100vh; ← 不要なら削除 */
}

/* h2 + form をまとめて中央寄せするラッパー */
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

/* フォーム */
.contact-content {
  display: flex;
  max-width: 1200px;
  height: 400px;  /* 必要に応じて調整 */
  margin: 0 auto;
  position: relative;
  border-top: 3px solid #333;    /* 上線 */
  border-bottom: 3px solid #333; /* 下線 */
}

.contact-image,
.contact-form {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
}

.contact-image img {
  width: 90%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

.contact-form {
  flex-direction: column;
  text-align: left;
}

.contact-form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.contact-form form {
  width: 100%;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
  box-sizing: border-box;
  font-size: 16px;
}

.contact-form button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}
/* フッター */
footer {
  text-align: center;
  background-color: #000205;
  color: white;
  padding: 10px;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 20px;
  }

  .nav {
    flex-wrap: wrap;
    gap: 15px;
    margin-right: 0;
  }

  .hero {
    background-size: cover;
    padding-top: 120px;
  }

  .hero-text {
    top: 5%;
    padding: 15px 20px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 16px;
  }

  .hero-boxes {
    flex-direction: column;
    align-items: center;
    top: auto;
    position: static;
    transform: none;
    margin-top: 30px;
  }

  .hero-box {
    width: 90%;
    height: auto;
  }

  .about-content,
  .news-content,
  .contact-content {
    flex-direction: column;
    height: auto;
  }

  .about-image,
  .about-text,
  .news-text,
  .news-image,
  .contact-image,
  .contact-form {
    width: 100%;
    padding: 20px;
  }

  .contact-inner {
    padding: 0 10px;
  }
}

@media (max-width: 600px) {
  .logo img {
    height: 40px;
  }

  .logo-text {
    font-size: 24px;
    letter-spacing: 1px;
  }

  .nav a {
    font-size: 16px;
  }

  .hero h1 {
    font-size: 24px;
  }

  .hero p