/* common.css - モバイルヘッダー＆サイズ調整対応 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; }
body { font-family: 'Noto Sans JP', sans-serif; color: #0d1e34; line-height: 1.6; overflow-x: hidden;}
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* Header */
.site-header { background: #fff; padding: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo img { max-height: 30px; width: auto; }
.site-nav { }
.site-nav ul { display: flex; gap: 20px; list-style: none; }
.site-nav a { color: #0d1e34; text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 3px; background: #0d1e34; }

/* Hero */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero--home {
  background-image: url('/img/top2.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 30vh;
}

.hero--company {
  background-image: url('/img/top2.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 10vh;
}
.hero--business {
  background-image: url('/img/top2.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 10vh;
}
/* コンテンツ */
.hero--home .hero-content,
.hero--company .hero-content
.hero--business .hero-content {
  position: relative; /* 背景に重なるように */
  z-index: 1;
  padding: 0 1rem;
}
.hero--home .hero-content h1,
.hero--company .hero-content h1
.hero--business .hero-content h1 {
  margin: 0;
  font-size: 2rem;
}

/* 会社概要テーブル */
.company-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.company-table th,
.company-table td {
  border: 1px solid #ccc;
  padding: 12px 16px;
}
.company-table th {
  background-color: #eaf2ff;
  font-weight: 600;
  text-align: left;
}
.company-table tr:nth-child(even) td {
  background-color: #f5faff;
}

/* Buttons */
.btn { display: inline-block; padding: 10px 20px; border-radius: 4px; text-decoration: none; transition: background 0.3s ease; }
.btn-primary { background: #1967d2; color: #fff; }
.btn-primary:hover { background: #155bb5; }
.btn-secondary { background: #fff; color: #1967d2; border: 2px solid #1967d2; }
.btn-secondary:hover { background: #eaf2ff; }

/* Sections */
.section { padding: 60px 0; }
.company-info { background: #f5faff; }
.company-info h2 { font-size: 2rem; margin-bottom: 20px; }
.company-info p { max-width: 800px; margin: 0 auto; font-size: 1rem; }
.business-content { background: #eaf2ff; }
.business-content h2 { font-size: 2rem; margin-bottom: 20px; }
.cards { display: flex; gap: 20px; margin-top: 20px; }
.card { background: #fff; padding: 20px; border-radius: 8px; text-align: center; text-decoration: none; color: inherit; flex: 1; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.card img { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; }
.card h3 { margin: 15px 0 10px; font-size: 1.25rem; }
.card p { font-size: 0.9rem; }

/* Recruitment */
.recruitment .job-item { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin-bottom: 20px; max-width: 600px; }
.recruitment h2 { font-size: 2rem; margin-bottom: 20px; }

/* Footer */
.site-footer { background: #0d1e34; color: #fff; padding: 40px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;            /* ←折り返しを許可 */
  justify-content: center;    /* センター寄せ */
  gap: 20px 23px;             /* 上下20px, 左右23pxの間隔 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-nav ul li {
  white-space: nowrap;        /* メニュー1つ分は折り返さない */
}

.footer-nav ul li a {
  display: inline-block;
  font-size: 1rem;
  padding: 0 4px;
  text-decoration: none;
}
@media (max-width: 600px) {
  .footer-nav ul {
    gap: 10px 10px;
  }
  .footer-nav ul li a {
    font-size: 0.95rem;
    padding: 0 2px;
  }
}
.footer-nav a { color: #fff; text-decoration: none; font-size: 0.9rem; }
.site-footer p { font-size: 0.9rem; }

/* Responsive */
@media (max-width: 1024px) {
  .hero h1 { font-size: 2.5rem; }
}
@media (max-width: 768px) {
  .header-inner {
    position: relative;
  }
  /* nav 全体に open クラスで展開を任せる */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    display: flex;          /* デフォルトは flex だが ul は非表示 */
    flex-direction: column;
  }
  .site-nav ul {
    display: none;          /* ul は隠す */
    flex-direction: column;
    gap: 0;
  }
  .site-nav.open ul {
    display: flex;          /* open クラス付き nav の中の ul を表示 */
  }
  .site-nav ul li {
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
  }
  .hamburger {
    display: flex;
    cursor: pointer;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero--home { height: 20vh; }
  .hero--company { height: 10vh; }
  .hero--home .hero-content h1,
  .hero--company .hero-content h1 { font-size: 1.5rem; }
  .cards {
    flex-direction: column;
  }
  .card img {
    height: 200px;
  }
  .card {
    width: 100%;
  }
  .recruitment .job-item {
    width: 100%;
  }
  .company-table td iframe {
    width: 100% !important;      /* 幅はセルいっぱいに */
    aspect-ratio: 1 / 1;         /* 高さは幅と同じに */
    height: auto !important;     /* HTML属性の400pxを打ち消し */
  }
}

/* ───────────── */
/* Business Section */
/* ───────────── */
.business-section {
  background: #f5faff;
  padding: 60px 0;
}
.business-section h1 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
  color: #0d1e34;
}

/* カードを縦並びに（モバイル） */
.business-cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.business-card {
  display: flex;
  flex-direction: column; /* カラム：画像→テキスト */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform .2s, box-shadow .2s;
  text-align: center;
}
.business-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.business-card-content {
  padding: 16px;
  display: flex;
  flex-direction: column; /* タイトル＋文章を縦積み */
  justify-content: center;
}
.business-card-content h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #1967d2;
}
.business-card-content p {
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

/* ───────────── */
/* デスクトップ：横長カード */
/* ───────────── */
@media (min-width: 769px) {
  .business-cards {
    /* 引き続き縦並び */
    flex-direction: column;
  }
  .business-card {
    flex-direction: row;      /* 横並び */
    align-items: flex-start;
    text-align: left;
  }
  .business-card img {
    width: 40%;              /* 左側40% */
    height: auto;
    border-radius: 8px 0 0 8px;
  }
  .business-card-content {
    width: 60%;              /* 右側60% */
    padding: 24px;
  }
}

/* ───────────── */
/* お問い合わせフォーム調整 */
/* ───────────── */
.section.company-info > .container > p,
.contact-form {
  max-width: 600px;      /* お好みで幅を調整（例：600px） */
  margin: 0 auto;        /* 中央寄せ */
  padding-left: 16px;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;    /* 下に余白 */
}

.contact-form .form-group label {
  font-weight: 500;
  margin-bottom: 8px;     /* ラベルと入力欄の間隔 */
}

.contact-form .form-group input,
.contact-form .form-group textarea {
  max-width: 100%;       /* 親の max-width を超えない */
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  font-size: 1rem;
}

.contact-form .form-group:first-of-type {
  margin-top: 16px; /* お好みの余白量に調整 */
}

/* ボタン配置の余白 */
.contact-form .form-actions {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 24px;
}
.card {
  background:#fff; border-radius:8px; padding:24px; text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  transition:transform .2s;
}
.card:hover { transform:translateY(-4px); }
.card h3 { margin:0; font-size:1.25rem; color:#1967d2; }

.job-detail-table {
  width: 100%; border-collapse: collapse; margin: 24px 0;
}
.job-detail-table th,
.job-detail-table td {
  border: 1px solid #ccc; padding: 12px 16px;
}
.job-detail-table th {
  background: #eaf2ff; text-align: left; width: 30%;
}
.job-desc h3 { margin-top:0; color:#1967d2; }
.job-desc p { line-height:1.6; }

.small-cards {
  display:flex; gap:16px; flex-wrap:wrap;
}
.small-cards .card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-bottom: 16px;    /* ここを少なく */
}
.small-cards .card p {
  margin: 8px 0 0;        /* 下の不要な空白をカット */
  flex-grow: 0;           /* 余白が伸びないように */
}
.cards.small-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 24px;
}
.cards.small-cards .card {
  border: 1px solid #ccc !important;
  box-shadow: none !important;
  background: #fff !important;
  transition: none !important;
}
.cards.small-cards .card h4 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #1967d2;
}
.cards.small-cards .card p {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: #333;
}
.cards.small-cards .card .btn-secondary {
  align-self: flex-start;    /* 左端に配置 */
}
.cards.small-cards .card:hover {
  transform: none !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* common.css の末尾に追加 or 置き換え */
#job-list .card {
  border: 1px solid #ccc;
  box-shadow: none;
  background: #fff;
  transition: none;
  text-align: left;
  padding: 16px;
}

/* 3列グリッド */
#job-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* モバイルでは1列 */
@media (max-width: 768px) {
  #job-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.section.recruitment {
  background-color: #f5faff;
}
/* 企業理念を角丸枠で強調 */
.company-info .subsection:nth-of-type(1) {
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  padding: 12px 16px;       /* 上下12px、左右16pxの内側余白 */
  margin-bottom: 16px;      /* 次セクションとの隙間 */
  text-align: center;       /* 見出し・本文を中央揃え */
}

/* セクションの見出し下余白をスリム化 */
.company-info .subsection h2 {
  margin-bottom: 8px;
}

.section.company-info {
  padding-bottom: 20px;  /* ←60px から 20px に変更 */
}
/* 会社概要セクションの上パディングを詰める */
.section.company-overview {
  padding-top: 10px;     /* ←60px から 20px に変更 */
}
/* 企業理念枠をテキスト幅＋αに狭める */
.section.company-info > .container {
  max-width: 850px;    /* お好みで600px→500pxなどに調整 */
  margin: 0 auto 16px; /* 上マージン0｜下マージン16px｜左右自動中央寄せ */
  /* 既存の枠・角丸・背景・paddingはそのまま残る想定 */
}
/* 企業理念セクション：タイトル下にセパレーターを追加 */
.company-info > .container h2 {
  position: relative;
  padding-bottom: 12px;              /* 下部に余白を確保 */
  margin-bottom: 8px;               /* 本文との間隔 */
  text-align: center;                /* 文字は中央揃えのまま */
}

.company-info > .container h2::after {
  content: "";
  display: block;
  width: 70%;                  /* 全体の50%幅 */
  max-width: 650px;            /* 最大650pxまで伸ばす */
  height: 2px;                       /* 線の太さ */
  background-color: #1967d2;         /* 線の色（ブランドカラー） */
  margin: 8px auto 0;                /* センターに配置、上マージンで位置調整 */
}

/* ───────────── */
/* 募集一覧ページ：応募方法テキスト */
/* ───────────── */
.application-info {
  margin-top: 40px;           /* 上との間隔 */
  padding: 20px;              /* 内側余白 */
  background: #eef6ff;        /* 淡いブルー背景 */
  border-radius: 8px;         /* 角丸 */
}
.application-info h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.5rem;
  color: #1967d2;
}
.application-info p {
  margin: 0;
  line-height: 1.6;
  color: #333;
}

.btn-small-inline {
  padding: 2px 18px;        /* 上下2px、左右18pxぐらい（調整可） */
  font-size: 1.05em;        /* 文字サイズはほぼそのまま */
  line-height: 1.3;         /* 通常テキストに近い高さ */
  border-radius: 8px;       /* 角丸は通常と同じ */
  vertical-align: middle;   /* テキスト行の中で中央揃え */
  display: inline-block;    /* インラインブロック */
  box-sizing: border-box;
}

.contact-form select {
  height: 50px;        /* 例：他inputと同じ高さに */
  padding: 2px 12px;  /* 上下の余白を調整 */
  font-size: 1.05rem;  /* フォントサイズも統一 */
  border-radius: 8px;  /* inputと合わせる */
  border: 1px solid #bbb;
  background: #fff;
  box-sizing: border-box;
  margin-bottom: 5px; /* 下余白は他と同じ */
}

/* 追加: ヒーローテキストのリンクを見出し風に */
.hero-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
  cursor: pointer;
}
.hero-link:hover {
  opacity: 0.7; /* 少し薄くしてホバー感だけ出す */
}

@media (max-width: 768px) {
  .site-nav ul li a {
    display: block;
    padding: 5px 0;
    width: 100%;
    text-align: center;
  }
}

.site-footer .footer-nav {
  margin-bottom: 1.5em;  /* お好みで2em, 24pxなどもOK */
}

/* JS to toggle menu */
"`}]}