@charset "UTF-8";


body{
  font-family : メイリオ, "Noto Sans JP", 游ゴシック, sans-serif;
  color : #000000;
  background-color : #fcfcfa;
  border-width : 1px;
  border-style : none;
  border-collapse : collapse;
}
#wrap{
  width : 1200px;
  margin-left : auto;
  margin-right : auto;
}
#main-menu{
  padding-left : 0px;
  margin-left : 0px;
  display : flex;
  list-style-type : none;
  flex-direction : row;
  flex-wrap : wrap;
  justify-content : start;
}
.Class{
  padding-top : 8px;
  padding-left : 8px;
  padding-right : 8px;
  padding-bottom : 8px;
  margin-left : 5px;
  margin-right : 5px;
  width : 174px;
  color : white;
  background-color : teal;
}
/* ナビゲーションメニュー内のリンクの見た目を強制リセット */
#main-menu #nav-item a,
#main-menu a,
ul#main-menu li a{
  text-decoration: none !important; /* 下線を完全に消す */
  color: #ffffff !important;        /* 文字の色を他のメニューと同じ白にする */
}
#nav-item{
  padding-top : 8px;
  padding-left : 8px;
  padding-right : 8px;
  padding-bottom : 8px;
  margin-left : 5px;
  margin-right : 5px;
  width : 174px;
  color : #ffffff;
  background-color : teal;
  font-size : medium;
  text-align : center;
  border-top-left-radius : 3px 3px;
  border-top-right-radius : 3px 3px;
  border-bottom-right-radius : 3px 3px;
  border-bottom-left-radius : 3px 3px;
  font-weight : normal;
  font-family : 游明朝;
}
footer{
  text-align : left;
  padding-top : 20px;
  padding-left : 20px;
  padding-right : 20px;
  padding-bottom : 20px;
}
#footer-manu{
  padding-left : 0px;
  margin-left : 0px;
  display : flex;
  list-style-type : none;
  flex-direction : row;
  flex-wrap : wrap;
  justify-content : start;
}
#footer-nav-item{
  padding-top : 8px;
  padding-left : 8px;
  padding-right : 8px;
  padding-bottom : 8px;
  margin-left : 5px;
  margin-right : 5px;
  width : 174px;
  font-size : small;
  color : black;
  background-color : #e2f1f1;
  text-align : center;
  font-weight : bold;
}
table{
  margin-top : 50px;
  margin-bottom : 50px;
  border-top-width : 1px;
  border-bottom-width : 1px;
  border-style : none;
}
#main-ul{
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;
  list-style-type : square;
  list-style-image : url(info_listmark_17_b.png);
}
#main_img{
  margin-right : 0px;
}
#nav-item{
  transition: background-color 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

#nav-item:hover{
  background-color: #009688; /* マウスが乗ったときの色（深めの緑） */
  opacity: 0.9;              /* 少し明るく見せる透明度 */
  transform: translateY(-3px); /* ←ここにこの一行を追加します */
}
main{
  font-size : medium;
  font-weight : normal;
}

div{
  font-size : small;
  font-weight : normal;
}

p{
  font-size : small;
  font-weight : normal;
}

#main_company{
  font-size : xx-large;
  font-weight : bold;
  margin-left : 10px;
}
hr.company-line{
  border: none;
  border-top: 2px dashed #ccc; /* 2ピクセルのグレーの点線を引く */
}

/* ===================================================
   ■ 会社概要ページ専用のデザイン
=================================================== */

/* 1. 会社概要（DL）を綺麗な横並びにする設定 */
dl{
  display: flex;         /* 項目と中身を横並びにする */
  flex-wrap: wrap;       /* 画面幅に合わせて折り返す */
  font-size: 16px;       /* フォントを一回り大きく */
  line-height: 1.8;      /* 行間をあけて読みやすく */
  margin-top: 30px;
  margin-bottom: 50px;
}

