html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-family: "MS PGothic", "ＭＳ Ｐゴシック", system-ui, sans-serif;
  line-height: 1.6;
}

/* --------------------------------------------------- */
/*                     サイドメニュー                   */
/* --------------------------------------------------- */

.sidebar {
  position: fixed;          /* スクロールしても画面に固定 */
  top: 0;                   /* 画面の上端から */
  left: 0;                  /* 左端に配置 */
  width: 200px;             /* 固定幅 */
  height: 100vh;            /* 画面の高さぴったりに伸ばす */
  background: #f9f9f9;      /* 背景色（お好みで） */
  border-right: 1px solid #000; /* 右側だけ黒線を引く */
  box-sizing: border-box;   /* padding込みで幅を保つ */
  padding: 10px;
  overflow-y: auto;         /* メニューが長くてもスクロールできるように */
}

/* ナビゲーションタイトル */
.nav-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 1.1em;   /* ← 通常文字より少し大きめ（10%アップ） */
}

/* リスト全体の基本設定 */
.nav ul {
  list-style: none;        /* 先頭の「・」を消す */
  padding: 0;
  margin: 0;
}

/* 各メニュー項目 */
.nav li {
  margin: 6px 0;            /* 項目ごとに少し間隔を空ける */
  padding-left: 8px;        /* ← 左側に余白を追加（文字を少し右にずらす） */
}

/* リンクの装飾（阿部寛HP風） */
.nav a {
  color: #0000ee;          /* 濃い青（昔ながらのリンク色） */
  text-decoration: underline; /* 下線リンク */
}

/* ホバー時の色変化 */
.nav a:hover {
  color: #ff0000;          /* 赤に変化（昔のWebっぽい演出） */
}

/* --------------------------------------------------- */
/*                    メインコンテンツ                  */
/* --------------------------------------------------- */
.content {
  margin-left: 220px;   /* サイドバーの幅＋余白ぶん右にずらす */
  padding: 20px;
}

.page-title {
  text-align: center;    /* 中央寄せ */
  font-size: 2em;        /* 通常文字の約2倍サイズ */
  font-weight: bold;     /* 太字 */
  margin: 20px 0;        /* 上下に少し余白をあける */
}

/* --------------------------------------------------- */
/*                         ホーム                      */
/* --------------------------------------------------- */
/* ロゴとニュース */
.logo-and-news {
  display: flex;             /* 横並びレイアウト */
  align-items: flex-start;   /* 上端をそろえる */
  gap: 20px;                 /* 写真と文字の間の余白 */
  margin-top: 20px;
  margin-bottom: 20px;       /* ← 写真の下にも余白をつける */
}

.photo {
  display: inline;          /* デフォルトのインライン配置にする（中央寄せしない） */
  margin-top: 10px;         /* タイトルとの間に少しだけ余白 */
  margin-left: 0;           /* 左端に寄せる（念のため明示） */
  width: 400px;
  height: auto;             /* 縦横比を保って縮小 */
  vertical-align: middle;   /* テキスト行とのバランスを整える（任意） */
}

.news {
  flex: 1;                   /* 残りスペースを使う */
}

.news-title {
  text-align: center;
  font-weight: bold;
  font-size: 1.3em;
  margin: 0 0 8px;
}

.news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news li {
  margin-top: 12px;      /* 各項目の上に余白（前の項目と離す） */
  margin-bottom: 12px;   /* 各項目の下にも余白 */
  padding-left: 50px;    /* 左に少し余白をあける */
  line-height: 3;      /* 行間をゆったりさせる（通常の1.6倍） */
}

/* 会社概要 */
.company-profile {
  margin-top: 30px;          /* ロゴ・ニュースからの余白 */
  padding: 20px;             /* 内側の余白（読みやすく） */
  line-height: 1.6;          /* 行間を少し広げて見やすく */
  max-width: 800px;          /* 横幅を制限（広すぎ防止） */
}

