@charset "utf-8";

/* BOIHイメージカラー */
a,
h2,
h3,
dt {
    color: #8EC31F;
}

/* navibarのリンクの色を変更 */
.menulink {
    color: #000000 !important;
}

/* navbarの分コンテンツを下にずらす */
body {
    padding-top: 50px;
}

/* トップ画像アニメーション設定 */
.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 100%; /* コンテナ幅を100%に */
	height: 600px; /* コンテナの高さを固定 */
	overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
}

.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
	width: 100%; /* スライド画像の幅を100%に */
	height: 100%; /* スライド画像の高さを100%に */
	top: 50px; /* 上からの位置 */
	left: 0; /* 左からの位置 */
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 15s infinite; /* 15秒で1サイクルのアニメーションを無限ループ */
}

@keyframes slideAnime {
	0%, 63%, 100% { opacity: 0; } /* 非表示のタイミングを設定 */
	20%, 33% { opacity: 1; } /* 表示されるタイミングを設定 */
}

/* 画像は全てサンプルです。実装時に差し替えをお願いします。 */
.slideimg:nth-of-type(1) {
	background-image: url('/img/sample1.jpg');
	animation-delay: 0s;
}

.slideimg:nth-of-type(2) {
	background-image: url('/img/sample2.jpg');
	animation-delay: 5s;
}

.slideimg:nth-of-type(3) {
	background-image: url('/img/sample3.jpg');
	animation-delay: 10s;
}

/* 各項目の飛び先を項目名が見えるようにずらす設定 */
#company,
#information,
#history,
#contact {
    padding-top: 70px;
}

/* 会社概要のテーブルの設定 */
.p6 {
	max-width: 500px;
	width: 90%;
}
.p6 th,
.p6 td {
	display: block;
	border: none;
}
.p6 th {
	font-weight: bold;
	padding: 14px 0 4px;

}
.p6 td {
    background: #e5ffcc;
}

/* 問い合わせフォームのボタンの設定 */
.btn-success {
    background-color: #8EC31F;
    color: #ffffff;
    border: 0;
}

.btn-success:hover {
    background-color: #8fc31fe1;
    color: #ffffff;
    border: 0;
}

.btn-success:active {
    background-color: #668b16 !important;
    color: #ffffff;
    border: 0;
}

.btn-custom-size {
    width: 200px;
    padding: mx-auto;
}

/* 企業理念のCSS */
.mau {
    background: #e5ffcc;
}
.dinhdang {
    justify-content: center;
}

.center h4 {
    text-align: center;
    font-size: 1rem;
    padding: 7px;
    letter-spacing: 3.5px;
}

.pic1 {
    width: 100%;
}

/* 各メニューのスライドイン設定。要素が見えたら再生したい。要JavaScript */

.center h2 {
    text-align: center;
    letter-spacing: 3.5px;
    transform: translateX(-100%);
    animation: slideIn 3s forwards;
}

@keyframes slideIn {
    to {
        transform: translateX(0);
    }
}

/* レスポンシブ対応のための記述 */

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */

    #company,
    #information,
    #history,
    #contact {
        padding-top: 30px;
    }

    h2 {
        margin-top: 5px;
    }
    h5 {
        font-size: 0.9em;
        margin: 10px;
        }

        /* 企業理念のCSS */
.center h4 {
    text-align: center;
    font-size: 1rem;
    padding: 7px;
    letter-spacing: 3.5px;
}

.pic1 {
    width: 100%;
}

}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    .slider-container {
        position: relative; /* コンテナ内でスライド位置を相対的に設定 */
        width: 100%; /* コンテナ幅を100%に */
        height: 300px; /* コンテナの高さを固定 */
        overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
    }

    .slideimg {
        position: absolute; /* 位置を絶対指定で重ねて配置 */
        width: 100%; /* スライド画像の幅を100%に */
        height: 100%; /* スライド画像の高さを100%に */
        top: 50px; /* 上からの位置 */
        left: 0; /* 左からの位置 */
        opacity: 0; /* 初期状態で透明に */
        background-size: cover; /* 画像をスライド全体にカバー */
	}

    #company,
    #information,
    #history,
    #contact {
        padding-top: 30px;
    }
}