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

   キャッチコピー

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

/* キャッチコピー全体のスタイル */

h1 {

/*    color: #333; /* 基本の文字色は落ち着いたグレー */

    color: yellow;

    font-size: 32px;

}



/* 強調したい部分（自働機械制御）だけ色を変える */

.highlight {

    color: white; /* ブランドカラーの青 */

    font-weight: bold; /* さらに太字にして強調 */

}



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

   会社メッセージ

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

.emphasize {

    color: #2563eb;       /* 鮮やかな青 */

    font-weight: bold;    /* 太字 */

    font-size: 1.1em;     /* 周りより少しだけ大きく */

}



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

   一般セクション & グリッド

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

section {

    padding: 80px 10%;        /* コンテンツエリアの基本余白 */

}



h2 {

    margin-bottom: 30px;

}



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

   スマホ対応（タブレット以下：768px未満）

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

@media (max-width: 768px) {

    header {

        padding: 20px;        /* 左右の広い余白を詰める */

    }



    nav {

        display: none;        /* メニューを一旦隠す */

        flex-direction: column; /* 縦並びに変更 */

        background: #0f172a;

        position: absolute;   /* ヘッダーから浮かせた状態で配置 */

        top: 70px;            /* ヘッダーの高さ分下に配置 */

        right: 0;

        width: 200px;

    }



    nav a {

        margin: 0;

        padding: 15px;

        border-top: 1px solid #1f2937; /* 項目間に仕切り線を追加 */

    }



    /* JavaScript等で .active クラスがついた時に表示 */

    nav.active {

        display: flex;

    }



    .menu-btn {

        display: block;       /* ハンバーガーボタンを表示 */

    }



    .hero {

        padding: 80px 20px;   /* 余白を少しコンパクトに */

    }



    .hero h1 {

        font-size: 28px;      /* タイトルを小さく調整 */

    }



    .grid {

        grid-template-columns: 1fr; /* スマホでは1列にする */

    }

}



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

   画像スライダー設定

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

.slider {

    max-width: 600px;         /* スライダーの横幅制限 */

    margin: 40px auto;        /* 上下に余白、左右中央寄せ */

    position: relative;       /* ボタンの配置基準 */

    overflow: hidden;         /* はみ出した画像を隠す */

}



.slides {

    display: flex;         				/* 画像を横一列に並べる */

    transition: transform 0.5s ease; 	/* スライド時のアニメーション設定 */

}



/* 各スライド（画像＋文字）の器 */

.slide {

    flex: 0 0 100%;    		/* 各スライドが幅100%になるように固定 */

    display: flex;

    flex-direction: column; /* 画像と文字を縦に並べる */

    align-items: center;    /* 中央寄せ */

}



/* 個々の画像の設定 */

.slide img {

    width: 100%;              	/* スライダー幅に合わせる */

    height: 100px;            	/* 高さを固定 */

    object-fit: contain;		/* 比率を保ったままトリミングして表示 */

    flex: 0 0 100%;           	/* 各画像がスライダー幅いっぱいに広がるよう固定 */

    display: block;

}



/* スライダー下の文字スタイル */

.slide-text {

    margin: 1px 0 0 0;		/* 画像との間に1pxの隙間 */

    font-size: 20px;       	/* 文字の大きさ */

    color: #333;           	/* 文字色 */

    font-weight: bold;     	/* 太字 */

    text-align: center;    	/* 中央揃え */

}



/* スライダー操作ボタン（前へ・次へ） */

.prev, .next {

    position: absolute;

    top: 50%;                 		/* 上から50%の位置 */

    transform: translateY(-50%);	/* 自身の高さの半分戻して完全中央へ */

    background: rgba(0,0,0,0.5); 	/* 半透明の黒 */

    color: white;

    border: none;

    font-size: 28px;

    padding: 10px 15px;

    cursor: pointer;

    z-index: 10;              		/* 画像より前面に出す */

}



/* スライダー操作ボタンの横位置調整 */

.prev { left: 10px; }	/* 左端から10pxの位置に配置 */

.next { right: 10px; }	/* 右端から10pxの位置に配置 */



/* スライダー下のドットナビ */

.dots {

    text-align: center;	/* ドットを中央に並べる */

    margin-top: 65px;	/* 画像や説明文との間の余白（重ならないよう広めに設定） */

}



/* ドット個別のスタイル */

.dot {

	display: inline-block; /* 横に並べる */

    width: 12px;           /* ドットの幅 */

    height: 12px;          /* ドットの高さ */

    background: #ccc;      /* 通常時の色（薄いグレー） */

    border-radius: 50%;    /* 正円にする */

    margin: 5px;           /* ドット同士の間隔 */

    cursor: pointer;       /* ホバー時に指マークにする */

}



/* 現在表示中のドット */

.dot.active {

    background: #2563eb;      /* 青色にして強調 */

}



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

   リンクギャラリー セクション

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

/* リンクギャラリー全体の調整 */

.link-gallery {

    width: 100%;

    max-width: 1000px; 		/* 全体の最大幅を抑えることで画像を小さく見せる */

    margin: 40px auto;  	/* 上下に余白を作り、中央に寄せる */

    padding: 0 20px;    	/* スマホ表示時の端の余白 */

    background: #ffffff;	/* 背景は清潔感のある白 */

}



/* 4枚横並びにするための設定 */

.link-gallery .grid {

    display: flex;       		/* 横並びにする */

    gap: 15px;           		/* 画像同士の隙間 */

    justify-content: center;	/* 中央寄せ */

}



/* 各カード（リンク）の調整 */

.link-gallery .link-card {

    flex: 1;             	/* 全て同じ幅で伸縮させる */

    max-width: 200px;    	/* 1枚あたりの最大幅を制限して小さくする */

    text-decoration: none;

}



/* 画像のサイズ調整 */

.link-gallery .link-card img,

.link-gallery .link-card video {

    width: 100%;         				/* 親要素(max-width: 200px)いっぱいに表示 */

    aspect-ratio: 4 / 3;   				/* 縦横比を固定 */

/*  object-fit: cover;					/* 枠内に収める設定 */

    height: auto;        				/* 比率を維持 */

    display: block;

    border-radius: 4px;  				/* 角を少し丸くすると綺麗に見えます */

    transition: transform 0.3s ease;	/* マウスを乗せた時の動き */

	border: 1px solid #ddd; 			/* 1pxの太さ、実線、薄いグレー */

    box-sizing: border-box;  			/* 縁を画像の内側に含める設定（必須） */

}

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

   ホバーアクション（マウス反応）

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

/* マウスを乗せた時にカード全体を少し浮かせる（ユーザーへの反応） */

.link-card:hover {

    transform: translateY(-8px); /* 上方向に8px移動 */

}



/* マウスを乗せた時に画像の影を濃くし、より浮いているように見せる */

.link-card:hover img {

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

    filter: brightness(1.1);   /* 画像を少し明るくして、選択されている感を出す */

}