.company-profile h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: left;   /* ← 左寄せに変更 */
}

.company-profile dl {
  margin: 0;
}

.company-profile dt {
  font-weight: bold;
  width: 8em;                /* 左カラム幅（項目名） */
  float: left;               /* 項目名を左に寄せて横並びに */
  clear: both;               /* 各行を独立させる */
}

.company-profile dd {
  margin: 0 0 8px 8em;       /* 左に項目名ぶんの余白をつける */
}

/* --------------------------------------------------- */
/*                       会社案内                       */
/* --------------------------------------------------- */
.company-MVV {
  margin: 0 auto;      /* セクション全体を中央寄せ */
  line-height: 1.4;
}

.company-MVV .title {
  font-size: 1.6em;
  margin-bottom: 20px;
  text-align: center;  /* 中央揃え */
}

.company-MVV .center-text {
  text-align: center;
}

.company-MVV .left-text {
  text-align: left;
}

.company-MVV .policy {
  padding-left: 16px;
  padding-right: 16px;
}

.company-MVV .policy-text {
  padding-left: 24px;
  padding-right: 24px;
}

/* --------------------------------------------------- */
/*                       部署紹介                       */
/* --------------------------------------------------- */
.department-table {
  width: 70%;
  margin: 0 auto;
  border-collapse: separate; /* ← 二重線にしたいときは "separate" が必要 */
  border-spacing: 0;         /* 余白を消す */
  border: 3px double #333;   /* ← 表の外枠（二重線） */
}

.department-table td {
  border: 2px double #666;   /* ← セルごとの二重線 */
  padding: 20px;
  vertical-align: top;
}

.department-cell {
  width: 50%;
  padding: 24px;
  vertical-align: top;       /* 上揃え */
}

.department-table td:nth-child(1) { 
  text-align: left;
}

.department-table td:nth-child(2) { 
  text-align: right;
}

.dept-category {
  font-size: 0.9rem;
  text-transform: none;
}

.dept-name {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0.2em 0 0.6em;
}

.dept-office {
  font-size: 0.9rem;
  margin-bottom: 0.3em;
}

.dept-office-ja {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* --------------------------------------------------- */
/*                       代表挨拶                       */
/* --------------------------------------------------- */
.message-section {
  width: 70%;
  margin: 0 auto;
  line-height: 1.8;
}

.message-title {
  font-size: 1.6rem;
  margin-bottom: 1em;
  text-align: center;
}

.message-text {
  margin-bottom: 1.4em;
}

.message-sign {
  margin-top: 2em;
  font-weight: bold;
  text-align: right;
}

.message-photo img {
  display: block;
  max-width: 300px;
  margin: 40px auto;
}


/* 横3列レイアウト */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 90%;
  margin: 0 auto;
}

/* 各カード */
.dev-card {
  border: 1px solid #ccc;
  padding: 16px;
  text-align: left;
  background: #fff;
}

/* 写真 */
.dev-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-bottom: 12px;
  background: #eee;
}

/* 題名（大きめ） */
.dev-title-big {
  font-size: 1.2rem;
  margin: 0 0 6px;
  line-height: 1.4;
}

/* 名前（小さめ） */
.dev-author {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 8px;
}

/* 説明文（小さめ） */
.dev-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #444;
}



.works-intro {
  margin-bottom: 24px;
  line-height: 1.8;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 横3列 */
  gap: 24px;
  width: 90%;
  margin: 0 auto 40px;
}

.work-card {
  border: 1px solid #ccc;
  padding: 16px;
  background: #fff;
  font-size: 0.9rem;
}

.work-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: #eee;
  margin-bottom: 10px;
}

.work-title {
  font-size: 1rem;
  margin: 0 0 4px;
}

.work-client {
  font-size: 0.8rem;
  color: #555;
  margin: 0 0 6px;
}

.work-tags {
  font-size: 0.75rem;
  color: #777;
  margin: 0 0 8px;
}

.work-desc {
  line-height: 1.6;
}