/* =========================

   カードグリッド

========================= */

.works-grid{

	display:grid;



/* 1列の幅を均等にし、最大3列まで並べる設定 */

    grid-template-columns: repeat(3, 1fr);

	

/* 	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));/* カードを自動で並べる */

	gap:30px; /* カード間の余白 */

}



/* =========================

   カードデザイン

========================= */

.work-card{

	display:flex;

	flex-direction:column;

	background:#f5f7fb; /* カード背景色 */

	border-radius:8px; /* 角丸 */



	/* 画像がカード外にはみ出さない */

	overflow:hidden;



	/* カード影 */

	box-shadow:0 3px 10px rgba(0,0,0,0.1);



	/* アニメーション速度 */

	transition:0.3s;



	text-decoration:none; /* 下線消す */

	color:#333;



	/* --- カードの最大幅を制限 --- */

    max-width: 500px; /* お好みの幅（例: 300px〜400px）に調整してください */

    

    /* カードが左に寄るのを防ぎ、中央に配置したい場合 */

    /* margin: 0 auto; */

}



/* カードにマウスを乗せた時 */

.work-card:hover{

	/* 少し浮き上がる */

	transform:translateY(-6px);



	/* 影を強くする */

	box-shadow:0 10px 25px rgba(0,0,0,0.2);

}



/* =========================

   カード画像

========================= */

.work-card img{

	width: 100%;            /* 横幅はカードいっぱい */

    height: 200px;          /* 高さを固定（例：200px） */



    object-fit: contain;    /* 枠内に収まるように縮小。全体が表示される。 */

    object-position: center;/* 中央に配置 */



	display:block;			/* 画像下の余白を消す */

}



/* カードタイトル */

.work-card h3{

	margin:15px;/* 周囲余白 */

}



/* カード説明文 */

.work-card p{

	margin:0 15px 20px 15px;/* 周囲余白 */

	font-size:14px;

}



/* =========================

   カード本文

========================= */

.card-body {

    padding: 15px;      /* カード枠とコンテンツの間の余白 */

}



.card-body h3 {

    /* 上:0 左右:0 下:10px の余白（下のテキストとの距離を調整） */

    margin: 0 0 10px 0;

}



.card-body p {

    font-size: 14px;    /* 本文より少し小さくして情報の密度を上げる */

    margin-bottom: 15px;

}



/* =========================

   詳細ボタン

========================= */

.detail-btn {

    margin-top: auto;        /* 親要素がFlexboxの場合、ボタンを最下部に押し出す */

    background: #2563eb;     /* メインのアクセントカラー */

    color: white;

    padding: 8px 14px;       /* 上下左右の押しやすさを確保 */

    border-radius: 5px;      /* 緩やかな角丸 */

    font-size: 13px;

    display: inline-block;   /* 背景色やパディングを正しく反映させる */

}



/* カード全体をホバーした際、中のボタンの色を濃くする演出 */

.work-card:hover .detail-btn {

    background: #1e4ed8;     /* 少し暗めの青に変更して「押せる感《を出す */

}



/* =========================

   変数

========================= */

/* 文字の変数定義 */

:root {

    --text-point-detail: "詳細を見る →";

}



/* 表示させるための設定 */

.desc-detail::before {

    content: var(--text-point-detail);

}



/* =========================

   パンくずリスト

========================= */

.breadcrumb {

    font-size: 14px;

    color: #666;

    margin-bottom: 20px;

}



.breadcrumb a {

    color: #2563eb;

    text-decoration: none;   /* 下線を消してスッキリ見せる */

}



/* =========================

   メインタイトル

========================= */

h1 {

    margin-bottom: 10px;     /* 下のコンテンツ（画像や本文）との間隔 */

}



/* =========================

   装置・製品画像

========================= */

.machine-image {

    width: 90%;               /* 親要素の幅に合わせてリサイズ */

    display: block;           /* ブロック要素にしてマージンを有効化 */

    margin-left: auto;        /* 左余白を自動調整 */

    margin-right: auto;       /* 右余白を自動調整 */

    border-radius: 8px;       /* 角を丸めてモダンな印象に */

    margin-bottom: 30px;      /* 画像下の説明文との余白 */

}



/* 装置画像のサイズ制限（高さ優先） */

.machine-image.h_limit {

    display: block;

    width: auto;          /* 横幅は自動（高さに合わせる） */

    max-width: 100%;      /* 親要素からはみ出さないように */

    

    /* ★高さの制限：400px〜500px程度が一般的です */

    max-height: 450px;    

    

    /* ★重要：アスペクト比を維持しつつ枠内に収める */

    object-fit: contain;  

    

    margin: 30px auto;    /* 中央配置 */

    height: auto;

}



/* =========================

   説明・補足ブロック

========================= */

.info-box {

    background: #f5f7fb;     /* 薄いグレー背景で視覚的にエリアを分離 */

    padding: 25px;

    border-radius: 8px;

    margin-bottom: 30px;



    font-size: 20px;      /* フォントサイズ */

    line-height: 1.6;     /* 行間 */



	/* --- 中央寄せのための追加設定 --- */

	display: block;           /* ブロック要素であることを明示 */

    width: fit-content;      /* 中身の文字幅に合わせる（または 80% などに指定） */



    max-width: 100%;         /* ブロック自体の横幅を制限（任意で調整してください） */

    margin-left: auto;       /* 左側の余白を自動調整 */

    margin-right: auto;      /* 右側の余白を自動調整 */

    text-align: left;        /* 中のテキストは左寄せを維持 */

}





/* =========================

   スペック・詳細テーブル

========================= */

table {

    width: 100%;             	/* 横幅いっぱいに広げる */

    border-collapse: collapse; 	/* セル同士の隙間をなくして一本の線にする */

}



th, td {

    border-bottom: 1px solid #ddd; /* 横線のみのシンプルなデザイン */

    padding: 14px;           /* セル内の読みやすさを確保 */

    text-align: left;        /* 左寄せ */

}



th {

    width: 200px;            /* 見出しの幅を固定してガタつきを防ぐ */

    background: #f5f7fb;     /* 見出し行を背景色で強調 */

}



/* =========================

   戻るボタン

========================= */

.back-btn {

    display: inline-block;

    background: #2563eb;

    color: white;

    padding: 12px 20px;      /* 詳細ボタンより一回り大きくして目立たせる */

    border-radius: 6px;

    text-decoration: none;   /* リンクの下線を消す */

    margin-top: 20px;        /* 上のコンテンツとの距離 */

}