dt{
  width: 25%;            /* 左側の「社名」などの幅を25%に固定 */
  font-weight: bold;     /* 項目名を太字に */
  color: #008080;        /* 項目名をティールグリーン（深緑）にする */
  padding: 7px 0;       /* 上下に程よい余白 */
  border-bottom: 1px solid #dddddd; /* 項目の下に薄い区切り線 */
}

dd{
  width: 75%;            /* 右側の「有限会社…」などの幅を75%に固定 */
  margin-left: 0;        /* 標準のズレをリセット */
  padding: 7px 0;       /* 上下に程よい余白 */
  border-bottom: 1px solid #dddddd; /* 中身の下にも薄い区切り線 */
  color: #333333;
}

/* 2. 受賞歴エリアを綺麗にまとめる設定 */
.jugen-title{
	 
  font-size: 18px;
  font-weight: bold;
  color: #008080;        /* ボタンとお揃いの深緑色 */
  border-left: 4px solid #008080; /* 左側にオシャレな縦線を入れる */
  padding-left: 10px;
  margin-top: 40px;
  margin-bottom: 20px;
}

.award-list li{
  font-size: 16px;       /* 文字を大きく */
  padding: 12px 0;       /* 上下に余白を作る */
  border-bottom: 1px dashed #dddddd; /* 項目の間に薄い点線を入れる */
  display: flex;         /* 実績名とオレンジの文字を左右に並べる */
  justify-content: flex-start; /* ★【修正】両端ではなく、左詰めに並べます */
  align-items: center;            /* 上下中央を揃える */
}

/* ★左側の実績名と点線の設定 */
.award-list .award-name{
  width: 100%;           /* 幅をいっぱいに広げます */
  display: flex;
  align-items: center;
}
/* ★文字が飛び出さないように自動幅に修正します */
.award-tag{
  background-color: #fff3cd; 
  color: #856404;            
  padding : 3px 40px 3px 10px;
  border-radius: 3px;        
  font-size: 14px;           
  font-weight: bold;
  width: auto;               /* 幅を自動にしてはみ出しを防ぎます */
  white-space: nowrap;       /* タグの中身が絶対に改行されないようにする */
  display: inline-block;
  background-clip: padding-box; 
  box-sizing: border-box;
}

#dd社名{
  color : #008080;
}

li{
  font-size : large;
  font-weight : bold;
  color : teal;
}
/* ===================================================
   ■ プライバシーポリシー専用の箇条書き設定
=================================================== */
ul.privacy-list{
  list-style-type: square;
  margin-top: 10px;
  margin-bottom: 15px;
  padding-left: 20px;
}
.privacy-list li{
  font-size : small;
  color: #000000;
  font-weight: normal;
  background: none;
  padding: 4px 0;
  display: list-item;
}

/* --- 追加：実績カードの横並び設定 --- */

/* 1. 3つのカードを横並びにする */
.works-container{
  display: flex;
  justify-content: space-between;
  gap: 20px;       /* カードとカードの間のすき間 */
  margin: 25px 0;  /* 上下の余白 */
  width: 100%;     /* 全体の横幅いっぱいに広げる */
}

/* 2. カード1つずつの枠線とデザイン */
.works-card{
  flex: 1;         /* 3つのカードを均等な幅にする */
  display: block;
  text-decoration: none !important; /* ★文字の下線を絶対に消す */
  color: inherit !important;         /* ★文字の色をサイト通常の色（引き継ぎ）にする */
  border: 1px solid #ccc;           /* グレーの四角い枠線 */
  background-color: #fff;
}

/* 3. 写真を収める枠 */
.works-photo{
  width: 100%;
  overflow: hidden;
}

/* 4. 写真自体のサイズ調整 */
.works-photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* 5. 建物名称（テキスト部分）の余白と見た目 */
.works-title{
  padding: 15px 10px;  /* 文字の周りの余白（上下15px、左右10px） */
  font-size: 15px;     /* 文字の大きさ */
  text-align: left;    /* 文字を左寄せにする */
}